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

news2024/11/17 11:23:19

引言

1.重要性

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

2.布局对性能的影响

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

布局性能的基本概念

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

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

优化布局文件

使用ConstraintLayout的优势

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


已经到底啦!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2184622.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue 路由设置

为了防止遗忘&#xff0c;记录一下用Vue写前端配置路由时的过程&#xff0c;方便后续再需要用到时回忆。 一、举个例子 假如需要实现这样的界面逻辑&#xff1a; 在HomePage中有一组选项卡按钮用于导航到子页面&#xff0c;而子页面Page1中有一个按钮&#xff0c;其响应事件是…

vulnhub-Replay 1靶机

vulnhub&#xff1a;https://www.vulnhub.com/entry/replay-1,278/ 导入靶机&#xff0c;放在kali同网段&#xff0c;扫描 靶机在192.168.81.8&#xff0c;扫描端口 开启了三个端口&#xff0c;存在网站服务&#xff0c;访问 网页上有个超链接&#xff0c;点击后下载了这样一个…

嵌入式外设应用(代码)

文章目录 1. 工业自动化2. 智能家居设备3. 汽车电子4. 生命体征监测仪5. 物联网应用嵌入式外设应用广泛,有很多应用领域: 1. 工业自动化 应用场景:使用传感器监测设备状态,控制电机的启动和停止。 示例代码: #include <stdio.h> #include <stdbool.h>// 模…

农业机械检测系统源码分享

农业机械检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

spring-boot 整合 mybatis

文章目录 Spring boot 整合Mybatis将数据返回到浏览器1. 准备数据2. 导入依赖3. 配置数据库连接4. 创建一个 pojo 包&#xff0c;创建User实体类5. 创建一个mapper包&#xff0c;写一个UserMapper接口6. 创建一个service包&#xff0c;写一个UserService接口。7. 在 Service 包…

如何对大模型的回答置信度做出判断

大模型的回答置信度&#xff0c;特别是像 GPT 模型这类基于生成式预训练模型的系统&#xff0c;是一个高度复杂的概念。置信度&#xff08;confidence&#xff09;通常指模型在给定输出上有多大的确定性&#xff0c;反映的是模型对其生成的答案有多“确信”。这种置信度既可以被…

【STM32-HAL库】自发电型风速传感器(使用STM32F407ZGT6)(附带工程下载链接)

一、自发电型风速传感器介绍 自发电型风速传感器&#xff0c;也称为风力发电型风速传感器或无源风速传感器&#xff0c;是一种不需要外部电源即可工作的风速测量设备。这种传感器通常利用风力来驱动内部的发电机构&#xff0c;从而产生电能来供电测量风速的传感器部分。以下是自…

从u盘直接删除的文件能找回吗 U盘文件误删除如何恢复

U盘上的文件被删除并不意味着它们立即消失。事实上&#xff0c;删除操作只是将文件从文件系统的目录中移除&#xff0c;并标记可用空间。这意味着在文件被覆盖之前&#xff0c;它们仍然存在于存储介质上。因此&#xff0c;只要文件没有被新的数据覆盖&#xff0c;我们就有机会恢…

一本应用《软件方法》的书《软件需求分析和设计实践指南》

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 昨天看到了韩雪燕、李楠等老师写的《软件需求分析和设计实践指南》&#xff0c;前言提到了我。特别说明的是&#xff0c;这个书我自己看到的&#xff0c;韩老师等之前也未和我提过--这…

电子采购招投标比价供应商在线询价定标审批管理系统(源码)

前言&#xff1a; 随着互联网和数字技术的不断发展&#xff0c;企业采购管理逐渐走向数字化和智能化。数字化采购平台作为企业采购管理的新模式&#xff0c;能够提高采购效率、降低采购成本、优化供应商合作效率&#xff0c;已成为企业实现效益提升的关键手段。系统获取在文末…

前端组件化开发

假设这个页面是vue开发的&#xff0c;如果一整个页面都是编写在一个vue文件里面&#xff0c;后期不好维护&#xff0c;会特别的庞大&#xff0c;那么如何这个时候需要进行组件化开发。组件化开发后必然会带来一个问题需要进行组件之间的通信。组要是父子组件之间通信&#xff0…

[Linux]从零开始的网站搭建教程

一、谁适合本次教程 学习Linux已经有一阵子了&#xff0c;相信大家对LInux都有一定的认识。本次教程会教大家如何在Linux中搭建一个自己的网站并且实现内网访问。这里我们会演示在Windows中和在Linux中如何搭建自己的网站。当然&#xff0c;如果你没有Linux的基础&#xff0c;这…

【一篇文章理解Java中多级缓存的设计与实现】

文章目录 一.什么是多级缓存&#xff1f;1.本地缓存2.远程缓存3.缓存层级4.加载策略 二.适合/不适合的业务场景1.适合的业务场景2.不适合的业务场景 三.Redis与Caffine的对比1. 序列化2. 进程关系 四.各本地缓存性能测试对比报告(官方)五.本地缓存Caffine如何使用1. 引入maven依…

陶瓷4D打印有挑战,水凝胶助力新突破,复杂结构轻松造

大家好&#xff01;今天要和大家聊聊一项超酷的技术突破——《Direct 4D printing of ceramics driven by hydrogel dehydration》发表于《Nature Communications》。我们都知道4D打印很神奇&#xff0c;能让物体随环境变化而改变形状。但陶瓷因为太脆太硬&#xff0c;4D打印一…

java中创建不可变集合

一.应用场景 二.创建不可变集合的书写格式&#xff08;List&#xff0c;Set&#xff0c;Map) List集合 package com.njau.d9_immutable;import java.util.Iterator; import java.util.List;/*** 创建不可变集合:List.of()方法* "张三","李四","王五…

鸿蒙开发选择表情

鸿蒙开发选择表情 动态评论和聊天信息都需要用到表情&#xff0c;鸿蒙是没有提供的&#xff0c;得自己做 一、思路&#xff1a; 用表情字符显示表情&#xff0c;类似0x1F600代表笑脸 二、效果图&#xff1a; 三、关键代码&#xff1a; // 联系&#xff1a;893151960 Colum…

蓝桥杯【物联网】零基础到国奖之路:十五. 扩展模块之双路ADC

蓝桥杯【物联网】零基础到国奖之路:十五. 扩展模块之双路ADC 第一节 硬件解读第二节 CubeMX配置第三节 代码编写 第一节 硬件解读 STM32的ADC是12位&#xff0c;通过硬件过采样扩展到16位&#xff0c;模数转换器嵌入到STM32L071xx器件中。有16个外部通道和2个内部通道&#xf…

PDF阅读器工具集萃:满足你的多样需求

现在阅读书籍大部分都喜欢电子书的形式了吧&#xff0c;因为小小的一个设备就能存下上万本书。从流传程度来说PDF无疑是一个使用最广的格式。除了福昕PDF阅读器阅读之外还有哪些好用的阅读工具呢/&#xff1f;今天我们一起来探讨一下吧。 1.福昕阅读器 链接一下>>www.f…

css3-----2D转换、动画

2D 转换&#xff08;transform&#xff09; 转换&#xff08;transform&#xff09;是CSS3中具有颠覆性的特征之一&#xff0c;可以实现元素的位移、旋转、缩放等效果 移动&#xff1a;translate旋转&#xff1a;rotate缩放&#xff1a;scale 二维坐标系 2D 转换之移动 trans…

SysML案例-清朝、火星人入侵地球

DDD领域驱动设计批评文集>> 《软件方法》强化自测题集>> 《软件方法》各章合集>> 以下图形摘自Jon Holt和Simon Perry的SysML for Systems Engineering。 案例素材来自H. G. Wells在1898年&#xff08;没错&#xff0c;清朝&#xff09;出版的The War of…