Android布局优化
本文主要记录Android布局优化的一些小技巧
Android中，如果一个View树的高度太高，就会严重影响测量，布局和绘制的速度，因此可以使用一些方法来降低View树的高度，提高用户体验
目录
- 避免使用过多嵌套
- 重用布局文件<include>、<merge>
- View延时加载<ViewStub>
- 工具HierarchyView帮助优化布局（本文没有介绍具体使用）
避免使用过多嵌套
先来看一个非常常见的效果
相信这样的效果对我们来说完全不是问题，然而很多人会这样写布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:text="第一项"
android:textSize="18sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/arrows_right" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#cccccc" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:text="第二项"
android:textSize="18sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/arrows_right" />
</LinearLayout>
</LinearLayout>
可以看到这里布局嵌套了多层，类似这种效果有更优雅的写法，效果是完全一样的
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@drawable/spacer"
android:orientation="vertical"
android:showDividers="middle">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_launcher"
android:drawablePadding="10dp"
android:drawableRight="@drawable/arrows_right"
android:gravity="center_vertical"
android:padding="5dp"
android:text="第一项"
android:textSize="18sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_launcher"
android:drawablePadding="10dp"
android:drawableRight="@drawable/arrows_right"
android:gravity="center_vertical"
android:padding="5dp"
android:text="第二项"
android:textSize="18sp" />
</LinearLayout>
这里主要用到了LinearLayout的android:divider="@drawable/spacer" 和android:showDividers="middle"两个属性添加分割线，注意android:divider里面的参数必须是shape类型才能显示。TextView里面则用到了android:drawableLeft="@mipmap/ic_launcher"设置文字左边图片，android:drawableRight="@drawable/arrows_right"同理这是文字右边图片，android:drawablePadding="10dp"设置图片与文字的间距。
我们可以对比一下两个布局文件，更少的嵌套，更简洁的代码，相信你会更喜欢第二种写法。
重用布局文件<include>、<merge>
<include>
简单来说<include>标签就是为了一些通用的UI来使用的，有时候我们不想用系统的Toolbar，完全可以自己写一个满足我们的需求，先看效果。
这里很简单的实现了左边一个图片，中间标题，右边一个图片，一般情况左边是一个back按钮，右边一个action按钮，这里为了方便演示就直接用系统里的图片。关键代码片段如下。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@drawable/spacer"
android:orientation="vertical"
android:showDividers="middle">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="标题"
android:textSize="18sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="@mipmap/ic_launcher" />
</RelativeLayout>
...
</LinearLayout>
由于我们会在多个Activity使用到这个布局，你完全可以每个Activity都拷贝一份上面的代码，但我相信身为程序猿的你不会那么做，因为如果某一天需求需要改动这个布局，而你每个Activity都需要修改，这时候你是崩溃的。为解决此问题我们就可以用到<include>标签来重用此UI。
首先我们可以新建一个top_view.xml布局文件，代码就是把上面<RelativeLayout>包含的整个提取出来。然后把刚刚的布局替换成<include>。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@drawable/spacer"
android:orientation="vertical"
android:showDividers="middle">
<include layout="@layout/top_view" />
...
</LinearLayout>
使用layout="@layout/top_view"属性将我们刚刚的布局引入即可。非常简便，这样即使需要改动我们只需修改top_view.xml里面的内容就能适用整个APP。
<merge>
简单来说<merge>标签可以有效的减少多余的布局嵌套，这里简单的举个栗子。直接贴关键代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
<include layout="@layout/ok_cancel_layouy" />
</LinearLayout>
ok_cancel_layouy.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ok" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="cancel" />
</LinearLayout>
这时候我们看下View的层次，抛开最外层的FrameLayout不说，先是LinearLayout接着是<include>里面的LinearLayout，最后是两个Button，这时候内层的LinearLayout其实是多余的，我们可以使用<merge>来代替，这样系统就会忽略<merge>直接放下两个Button。
修改后的ok_cancel_layouy.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ok" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="cancel" />
</merge>
View延时加载<ViewStub>
上面我们知道了通过<include>可以引用通用UI，还可以使用<ViewStub>来引用并实现延迟加载。<ViewStub>是一个非常轻量级的控件，它没有大小，没有绘制，也不参与布局。填写资料的时候，有时会有更多资料填写，这时候我们需要实现点击更多才显示其他资料，效果如下
点击more的时候会多出两个输入框
布局文件如下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:hint="name" />
<ViewStub
android:id="@+id/view_stub"
android:layout_width="match_parent"
android:layout="@layout/more_layout"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn_more"
android:layout_width="wrap_content"
android:text="more"
android:layout_height="wrap_content" />
</LinearLayout>
more_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="@+id/et_more1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:hint="more1" />
<EditText
android:id="@+id/et_more2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:hint="more2" />
</LinearLayout>
点击more进行显示
btn_more = (Button) findViewById(R.id.btn_more);
btn_more.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ViewStub viewStub = (ViewStub) findViewById(R.id.view_stub);
1.viewStub.setVisibility(View.VISIBLE);
if (viewStub != null) {
2.View inflatedView = viewStub.inflate();
et_more1 = (EditText) inflatedView.findViewById(R.id.et_more1);
et_more2 = (EditText) inflatedView.findViewById(R.id.et_more2);
}
}
});
有两种方法可以让<ViewStub>的布局进行显示，一种是直接设置viewStub.setVisibility(View.VISIBLE)，第二种则是使用inflate来加载，如要获取到里面控件，我们一般采用第二种方法。
从上面可以看出<ViewStub>的用法类似于<include>，不同的是<ViewStub>必须指定layout_width和layout_height属性，还有一点需要注意<ViewStub>所加载的布局是不可以使用<merge>标签的。
对于Android布局优化就写这些，另外系统还提供了一个工具HierarchyView可以帮助我们更好的优化布局，需要学习更多的可以直接阅读官网的文章。(需要科学上网)
第一次写文章，有疑问或错误的欢迎指出，互相学习。
