Android性能优化之布局优化

野性酷女 2022-05-22 07:59 401阅读 0赞

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

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

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

# 一、ViewGroup的选择 #

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

ViewGroup的选择有下面几点  
\- 同样的布局，层级深度小的一般优于层级深度高的。(当然这也不是绝对的)

*  同样的布局，在不影响层级深度的情况下，使用LinearLayout和FrameLayout而不是RelativeLayout。(RelativeLayout会让子View调用两次onMeasure，LinearLayout一般会调用子View一次onMeasure，但是在有weight的时候，也会调用子View两次onMeasure)
 *  RelativeLayout子View尽量使用padding代替margin。

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

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

> LinearLayout 实现布局  
> ![线性布局][70]
> 
> RelativeLayout 实现布局  
> ![相对布局][70 1]

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

# 二、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的层级结构][merge]

> 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的层级结构][merge 1]

前后对比，发现使用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使用的时候有几点是要特别注意的 ##

*  merge必须放在布局文件的根节点上。
 *  merge并不是一个ViewGroup，也不是一个View，它相当于声明了一些视图，等待被添加。
 *  merge标签被添加到A容器下，那么merge下的所有视图将被添加到A容器下。
 *  因为merge不是View，所以对merge标签设置的所有属性都是无效的。

# 四、ViewStub #

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

ViewStub新增的属性

*  android:layout：设置ViewStub被inflate的布局控件。ViewStub的内容布局。
 *  android:inflateId：重写ViewStub的父布局控件的Id。

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标签。

--------------------

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

[70]: /images/20220522/23f94769536348b8b93822991a757484.png
[70 1]: /images/20220522/43a8dda5a2de4ec4b32170ed0cf271df.png
[merge]: /images/20220522/d7886a3243c341b7806eced440e096aa.png
[merge 1]: /images/20220522/c15992a2c5dc4c6d99eb398942acbaf1.png