【Android】布局优化—include，merge，ViewStub的使用方法

已于 2024-09-29 16:51:54 修改
阅读量1.1k 收藏 28
点赞数 13
文章标签： android
于 2024-09-27 20:56:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79977698/article/details/142602271
版权

引言

1.重要性

在Android应用开发中，布局是用户界面的基础。一个高效的布局不仅能提升用户体验，还能显著改善应用的性能。随着应用功能的复杂性增加，布局的优化变得尤为重要。优化布局能够减少渲染时间，提高响应速度，从而让用户获得更流畅的体验。

2.布局对性能的影响

布局直接影响应用的启动时间和运行时性能。嵌套过深的布局会导致测量和绘制的开销增加，进而引发界面卡顿或不流畅的问题。此外，复杂的布局会消耗更多的内存，可能导致应用崩溃。通过合理的布局设计，可以降低CPU和GPU的负担，提升整体应用的运行效率。

布局性能的基本概念

布局性能是指在Android应用中，布局系统处理视图（View）和视图组（ViewGroup）的效率。它主要涉及以下几个方面：

  1. 测量性能：
    • 指计算视图大小所需的时间和资源。高效的测量可以减少布局过程中CPU的占用。
  2. 布局性能：
    • 这是指在视图层级中定位和排列视图所需的时间。层级过深或过于复杂的布局会导致性能下降。
  3. 渲染性能：
    • 涉及将布局绘制到屏幕上所需的时间和资源。有效的渲染能够确保界面快速响应用户操作。
  4. 内存使用：
    • 低内存使用意味着更少的GC（垃圾回收），从而减少卡顿和延迟。布局性能应关注内存的合理分配和使用。

优化布局文件

使用ConstraintLayout的优势

  1. 约束系统（Constraint System）：
    • ConstraintLayout 提供了一套完整的约束系统，可以通过相对定位、边距、比例、链等特性来定义子视图之间的关系。这样一来，不同视图之间可以在同一层级内相互依赖，避免了层层嵌套的问题。
  2. 灵活的相对定位：
    • 使用传统布局（如LinearLayout、RelativeLayout）时，通常需要多个嵌套来满足复杂的布局需求。例如，一个水平和垂直居中的布局需要嵌套两个 LinearLayout 或者 RelativeLayout。而在 ConstraintLayout 中，只需要设置 layout_constraint 属性，即可将视图居中显示。
  3. 减少布局重绘和测量次数：
    • 每增加一个层级的嵌套都会增加布局的测量和绘制时间。而 ConstraintLayout 将大部分的布局逻辑集中在一个 ConstraintLayout 中进行处理，减少了层级数量，从而提升了性能。
  4. 替代多种传统布局：
    • ConstraintLayout 可以同时替代 RelativeLayout、LinearLayout、FrameLayout 等多种布局。对于一些复杂的布局需求，只需要一个 ConstraintLayout 就能完成，无需再嵌套使用其他布局容器。
  5. 链式布局（Chains）：
    • ConstraintLayout 支持链式布局，可以将多个视图通过链条的形式连接在一起，根据指定的分布方式（如均匀分布、权重分布等）来排列视图。这种方式不仅减少了嵌套层级，还能更加灵活地管理视图的排列。
  6. Guideline 和 Barrier：
    • ConstraintLayout 还提供了 Guideline 和 Barrier 等辅助控件，帮助开发者在同一层级内实现复杂的布局逻辑。例如，通过 Guideline 可以在布局中定义固定的比例参考线，方便其他视图的对齐和排列；Barrier 则可以动态地将多个视图的边界作为参考点，灵活适应视图的变化。

ConstraintLayout的使用可以参考以下博客：【Android】ConstrainLayout约束布局基本操作_android studio的constrain layout可以删除吗-CSDN博客

include使用

<include>标签可以允许在一个布局当中引入另外一个布局，那么比如说我们程序的所有界面都有一个公共的部分，这个时候最好的做法就是将这个公共的部分提取到一个独立的布局文件当中，然后在每个界面的布局文件当中来引用这个公共的布局。

下面举一个简单的例子：

我们应该都知道，目前几乎所有的软件都会有一个头布局，头布局中可以包含界面的标题、返回按钮、以及其它一些操作功能。有些软件是使用ActionBar来实现的，但是由于ActionBar的灵活性不太好，因而也有很多软件会选择自己去编写实现。因为应用中几乎所有界面都要用头布局，所以这种情况下使用<include>标签就非常合适了。

我们创建title_bar.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="match_parent" >

    <Button
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Back" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Title"
        android:textSize="20sp" />

    <Button
        android:id="@+id/done"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="Done" />

</RelativeLayout>

title_bar.xml中的布局非常简单，外层是一个RelativeLayout，里面只有两个Button和一个TextView，左边的Button用于实现返回功能，右边的Button用于实现完成功能，中间的TextView则可以用于显示当前界面的标题。

image-20240927175426436

在其他布局进行使用的时候直接用include就可以了：

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

这样我们在修改title_bar中内容的时候就不用一个页面一个页面去修改了，直接修改文件里的就可以了。

但是我们会发现，引入title_bar后我们原本布局中的内容全不见了，原因是因为titlebar的最外层布局是一个宽高都是match_parent的RelativeLayout，它会将整个布局都填充满，因而我们原本的布局也就看不见了。我们可以将RelativeLayout的layout_height属性修改成wrap_content：

<include layout="@layout/title_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

除了layout_height之外，我们还可以覆写titlebar中的任何一个layout属性，如layout_gravity、layout_margin等，而非layout属性则无法在<include>标签当中进行覆写。但是在覆写的时候必须要将layout_width和layout_height这两个属性也进行覆写，否则覆写效果将不会生效。

merge使用

<merge>标签是作为<include>标签的一种辅助扩展来使用的，它的主要作用是为了防止在引用布局文件时产生多余的布局嵌套。

在上面我们讲解<include>标签的用法时主要介绍了它优点，但是它也存在着一个不好的地方，就是可能会导致产生多余的布局嵌套。

新建ok_cancel_layout.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="wrap_content"
    android:orientation="vertical" >

    <Button
        android:id="@+id/ok"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:text="OK" />

    <Button
        android:id="@+id/cancel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:text="Cancel" />

</LinearLayout>

定义了两个按钮。

当activity_main中需要输入些东西，引用上面两个按钮的时候，可以使用include引用：

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <include layout="@layout/title_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


    <EditText
        android:id="@+id/edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:hint="Edit something here" />

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

</LinearLayout>

运行效果如下：

image-20240927194655175

但是，此时这个界面中已经存在着多余嵌套了：

在这里插入图片描述

最外层首先是一个FrameLayout

在setContentView()方法中，Android会自动在布局文件的最外层再嵌套一个FrameLayout。

具体原因可以参考博客：Android LayoutInflater原理分析，带你一步步深入了解View(一)_android layoutinflater原理分析,带你一步步深入了解view(一)-CSDN博客

然后FrameLayout中包含的是一个LinearLayout，在最外层的LinearLayout当中包含了两个元素，一个是EditText，另一个又是一个LinearLayout，然后在这个内部的LinearLayout当中才包含了确定和取消这两个按钮。

我们此时就可以用merge来优化布局。修改ok_cancel_layout.xml中的代码：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
 
    <Button
        android:id="@+id/ok"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:text="OK" />
 
    <Button
        android:id="@+id/cancel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:text="Cancel" />
 
</merge>

这里我们将ok_cancel_layout最外层的LinearLayout布局删除掉，换用了<merge>标签，这就表示当有任何一个地方去include这个布局时，会将<merge>标签内包含的内容直接填充到include的位置，不会添加任何额外的布局结构。

当前的View结构就变成了：

在这里插入图片描述

现在EditText和两个按钮都直接包含在了LinearLayout下面，去掉了多余的嵌套。

ViewStub使用

有的时候我们会遇到这样的场景，就是某个布局当中的元素非常多，但并不是所有元素都一起显示出来的，而是普通情况下只显示部分常用的元素，而那些不常用的元素只有在用户进行特定操作的情况下才会显示出来。

虽然设置其它元素可见不可见也可以实现该操作，但是相应的元素还是会进行加载。那么我们如何才能让这些不常用的元素仅在需要时才去加载呢？Android为此提供了一种非常轻量级的控件，ViewStub。ViewStub虽说也是View的一种，但是它没有大小，没有绘制功能，也不参与布局，资源消耗非常低，将它放置在布局当中基本可以认为是完全不会影响性能的。

我们新建profile_extra.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" >

    <EditText
        android:id="@+id/edit_extra1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:hint="Extra field 1" />

    <EditText
        android:id="@+id/edit_extra2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:hint="Extra field 2" />

    <EditText
        android:id="@+id/edit_extra3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:hint="Extra field 3" />

</LinearLayout>

现在定义了三个EditText当作不常用控件。

修改activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <include layout="@layout/title_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


    <EditText
        android:id="@+id/edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:hint="Edit something here" />

    <Button
        android:id="@+id/more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="10dp"
        android:text="More" />

    <ViewStub
        android:id="@+id/view_stub"
        android:layout="@layout/profile_extra"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    
    <include layout="@layout/ok_cancel_layout"/>

</LinearLayout>

我们新增了一个More Button用来加载不常用元素，后在Button的下面定义了一个ViewStub。通过layout属性将profile_extra布局传入进来，。

下来在MainActivity里添加点击事件：

public class MainActivity extends AppCompatActivity {


    private EditText editExtra1;
    private EditText editExtra2;
    private EditText editExtra3;

    private Button moreButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });


        moreButton = (Button) findViewById(R.id.more);

        moreButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ViewStub viewStub = (ViewStub) findViewById(R.id.view_stub);
                if (viewStub != null) {
                    View inflatedView = viewStub.inflate();
                    editExtra1 = (EditText) inflatedView.findViewById(R.id.edit_extra1);
                    editExtra2 = (EditText) inflatedView.findViewById(R.id.edit_extra2);
                    editExtra3 = (EditText) inflatedView.findViewById(R.id.edit_extra3);
                }
            }
        });
    }
}

ViewStub 在布局加载时并不会立即把其内容添加到视图层次结构中，它只占用极少的内存（占位）。当你调用 inflate() 方法时，ViewStub 才会将其引用的布局资源加载到内存中，并将其转换为一个普通的 View（即 ViewGroup 或其他控件）。

当点击More Button之后我们首先会调用findViewById()方法将ViewStub的实例获取到，调用inflate()方法或者setVisibility(View.VISIBLE)都可以将隐藏的布局给加载出来，而加载的这个布局就是刚才在XML当中配置的profile_extra布局。

效果如下：

点击前：

image-20240927204637008

点击后：

image-20240927204701979

小结

本篇博客主要分享了对于布局的优化方面的知识，并讲解了include，merge，ViewStub的使用方法，希望对大家有所帮助。

参考：Android最佳性能实践(四)——布局优化技巧_android 在代码里生成布局性能-CSDN博客

已经到底啦！！

xiaoduyyy
关注
优化布局几点建议
...
09-23 911
使用复杂的图片：在LineraLayout布局中包含一个ImageView和一个TextView，可以使用一个复杂的drawable代替，性能会更好。 合并根框架：假如一个FrameLayout作为一个布局的根视图，不提供背景或者填充，它可以被一个带有标志的布局代替。 无用的树叶：对于一个扁平结构中一个布局没有孩子，没有背景，可以被删掉。 无用的父类：一个布局不是ScrollView或者不是
优化 布局层次结构
wikiday的专栏
05-20 1764
原文链接： Optimizing Layout Hierarchies 优化布局层次结构 这是一个普遍的误解，使用基本的布局架构会产生高效的布局性能。然而，每一个你添加到应用的控件和布局都需要初始化，放置和绘制。比如，使用一个内嵌的LinearLayout会导致过深的布局层次结构。另外，使用layout_weight属性的内嵌多个LinearLayout实例会花费更大的代价，因此
布局优化
hebaoqiang2015的博客
05-17 1377
目录介绍 01.常见布局优化方法 02.使用include标签 03.ViewStub深度解析 04.视图层级<merge/> 05.其他一些小建议 01.常见布局优化方法 布局优化的核心就是尽量减少布局文件的层级，常见的方式有： 多嵌套情况下可使用RelativeLayout减少嵌套。 布局层级相同的情况下使用LinearLayout，它比RelativeLayout更高效。 使用<i.
Android布局优化-include、merge以及ViewStub使用
XuZhenhao
03-21 672
merge 标签可以用来减少 View 层级，由于一般需要复用的 xml 都比较复杂因此极少存在需要使用的场景，目前主要是配合 include 标签，或者在自定义 View 时候，比如继承了某个 ViewGroup 的场景下使用 merge 标签减少自定义控件的层级。merge 标签不是View，所以被 merge 标签包裹的 view 无法使用 ViewGroup 的属性实现对应的布局效果，Google 提供了 parentTag 标签来解决这个问题。定义ViewStub。调用ViewStub。
Android布局技巧之include、merge与ViewStub标签的巧用
08-27
总结，`include`、`merge`和`ViewStub`是Android布局管理的利器，它们能帮助开发者更有效地组织和优化布局，提高应用性能。理解并合理使用这些标签，可以使UI代码更加整洁，同时减少性能瓶颈。在实际开发中，结合...
Android抽象布局——include、merge 、ViewStub详解
01-05
在布局优化中，Androi的官方提到了这三种布局<include>、<merge>、<ViewStub>，并介绍了这三种布局各有的优势，下面也是简单说一下他们的优势，以及怎么使用，记下来权当做笔记。 1、布局重用<include> <include>...
Android开发之merge结合include优化布局
01-05
merge结合include优化android布局，效果不知道，个人感觉使用上也有很大的局限，不过还是了解一下，记录下来。 布局文件都要有根节点，但android中的布局嵌套过多会造成性能问题，于是在使用include嵌套的时候我们...
Android开发知识（二十六）强大的约束布局 - ConstraintLayout的用法总结
lc_miao的专栏
07-23 8858
文章目录前言用法相对定位语句解释运用举例边距（Margin）语句解释bias与居中处理语句解释圆弧定位语句解释举例运行View的尺寸大小语句解释View的尺寸比例语句解释View的最大最小尺寸语句View链语句解释辅助布局GuideLineGroupPlaceholderBarrier结束语 前言   在ConstraintLayout出现之前，我们编写布局往往少不了多层嵌套，很多效果需要结合Re...
ConstraintLayout遇到的坑
最新发布
english2888的博客
06-11 925
从头看了一遍，大致意思懂了，还是没有找到答案。写demo，把变量一个一个去掉，代码一行一行比对，发现了当我把paddingStart和paddingEnd全部改成对应的paddingLeft和paddingRight时，可以正常显示了，终于找到了元凶，这一刻内心的喜悦溢于言表，不枉我周末花的大半天时间。为了降低app的卡顿率，项目做了一次优化，将首页的的滑动控件viewPager改成了viewPager2，前者是一次性加载所有的布局文件，后者只会加载目标页面的布局文件，减少了计算和绘制的时间。
ConstraintLayout——约束性布局学习
热门推荐
自由奔跑的风
07-27 1万+
ConstraintLayout简介 Constraint Layout是Google在2016年的Google I/O大会上提出的一个可以灵活控制子控件的位置和大小的新布局。并且其号称可以实现布局最大程度的扁平化。 ConstraintLayout优点 我们知道项目中的布局嵌套问题对我们的项目性能有着不小的威胁。布局能实现扁平化的话会让软件性能得到很大的提升。所以我们在开发过程中都会尽...
Android 布局优化之＜include/＞＜merge/＞和 ＜ViewStub＞
xujian197的博客
04-15 266
通过标记重复使用布局 在Android开发中,通常需要重复使用特殊布局的大型组件,比如标题栏. 创建一个可重复使用的布局 include_toolbar.xml 包含一个Toolbar,Toolbar里面包含了一个TextView <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
Android之ConstraintLayout用法全面解析
qq_15327675的博客
11-11 3237
在Android开发中我们在写布局时候经常会使用到布局的嵌套,比如常见的Android布局FrameLayout LinearLayout RelativeLayout等布局的相互嵌套,而且在写xml布局时候对布局可视化的操作不是很到位(很鸡肋) 而ConstarintLayout的出现就能够有效的解决以上的两个痛点,即:   1.布局嵌套过多的问题  2.布局可视化支持不够哟好的问题 ...
android xml 引用bitmap_Android自定义View引用xml布局文件及merge的使用
weixin_39874196的博客
11-25 227
有时候为了提高布局文件的复用性，可以将一个xml布局文件封装成自定义View,以方便调用。例如:一个ConstraintLayout的布局文件，可以自定义一个View继承ConstraintLayout。如下面的代码所示:public 引用xml布局文件关键代码:View view = inflate(context, R.layout.item_start_top, this);这个xml文件的...
性能优化之布局优化(ConstraintLayout)
wenyingzhi的博客
06-06 1771
遇到的问题面试的时候,面试官总问我做过性能优化吗?我这种低级程序员当然会说一些基本的防止给自己的挖坑,例如布局优化啊,减少覆盖渲染呀啥的,我经常说不要包裹过多的布局,因为在xml生成view对象的也是需要解析xml解析效率降低,渲染view的层级过多都会导致性能降低,都是屁话,总之就是降低xml布局的层级关系,怎么降低呢?今天我学习了下ConstraintLayout,发现他很强大,他几乎可以包裹...
布局优化的几种方法
jyDave的博客
01-27 2512
布局优化的三种方法
Constraint Layout 1.1.x带来了哪些新东西？
songguanxin的博客
07-27 465
  泡在网上的日子 / 文 发表于2017-10-19 15:54 第10115次阅读 ConstraintLayout,转载作者原文地址http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/1019/8618.html 编辑推荐：稀土掘金，这是一个针对技术开发者的一个应用，你可以在掘金上获取最新最优质的技术干货，不仅仅是Andr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值