Android性能优化之布局优化

2018-06-19  本文已影响24人  tuacy

       不合理的布局会使我们应用程序UI性能变慢，客户体检会比较差。今天分享一些layout布局文件中的一些技巧，希望对大家写出高质量的布局文件能有一些帮助。

在开始之前先介绍一个能帮助我们优化布局的一个工具。

       Hierarchy Viewer工具，提供了一个可视化界面显示布局的层次结构、以及查看每个界面measure，layout，draw所耗费的时间。给我们优化界面布局结构提供了一个很好的参考。

一、ViewGroup的选择

       所有的View都需要放在ViewGroup里面的显示。有的时候相同的布局LinearLayout、RelativeLayout，FrameLayout，TableLayout，AbsoluteLayout里面的某几种能实现。这个时候咱们应该选用那个ViewGroup呢。

       ViewGroup的选择有下面几点

       RelativeLayout会让子View调用两次onMeasure，LinearLayout一般会调用子View一次onMeasure，但是在有weight的时候，也会调用子View两次onMeasure。

       下面我们通过Hierarchy Viewer工具来对比下实现相同的布局，LinearLayout和RelativeLayout 测量耗时的对比。我们用LinearLayout和RelativeLayout来一个非常简单的布局上下两个button的布局。看下耗时的对比。

LinearLayout 实现布局


线性布局.png

RelativeLayout 实现布局


相对布局.png

       界面的显示时间，我们只需要关注Measure的时间(Layout和Draw时间相差不到我们认为是一样的)。相同的界面，哪个Measure时间端，性能就更好。实现相同的效果，Hierarchy Viewer显示LinearLayout Measure时间 0.019 ms<RelativeLayout Measure时间 0.026 ms。LinearLayout 性能更优。

二、include(布局重用)

       使用include标签，将另一个xml文件引入，作为布局的一部分。include的最大的作用是便于布局重用(比如我们所有的界面的标题栏都是一样的)。我们举一个简单的例子来说明。

我们先写一个layout_title.xml的xml文件用来做所有界面统一的标题。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:gravity="center"
        android:background="@color/colorPrimary"
        android:text="标题"
        android:textSize="18sp"
        android:textColor="@android:color/white"/>

</RelativeLayout>

Activity对应的布局文件

<?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="match_parent"
    android:orientation="vertical">

    <include
        layout="@layout/layout_title"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="就一个布局"
        android:textColor="@android:color/holo_red_dark"/>

</LinearLayout>

三、merge

       merge标签主要用于删除多余的层级避免嵌套过多无用的布局，减少布局的深度。

       用一个非常简单的布局来说明merge标签的使用。就在界面上显示一个TextView。

        这里我们用Layout Inspector工具来替换Hierarchy Viewer 来查看页面布局的层级结构。Layout Inspector工具是Android Studio 替代 Hierarchy Viewer 的新方案

ViewGroup是FrameLayout，然后再里面放TextView

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="就一个布局"
        android:textColor="@android:color/holo_red_dark"/>

</FrameLayout>
不使用merge的层级结构.png

merge标签，然后再里面放TextView

<?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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="就一个布局"
        android:textColor="@android:color/holo_red_dark"/>

</merge>
使用merge的层级结构.png

       前后对比，发现使用merge的时候层级确实少了一层(少了FrameLayout)。

3.1、merge使用场景

3.1.1、Activity layout文件的根视图是FrameLayout的时候

       因为我们在Activity中setContentView()的content对应的就是一个FrameLayout。所以当我们布局文件的根视图也是FrameLayout的时候完全可以使用merge标签来减少一层FrameLayout结构。

3.1.2、merge标签配合自定义组合布局ViewGroup的使用

       自定义组合控件ViewGroup的时候，可以使用merge来减少一层ViewGroup。比如自定义继承LinearLayout的组合控件，建议让自定义View的layout布局文件根节点设置成merge。

3.1.3、merge标签配合include标签使用

       include标签使用的时候要注意merge标签的使用。可能某些情况下merge标签可以派上用场。接下来我们来改造一下文章前面include标签的实例。layout_title.xml文件我们完全可以使用merge标签来减少RelativeLayout的层级。

<?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="wrap_content">

    <TextView
        android:id="@+id/text_title"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:gravity="center"
        android:background="@color/colorPrimary"
        android:text="标题"
        android:textSize="18sp"
        android:textColor="@android:color/white"/>

</merge>

并不是说include标签使用的时候都可以用merge标签来优化布局哦。也是要根据实际情况来确定的。

3.2、merge使用的时候有几点是要特别注意的

四、ViewStub

       ViewStub使用延迟加载的方式，避免资源的浪费，减少渲染时间，在需要的时候才加载View。即使将其放置于布局文件中，如果没有进行加载那就为空，不像其它控件一样只要布局文件中声明就会存在。比如有这么个情况，网络请求的界面网络成功显示内容信息，网络请求失败显示失败的界面。试想一下，如果网络状况良好，并不需要加载失败页面。这个时候使用ViewStub是一个非常好的选择。

       ViewStub新增的属性

       ViewStub使用的时候我们一般使用inflate()或者setVisibility(View.VISIBLE)使ViewStub可见。但是咱们还得注意，当setVisibility(int)或inflate()方法被调用之后，这个ViewStub在布局中将被使用指定的View(android:layout内容)替换。而且inflate过一遍的ViewStub，如果被隐藏之后再次想要显示，将不能使用inflate()方法，但是可以再次使用setVisibility(int)方法设置为可见。

       用一个简单的实例俩说明下ViewStub的使用。简单的实现点击"显示空数据"按钮，就会显示ViewStub对应的布局。

activity_text.xml Activity布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    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:onClick="showEmpty"
        android:text="显示空数据" />

    <ViewStub
        android:id="@+id/view_stub_empty"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/view_stub" />

</LinearLayout>

view_stub_empty.xml ViewStub内容文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/hello_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="数据为空!" />
</FrameLayout>

Activity

public class TextActivity extends AppCompatActivity {

    private ViewStub mViewStubEmpty;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text);
        mViewStubEmpty = findViewById(R.id.view_stub_empty);
    }

    public void showEmpty(View view) {
        mViewStubEmpty.inflate();
    }
}

ViewStub inflate()函数只能调用一次，重复调用会导致异常，这是因为ViewStub只要加载过一次，其自身就会被移除，把并自身所包含的内容全部传给父布局。

ViewStub所替代的layout文件中不能使用merge标签。

以上就是对布局优化做了一个比较简单的总结。

上一篇 下一篇

猜你喜欢

热点阅读