Android中Grid间距的技巧

大多数移动和网络用户界面都是基于网格的概念。网格更加直观的去描述，也就是，将用户界面拆分成一堆对齐的正方形，将不同小块合并在一起以创建网格块。在设计UI时使用Grid可帮助对齐元素，提供一致性，让代码更清晰，以确保用户可以轻松地解析UI的内容等。简而言之，Grid是一个非常强大的设计工具。

使用Grid通常需要我们在元素之间添加一些额外的padding/margin/spacing。事实上，添加元素之间的间距有助于保持块之间的明确分隔，可以同时保持UI的高度可读性。为了清楚地将逻辑与UI隔离，Grid通常在接口的XML中定义。虽然这在UI非常静态时特别好，可能更难管理动态UI，其中元素被隐藏/展示时需显示。本文展示了一些提示和技巧，以更好地管理动态网格基UI。

我们来创建一个简单的布局作为一个例子。我们创建一个有三个Button的horizontal bar，展示一个静态View（例如应用程序标志）。布局如下图所示：

<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: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:background="@drawable/purple"
            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:background="@drawable/indigo"
            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:background="@drawable/teal"
            android:text="@string/button_3" />

    </LinearLayout>

</LinearLayout>复制代码

图1

前一屏幕中显示的用户界面显然依赖于Grid概念。但是，元素之间并没有间距，不便于用户清楚地区分UI中的独立实体。当我们添加一些属性 android:layout_marginTop="@dimen/spacing_medium"到 LinearLayoutID-ED @id/buttons_container，并修改 android:layout_marginRight="@dimen/spacing_medium"以 Button小号 @id/btn_first和 @id/btn_second：

图2

上面的UI看起来就比较可爱了，可读性也提高了。但是呢，当 View在布局中动态隐藏某些东西时，就不怎么有趣了。众所周知，在我们点击 @id/btn_third需要一些设备上不可用的功能（例如GooglePlay服务）。不混淆UI的方法最好方法是将第三个button的可见性更改。方法是将第三个button的可见性更改Button View.GONE：

图3

如预期的， @id/btn_third不再显示，但右边缘 @id/btn_second与应用程序图标的右边缘不对齐。这个问题的主要原因是，边际技术只要符合开始时的假设，就能很好地工作：每个 View都有一个right/marginTop有一个相邻的 View。在这个布局中隐藏一些 View违反了它的约束。

解决这个问题的一个常用技巧将是手动更改Java代码中元素的边距，但是这是一个不怎么有趣的解决方案。另一种方式是使用自动处理元素间距的布局。可以用GridLayout。但是，这种布局不允许你在元素之间指定特定的边距（只有默认边距可用）。

实际上，LinearLayout已经管理了元素间距的概念。这个功能是未知的，它是封装在框架中的。诀窍在于使用Drawable内在的width/height 作为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>复制代码

现在您可以将这个新创建的Drawable作为元素之间的间隔，将其设置为LinearLayout：

<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>复制代码

Android框架包含很多使用和调整的功能，可以帮助我们缩小实际实现效果与初始预期效果略有不同的差距， Drawable是其中之一。