Android里的网格空隙

在很多移动端或者web端开发中我们会遇到很多网格布局，如果我们使用线性布局来实现一些简单的网格布局就需要使用padding/margin等属性来使其对齐，代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="@dimen/spacing_medium">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="128dp"
        android:background="@color/light_gray"
        android:gravity="center"
        android:textSize="@dimen/text_size"
        android:text="@string/application_logo"
        android:textAppearance="@android:style/TextAppearance.Material.Display1" />

    <LinearLayout
        android:id="@+id/buttons_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_first"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="@dimen/text_size"
            android:background="@color/violet"
            android:text="@string/button_1" />

        <Button
            android:id="@+id/btn_second"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="@dimen/text_size"
            android:background="@color/blue"
            android:text="@string/button_2" />

        <Button
            android:id="@+id/btn_third"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="@dimen/text_size"
            android:background="@color/green"
            android:text="@string/button_3" />

    </LinearLayout>

</LinearLayout>

但是我们很多时候需要让这些网格元素之间有一些空隙，这样看起来好看一些，如下



这样看起来确实很漂亮，但是漂亮的同时问题来了，现在我们需要去掉BUTTON 3,去掉后就会发现最右边对齐出现了问题（因为我们是使用padding/margin来实现的），其实LinearLayout已经有间隙的概念，可以设置其子元素间的间隙，下面我们来定义我们自己的间隙，使得后面更加灵活的变化我们网格元素间的间隙。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size
        android:width="@dimen/spacing_medium"
        android:height="@dimen/spacing_medium" />

    <solid android:color="@android:color/transparent" />

</shape>

现在我们可以给LinearLayout设置divider 和 showDividers (注意：android:divider, android:showDividers)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@drawable/spacer_medium"
    android:orientation="vertical"
    android:padding="@dimen/spacing_medium"
    android:showDividers="middle">

    <!-- TextView -->

    <LinearLayout
        android:id="@+id/buttons_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@drawable/spacer_medium"
        android:orientation="horizontal"
        android:showDividers="middle">

        <!-- Buttons -->

    </LinearLayout>

</LinearLayout>

这样我们可以自由方便的调节类似的网格布局之间的间隙了，这些技巧可以方便我们的布局，减少代码量，让我们的代码更加容易维护。