Android布局优化
CarCostello
7年前
<p>本文主要记录Android布局优化的一些小技巧</p> <p>Android中，如果一个View树的高度太高，就会严重影响测量，布局和绘制的速度，因此可以使用一些方法来降低View树的高度，提高用户体验</p> <h2>目录</h2> <ul> <li>避免使用过多嵌套</li> <li>重用布局文件<include>、<merge></li> <li>View延时加载<ViewStub></li> <li>工具HierarchyView帮助优化布局（本文没有介绍具体使用）</li> </ul> <h2>避免使用过多嵌套</h2> <p>先来看一个非常常见的效果</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/023ef608236a802286c5afbd794ec53e.jpg"></p> <p>相信这样的效果对我们来说完全不是问题，然而很多人会这样写布局</p> <pre> <code class="language-java"><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></code></pre> <p>可以看到这里布局嵌套了多层，类似这种效果有更优雅的写法，效果是完全一样的</p> <pre> <code class="language-java"><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></code></pre> <p>这里主要用到了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" 设置图片与文字的间距。</p> <p>我们可以对比一下两个布局文件，更少的嵌套，更简洁的代码，相信你会更喜欢第二种写法。</p> <h2>重用布局文件<include>、<merge></h2> <h3><include></h3> <p>简单来说 <include> 标签就是为了一些通用的UI来使用的，有时候我们不想用系统的Toolbar，完全可以自己写一个满足我们的需求，先看效果。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2ec395d9e15e038ee98b5dfffa70a99e.jpg"></p> <p>这里很简单的实现了左边一个图片，中间标题，右边一个图片，一般情况左边是一个back按钮，右边一个action按钮，这里为了方便演示就直接用系统里的图片。关键代码片段如下。</p> <pre> <code class="language-java"><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></code></pre> <p>由于我们会在多个Activity使用到这个布局，你完全可以每个Activity都拷贝一份上面的代码，但我相信身为程序猿的你不会那么做，因为如果某一天需求需要改动这个布局，而你每个Activity都需要修改，这时候你是崩溃的。为解决此问题我们就可以用到 <include> 标签来重用此UI。</p> <p>首先我们可以新建一个 top_view.xml 布局文件，代码就是把上面<RelativeLayout>包含的整个提取出来。然后把刚刚的布局替换成 <include> 。</p> <pre> <code class="language-java"><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></code></pre> <p>使用 layout="@layout/top_view" 属性将我们刚刚的布局引入即可。非常简便，这样即使需要改动我们只需修改 top_view.xml 里面的内容就能适用整个APP。</p> <h3><merge></h3> <p>简单来说 <merge> 标签可以有效的减少多余的布局嵌套，这里简单的举个栗子。直接关键贴代码</p> <pre> <code class="language-java"><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></code></pre> <p>ok_cancel_layouy.xml</p> <pre> <code class="language-java"><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></code></pre> <p>这时候我们看下View的层次，抛开最外层的FrameLayout不说，先是LinearLayout接着是 <include> 里面的LinearLayout，最后是两个Button，这时候内层的LinearLayout其实是多余的，我们可以使用 <merge> 来代替，这样系统就会忽略 <merge> 直接放下两个Button。</p> <p>修改后的 ok_cancel_layouy.xml</p> <pre> <code class="language-java"><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></code></pre> <h2>View延时加载<ViewStub></h2> <p>上面我们知道了通过 <include> 可以引用通用UI，还可以使用 <ViewStub> 来引用并实现延迟加载。 <ViewStub> 是一个非常轻量级的控件，它没有大小，没有绘制，也不参与布局。填写资料的时候，有时会有更多资料填写，这时候我们需要实现点击更多才显示其他资料，效果如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/39b78c04baf6e750eeef903afb883af8.jpg"></p> <p>点击more的时候会多出两个输入框</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d0a2fe428ea4a5a3967e295d583f9d87.jpg"></p> <p>布局文件如下</p> <pre> <code class="language-java"><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></code></pre> <p>more_layout.xml</p> <pre> <code class="language-java"><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></code></pre> <p>点击more进行显示</p> <pre> <code class="language-java">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); } } });</code></pre> <p>有两种方法可以让 <ViewStub> 的布局进行显示，一种是直接设置 viewStub.setVisibility(View.VISIBLE) ，第二种则是使用 inflate 来加载，如要获取到里面控件，我们一般采用第二种方法。</p> <p>从上面可以看出 <ViewStub> 的用法类似于 <include> ，不同的是 <ViewStub> 必须指定 layout_width 和 layout_height 属性，还有一点需要注意 <ViewStub> 所加载的布局是不可以使用 <merge> 标签的。</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/2b1aa0863cf8</p> <p> </p>