Android GridLayout单元格间距设置问题及内嵌ConstraintLayout的XML代码

嘿，针对你在ConstraintLayout里嵌套GridLayout的场景，我整理了几种实用的单元格间距设置方案，一起来看看：

方法一：用GridLayout自带属性快速设置统一间距 #

这是最省心的方式，直接给GridLayout添加horizontalSpacing和verticalSpacing属性就能统一设置所有单元格之间的水平、垂直间距，适合大部分场景。

示例代码：

<android.support.v7.widget.GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="2" <!-- 你的列数 -->
    android:rowCount="3"    <!-- 你的行数 -->
    android:horizontalSpacing="12dp" <!-- 列与列之间的水平间距 -->
    android:verticalSpacing="12dp"   <!-- 行与行之间的垂直间距 -->
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">

    <!-- 你的子View，比如TextView、ImageView等 -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="单元格1"
        app:layout_columnWeight="1"
        android:background="#ffffff"/>

    <!-- 其他子View... -->
</android.support.v7.widget.GridLayout>

方法二：给子View设置margin实现自定义间距 #

如果需要给不同的单元格设置不一样的间距，或者想精准控制边缘单元格和父布局的距离，就可以给每个GridLayout的子View单独设置layout_margin属性。

比如想让相邻单元格之间有间距，但GridLayout和ConstraintLayout边缘没有多余间距，可以这么写：

<android.support.v7.widget.GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="2"
    android:rowCount="2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">

    <!-- 第一行第一个单元格：只设置右侧和底部间距 -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="单元格1"
        app:layout_columnWeight="1"
        android:background="#ffffff"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"/>

    <!-- 第一行第二个单元格：只设置底部间距 -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="单元格2"
        app:layout_columnWeight="1"
        android:background="#ffffff"
        android:layout_marginBottom="8dp"/>

    <!-- 第二行第一个单元格：只设置右侧间距 -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="单元格3"
        app:layout_columnWeight="1"
        android:background="#ffffff"
        android:layout_marginEnd="8dp"/>

    <!-- 第二行第二个单元格：不需要额外间距 -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="单元格4"
        app:layout_columnWeight="1"
        android:background="#ffffff"/>
</android.support.v7.widget.GridLayout>

方法三：结合alignmentMode优化带背景的单元格间距 #

如果你的子View有背景色或背景图，默认情况下GridLayout的间距计算是基于View的内容区域，可能会导致视觉上的间距不太准确。这时候可以给GridLayout加上android:alignmentMode="alignBounds"属性，让间距基于View的整个边界来计算，视觉效果会更统一。

示例代码：

<android.support.v7.widget.GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="2"
    android:rowCount="2"
    android:horizontalSpacing="16dp"
    android:verticalSpacing="16dp"
    android:alignmentMode="alignBounds"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="带背景的单元格"
        app:layout_columnWeight="1"
        android:background="#ffcccc"
        android:padding="8dp"/>
</android.support.v7.widget.GridLayout>

你可以根据自己的需求选择合适的方法，要是还有细节问题可以随时调整哦~

内容的提问来源于stack exchange，提问作者Bogdan