Android布局优化-merge, viewStub, include总结

最新推荐文章于 2024-05-07 10:30:17 发布

龙腾腾

最新推荐文章于 2024-05-07 10:30:17 发布

阅读量236

点赞数

分类专栏：性能优化文章标签： android

原文链接：https://www.jianshu.com/p/48a2fbf75954

版权

性能优化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原文链接：https://www.jianshu.com/p/a4eee43aa60e
https://www.jianshu.com/p/48a2fbf75954

一、 ViewStub标签的使用姿势

步骤一：定义需要懒加载的布局 test.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="match_parent"
android:orientation="vertical">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#36e7ea"
        android:gravity="center"
        android:textSize="18sp" />
        
</LinearLayout>

步骤二：使用ViewStub引入要懒加载的布局

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

    <Button            //点击按钮时才加载下面的ViewStub布局
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="加载ViewStub" />

    <ViewStub  //这个布局现在还不会被添加到布局树中
        android:id="@+id/view_stub"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/test" />  //这里指定要加载的布局名字
        
</LinearLayout>

步骤三：使用代码按需加载上面的ViewStub布局
这里是点击按钮的时候添加：

Button button = (Button) findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            View view = ((ViewStub)findViewById(R.id.view_stub)).inflate();  //加载出来用view接收
            TextView tv = (TextView) view.findViewById(R.id.text_view); //然后可以用view访问它的子控件
            tv.setText("ViewStub的使用");
    }
});

效果：
点击按钮前：
在这里插入图片描述
点击按钮后，出现了需要临时加载的布局：

ViewStub使用注意点

1、ViewStub对象只可以Inflate一次，之后ViewStub对象会被置为空。
所以，inflate一个ViewStub对象之后，就不能再inflate它了，否则会报错：ViewStub must have a non-null ViewGroup viewParent。

在这里插入图片描述 2、ViewStub不支持merge标签，意味着你不能引入包含merge标签的布局到ViewStub中。
否则会报错：android.view.InflateException: Binary XML file line #1: can be used only with a valid ViewGroup root and attachToRoot=true
3、虽然ViewStub是不占用任何空间的，但是每个布局都必须要指定layout_width和layout_height属性，否则运行就会报错。

二、include

include便于对相同视图内容进行统一的控制管理，提高布局重用性，以标题栏为例,我们先定义一个通用的标题栏，相关代码如下：

commont_title

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_commontitle_root"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="#0951C1">

    <TextView
        android:id="@+id/tv_back_commontitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:drawableLeft="@mipmap/back"
        android:drawablePadding="3dp"
        android:gravity="center_vertical"
        android:layout_centerVertical="true"
        android:minHeight="50dp"
        android:text="返回"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tv_title_commontitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="标题"
        android:textSize="18sp" />

</RelativeLayout>

然后在我们的MainActivity页面引入，我们的MainActivity页面有一个加载视图的按钮

<RelativeLayout
    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=".MainActivity">

    <include
        android:id="@+id/iclude_main"
        layout="@layout/common_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
   />

    <Button
        android:id="@+id/btn_main_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="加载视图"/>

</RelativeLayout>

效果如下：
在这里插入图片描述
那我们如果想设置标题怎么办？当然是findviewbyid()然后set了，如下：

 RelativeLayout relativeLayout = findViewById(R.id.ll_commontitle_root);
TextView titleTv =  relativeLayout.findViewById(R.id.tv_title_commontitle);
titleTv.setText("主界面");

运行，我擦，报错了。

Caused by: java.lang.NullPointerException: Attempt to invoke virtual method ‘android.view.View android.widget.RelativeLayout.findViewById(int)’ on a null object reference

at com.hxzk.layoutoptimizeproject.MainActivity.onCreate(MainActivity.java:17)

不能找到这个id，获取的RelativeLayout对象为null,这是为何？原来：如果给include设置了id,就会覆盖掉引用布局根布局的id，所以解决办法用两种：

第一种直接获取include的id，进行findviewByid()
第二种将两者的id取名一致

我们选取第一种，结果如下：

在这里插入图片描述

三.merge

merge标签是作为include标签的一种辅助扩展来使用的，也就是需要和include一起使用，它的主要作用是为了防止在引用布局文件时产生多余的布局嵌套。我们先看看我们现在的视图层级(通过android studio自带的Layout inspector)：

在这里插入图片描述将include中的布局改为merge，注意：merge必须放在布局文件的根节点上。这里做一个说明如果将RelativeLayout改为merge，Releative中所有的属性将都无法使用，因为merge不是一个view,merge extends Activity,所以我们直接删除相关属性：

<merge
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/tv_back_commontitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:drawableLeft="@mipmap/back"
        android:gravity="center"
        android:text="返回"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/tv_title_commontitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="标题"
        android:textSize="18sp" />

</merge>

activity_main.xml中：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl_main_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

    <Button
        android:id="@+id/btn_main_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="加载视图"/>

</RelativeLayout>

MainActivity中（第一种写法）：

  TextView titleTv =  findViewById(R.id.tv_title_commontitle);
        titleTv.setText("主界面");

其实还有一种写法是不在xml中通过include引入，而是通过代码直接引入merge：
我们给activity_main.xml的根Relative设置id为 android:id="@+id/rl_main_root"，在通过LayoutInflate.inflate方法渲染的时候，第二个参数必须指定一个父容器，且第三个参数必须为true，也就是必须为merge下的视图指定一个父亲节

   RelativeLayout parentRl = findViewById(R.id.rl_main_root);
    LayoutInflater.from(this).inflate(R.layout.common_title,parentRl,true);
    TextView titleTv =  findViewById(R.id.tv_title_commontitle);
    titleTv.setText("主界面");

结果：
在这里插入图片描述
运行后再查看一下视图层级:

merge的使用，相当于直接将原RelativeLayout中的控件搬运到了父RelativeLayout中，所以merge所包含的控件之前的位置属性啥的要做响应的调整，对于父RelativeLayout。

merge的优缺点

通过上面的代码及效果我们可以明显的看的优缺点。
merge的优点

减少了层级的嵌套，提高了渲染的效率。

merge的缺点

缺点也是比较明显：

由于merge不是view.原ViewGroup的属性都失效(对merge标签设置的所有属性都是无效的),也就是背景色啥的都不能正常显示。

龙腾腾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android布局优化-merge, viewStub, include总结

原文链接：https://www.jianshu.com/p/a4eee43aa60ehttps://www.jianshu.com/p/48a2fbf75954一、 ViewStub标签的使用姿势步骤一：定义需要懒加载的布局 test.xml<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:l
复制链接

扫一扫

专栏目录