Android性能优化：布局优化实践|SquirrelNote

2019年6月7日 226次阅读 来源: 跳动的松鼠

系列文章：
Android性能优化|SquirrelNote
Android性能优化：布局优化实践|SquirrelNote
Android性能优化：图片的加载和图片缓存技术|SquirrelNote
Android照片墙应用实现|SquirrelNote

本篇详细描述布局优化的相关内容：

  1. <include />标签
  2. <merage />标签
  3. ViewStub

<include />标签重用layout代码

如果在一个项目中要用到相同的布局设计，可以通过<include /> 标签来重用layout代码

...
<include layout="@layout/titlebar"/>
...

代码分析：@layout/titlebar 指定了另外一个布局文件，好处是不用把titlebar这个布局文件的内容再重写一遍。<include>标签支持 android:id 这个属性外，只支持 android:layout_开头的属性，比如： android:layout_width、android:layout_height。注意：以<include>指定的属性为准。

<merage />标签减少视图层级结构

通过<merage />标签删减多余或者额外的层级，从而优化整个layout 结构。
示例如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.month11_testdemo.activity.MainActivity">

    <ImageView
        android:src="@drawable/logo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:text="标题"/>
</FrameLayout>

《Android性能优化：布局优化实践|SquirrelNote》 image.png

启动 tools> hierarchyviewer.bat工具查看当前UI结构视图：

《Android性能优化：布局优化实践|SquirrelNote》 image.png

我们可以很明显的看到由红色线框所包含的结构出现了两个framelayout节点，很明显这两个完全意义相同的节点造成了资源浪费（这里可以提醒大家在开发工程中可以习惯性的通过hierarchyViewer查看当前UI资源的分配情况），那么如何才能解决这种问题呢（就当前例子是如何去掉多余的frameLayout节点）？这时候就要用到<merge />标签来处理类似的问题了。我们将上边xml代码中的framLayout替换成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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.month11_testdemo.activity.MainActivity">

    <ImageView
        android:src="@drawable/logo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:text="标题"/>
</merge>

运行程序后在Emulator中显示的效果是一样的，可是通过hierarchyviewer查看的UI结构是有变化的，当初多余的FrameLayout节点被合并在一起了，或者可以理解为将merge标签中的子集直接加到Activity的FrameLayout跟节点下（这里需要提醒大家注意：所有的Activity视图的根节点都是frameLayout）。如果你所创建的Layout并不是用framLayout作为根节点（而是应用LinerLayout等定义root标签），就不能应用上边的例子通过merge来优化UI结构。

《Android性能优化：布局优化实践|SquirrelNote》 image.png

<merge />标签还有一种用法：
当应用Include或者ViewStub标签从外部导入xml结构时，可以将被导入的xml用merge作为根节点表示，这样当被嵌入父级结构中后可以很好的将它所包含的子集融合到父级结构中，而不会出现冗余的节点。
另外有两点需要特别注意：
<merge />只可以作为xml layout的根节点。
当需要扩充的xml layout本身是由merge作为根节点的话，需要将被导入的xml layout置于 viewGroup中，同时需要设置attachToRoot为True。（更多说明请参见inflate()文档）

ViewStub

ViewStub继承了View,它是轻量级的并且宽和高都是0，因此它本身不参与任何的布局和绘制过程。
ViewStub的意义在于按需加载所需的布局文件。在实际开发中，有很多布局文件在正常情况下不会显示，比如网络异常时的界面，这个时候就没有必要在整个界面初始化的时候将其加载进来，通过ViewStub就可以做到在使用的时候再加载，这样提高了程序初始化的性能。
示例如下：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal">
    <ViewStub
        android:id="@+id/viewstub_demo_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:layout_marginRight="5dip"
        android:layout_marginTop="10dip"
        android:layout="@layout/viewstub_textlayout"/>
    <ViewStub
        android:id="@+id/viewstub_demo_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:layout_marginRight="5dip"
        android:layout="@layout/viewstub_imagelayout"/>
</LinearLayout>

viewstub_textlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:id="@+id/tv"
        android:text="文本"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

viewstub_imagelayout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView
        android:id="@+id/iv"
        android:src="@drawable/logo"
        android:layout_centerInParent="true"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

</RelativeLayout>

下面决定来显示哪一个，只需要找到相应的ViewStub然后调用其infalte()就可以获得相应想要的布局：
public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    if (false) {//这里条件判断
        // 显示文字
        ViewStub stub = (ViewStub) findViewById(R.id.viewstub_demo_text);
        stub.inflate();
        TextView text = (TextView) findViewById(R.id.tv);
        text.setText("我是文字");
    } else {
        //显示图片
        ViewStub stub = (ViewStub) findViewById(R.id.viewstub_demo_image);
        stub.inflate();
        ImageView image = (ImageView) findViewById(R.id.iv);
        image.setImageResource(R.drawable.logo);
    }
}

}

如上代码，可以按需显示自己需要加载的布局。

在需要加载ViewStub中的布局时，可以按照下面两种方式进行：
((ViewStub) findViewById(R.id.viewstub_demo_image)).setVisibility(View.VISIBLE);
or
View viewStub=((ViewStub) findViewById(R.id.viewstub_demo_image)).inflate();
当ViewStub通过setVisibility或者inflate方法加载后，ViewStub就会被它内部的布局替换掉，这时ViewStub就不再是整个布局结构中的一部分了。另外，目前ViewStub还不支持<merge>标签。

以上是根据我的一些理解，做的总结分享，旨在抛砖引玉，希望有更多的志同道合的朋友一起讨论学习，共同进步！

    原文作者：跳动的松鼠
    原文地址: https://www.jianshu.com/p/4ad78df34b76
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞