Android中Grid间距的技巧

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

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

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

图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元素的分隔符：

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

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