Android UI布局优化

       Android中布局有很多坑，UI优化之路就是踩坑修行之路。下面简单说说Android基础也是我们认为很简单但是又是必不可少的UI设计。

       Android的UI设计我归纳为四点：

       1.尽可能使用RelativeLayout，其他的看场景；

       2.太多重复样式，就把公共部分抽出来使用<include/>标签；

       3.使用<merge/>标签减少布局嵌套的层级；

       4.不常用的需要延迟加载的使用<ViewStub/>标签。

       第一条可以从android创建hello world工程就可以看出来，早期的时候是使用LinearLayout，现在都默认是RelativeLayout，这个应该就是一种优化考虑。

       <include/>标签比较好理解，就是把公用的布局写到一个公共文件里，在其他需要使用到这个类似样式布局时直接引用即可。<include/>标签的缺点是会增加布局层级，从而导致加载变慢。

具体代码如下：

<include        android:id="@+id/layout_score_list_left"        layout="@layout/score_listitem_info"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        />

        <merge/>标签则是针对减少布局层级来设计的，它一般都是作为一个布局的根节点，直接把这个布局加载到它的父布局里面，而不会产生嵌套。它有两个典型场景:一是布局的根节点是FrameLayout；另外就是和<include/>标签结合使用，作为include的布局文件根节点。第一个场景能适用是因为一个Activity的视图的父视图就是一个FrameLayout，所以可以直接把它加到父视图而不用嵌套两层FrameLayout。第二种场景也很好理解，<include/>增加了一层布局，<merge/>减少一层，相当于直接把布局加到父布局里面。

        <merge/>标签有几个注意点：第一，<merge/>只能作为布局的根；第二是<merge/>减少了布局层级的本质是直接把视图加到父视图里面，所以设计子布局时一定要考虑清楚它在父视图中的位置情况，有时用<merge/>是无法达到一些视图位置显示效果的；第三，以<merge/>标签为根布局的文件是不能设置background和padding等属性的，这个也很好理解，因为是直接把子布局加到父布局，这些属性是无效的。第四，使用merge来inflate布局的时候，需要其父布局是一个ViewGroup，而且要设置inflate的attachToRoot为true。

代码如下：

View view = LayoutInflater.from(mContext).inflate(R.layout.main, this, true);

        <ViewStub/>标签是一个不太常见的标签，它主要用在做预加载，可以改善布局加载的速度提高页面流畅感。官方说法是<ViewStub/>是一个不可见的可以在运行时延迟加载的大小为0的view，当它调用inflate方法或者设置可见的时候，<ViewStub/>里面的布局就会被加载出来，主要用于显示不太常用的view。

        <ViewStub/>也有很多需要注意的：第一就是它只能被加载一次，也就是说inflate之后就不能再通过<ViewStub/>来控制里面的布局，所以如果有需求是需要显示和隐藏布局，就不是很适用；第二就是它加载的是一个布局不是view，所以要操作view还得把view放到布局里面去；第三就是它不能嵌套<merge/>标签。

        给两张图看一下<merge/>和<include/>导致的布局变化。第一张图是直接使用<include/>标签的效果，可以看出多了两个LinearLayout节点，使用<merge/>之后就把两个节点消除了，但是也带来了一个问题就是布局位置产生了变化。

    最后说一下，可以使用Android Studio自带的工具看布局嵌套情况。菜单栏有一个Tools->Android->Android Device Monitor。打开之后和eclipse的DDMS一样好用，左边有一排按钮，有一个叫着“Dump View Hierarchy for UI Automator”，这个就可以用来截图然后分析当前视图的布局层级。