Android性能优化第(十)篇---布局优化

0.282字数 1352阅读 3259

版权声明:本文为LooperJing原创文章,转载请注明出处!

之前在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>

预览效果如下


include

每一个项目中都有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。

DecroView

我们看第一种情况,我们通过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工具看一下,如图:


使用< merge/>修改后的

我们在看第二种情况

比如,如果你有一个 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 !

推荐阅读更多精彩内容