之前在Android性能优化第(四)篇—Android渲染机制说了一下UI的渲染,我们知道Android系统每隔16ms就重新绘制一次Activity,如果没有完成就会有丢帧的现象。为了减轻UI绘制的负担,有必要把Layout编写的一些注意事项总结一下。
首先说一下< include/>,< merge/>,ViewStub,如果对这部分清楚的朋友可以跳过。
1、< include/>重用
比如我们要写一个TitleBar(title_bar_layout.xml),是这样子的。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<TextView
android:layout_width="50dp"
android:layout_height="match_parent"
android:background="@drawable/back" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="竞技台"
android:textSize="18sp" />
<TextView
android:layout_width="50dp"
android:layout_height="match_parent"
android:gravity="center"
android:text="确定"
android:textSize="18sp" />
</LinearLayout>
预览效果如下
每一个项目中都有TitleBar,所以使用< include/>进行服用,以便统一管理,在使用的时候,一行代码就OK了。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_layout_opt"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="zhangwan.wj.com.myshare.activity.LayoutOptActivity">
<include layout="@layout/title_bar_layout" />
</FrameLayout>
实际上对于TitleBar我们一般都会封装成一个控件来使用。
2、< merge/>减少视图层级
为什么要减少视图层级,在加载布局的时候,rinflater是通过深度优先遍历来构造视图树,每解析到一个View,就会递归调用rinflater,直到这条路径的最后一个元素,然后再回溯过来将每一个View添加到他们的parent中,整个View树构建完毕。在使用了include后可能导致布局嵌套过多,出现不必要的layout节点,从而导致解析变慢。这个时候我们可以使用< merge/>标签。< merge/>标签可用于两种典型情况:
- 布局顶结点是FrameLayout且不需要设置background或padding等属性,可以用merge代替,因为Activity内容试图的parent view就是个FrameLayout,所以可以用merge消除只剩一个。
- 某布局作为子布局被其他布局include时,使用merge当作该布局的顶节点,这样在被引入时顶结点会自动被忽略,而将其子节点全部合并到主布局中。
为了更好理解这两种情况,我们复习一下DecroView,DecroView是Activity的顶级View,继承与FramLayout,内部有一个竖直方向的LinerLayout,上面是标题栏,下面内容栏,内容栏是我们Activity的setContentView的布局,这个内容栏是个FramLayout。
我们看第一种情况,我们通过View Hierarchy工具看一下,如图:
发现了有一个FrameLayout是不需要的。使用< merge/>修改。
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_layout_opt"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="zhangwan.wj.com.myshare.activity.LayoutOptActivity">
<include layout="@layout/title_bar_layout" />
</merge>
我们在通过View Hierarchy工具看一下,如图:
我们在看第二种情况
比如,如果你有一个 Layout 是一个竖直方向的 LinearLayout,其中包含两个连续的 View 可以在别的 Layout 中重用,那么你会做一个 LinearLayout 来包含这两个 View ,以便重用。不过,当使用另一个 LinearLayout 来嵌套这个可重用的 LinearLayout 时,这种嵌套 LinearLayout 的方式除了减慢你的 UI 性能外没有任何意义。
为了避免这种情况,你可以用 < merge/> 元素来替代可重用 Layout 的根节点。例如:
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/add"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/delete"/>
</merge>
3、ViewStub延迟加载
延迟加载意味着我们可以分批次的将一个Layout中的View解析加载到内存,比如说,我们最先加载Loading的布局,等待网络请求,然后加载常规展示的布局,当网络请求发生错误或者空数据的时候,加载错误布局。分批次加载减轻了CPU和GPU的负担,ViewStub 是一个轻量的视图,不需要大小信息,也不会在被加入的 Layout 中绘制任何东西。ViewStub可见或是被inflate了,ViewStub就不存在了,取而代之的是被inflate的Layout。所以它也被称做惰性控件。
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="zhangwan.wj.com.myshare.activity.LayoutOptActivity">
<include layout="@layout/title_bar_layout" />
<ViewStub
android:inflatedId="@+id/no_data_view"
android:id="@+id/no_data_view"
android:layout="@layout/no_data_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</merge>
注意android:inflatedId指定的no_data_view是布局no_data_layout的根id, android:layout=”@layout/no_data_layout”是指定加载哪个布局。
要让ViewStub显示出来,可以用viewStub.infalte()或viewStub.setVisibility(View.VISIBLE)来完成,如下。
public void showEmptyView() {
// listview.setVisibility(View.GONE);
if (mNoDataView == null) {
ViewStub noDataViewStub = (ViewStub)findViewById(R.id.no_data_view);
mNoDataView = noDataViewStub.inflate();
} else {
mNoDataView.setVisibility(View.VISIBLE);
}
}
现在你可能会问,ViewStub和View.GONE的区别。他们的共同点是一开始的时候都不会显示,但是View.GONE在布局加载的时候,就已经添加到布局树上了,而ViewStub只会在显示的时候才会渲染布局。最后注意ViewStub加载的布局中不能有merge。
4、能用一个View搞定的,别用两个
看红框的部分,通常我们都是弄5个TextView在一个竖直方向的LinerLayout中,但是我们可以这样写
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="100dp"
android:layout_margin="20dp"
android:layout_width="match_parent">
<TextView
android:textSize="14dp"
android:lineSpacingMultiplier="1.3"
android:gravity="center_vertical"
android:text="玩家等级\n对战总胜利\n胜率\n参与比赛\n获得冠军"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
在比如下图中红框部分我们可以使用SpannableStringBuilder
又比如下图
每个条目之间的间隔不要在使用一个空View了,如果使用margin阅读不直观。可以使用Space控件
<Space
android:layout_width="match_parent"
android:layout_height="15dp"/>
加入上图中,需求不是间隙,而是一条分隔线,怎么办呢?,难道是用一个View设置高度实现吗?非也!LinearLayout和ListView一样,有android:divider与android:showDividers属性。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content_home"
android:orientation="vertical"
android:divider="@drawable/divider"
android:showDividers="middle"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="个人信息" />
...
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="1000dp"
android:height="15dp" />
<solid android:color="#e7e7e7" />
</shape>
OK,布局优化的部分到此结束。
Please accept mybest wishes for your happiness and success !