不合理的布局会使我们应用程序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 实现布局
线性布局.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使用的时候有几点是要特别注意的
- 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标签。
以上就是对布局优化做了一个比较简单的总结。
网友评论