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

引言

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" ><Buttonandroid:id="@+id/back"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_centerVertical="true"android:text="Back" /><TextViewandroid:id="@+id/title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:text="Title"android:textSize="20sp" /><Buttonandroid: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" ><Buttonandroid:id="@+id/ok"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:text="OK" /><Buttonandroid: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"/>

运行效果如下：

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"><Buttonandroid:id="@+id/ok"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:text="OK" /><Buttonandroid: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" ><EditTextandroid: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" /><EditTextandroid: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" /><EditTextandroid: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"/><EditTextandroid: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" /><Buttonandroid: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" /><ViewStubandroid: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;@Overrideprotected 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() {@Overridepublic 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);}}});}
}

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

效果如下：

点击前：

image-20240927204637008

点击后：

image-20240927204701979

小结

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

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

已经到底啦！！

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JavaWeb纯小白笔记02：Tomcat的使用：发布项目的三种方式、配置虚拟主机、配置用户名和密码

JavaWeb纯小白笔记02：Tomcat的使用：发布项目的三种方式、配置虚拟主机、配置用户名和密码

通过Tomcat进行发布项目的目的是为了提供项目的访问能力&#xff1a;Tomcat作为Web服务器&#xff0c;能够处理HTTP请求和响应&#xff0c;将项目的内容提供给用户进行访问和使用。 一.Tomcat发布项目的三种方式&#xff1a; 第一种&#xff1a;直接在Tomcat文件夹里的webapp…
阅读更多...
K8s Calico替换为Cilium,以及安装Cilium过程(鲁莽版)

K8s Calico替换为Cilium,以及安装Cilium过程(鲁莽版)

迁移CNI插件的3种办法&#xff1a; 1、创建一个新的集群&#xff0c;通过Gitops的方式迁移负载&#xff0c;然而&#xff0c;这可能涉及大量的准备工作和潜在的中断。 2、另一种方法是重新配置/etc/cni/net.d/指向Cilium。但是&#xff0c;现有的pod仍将由旧的…
阅读更多...
Stable Diffusion 优秀博客转载

Stable Diffusion 优秀博客转载

初版论文地址&#xff1a;https://arxiv.org/pdf/2112.10752 主要流程图&#xff1a; Latent Diffusion Models&#xff08;LDMs&#xff09; DDPM是"Denoising Diffusion Probabilistic Models"的缩写&#xff0c; 去噪扩散概率模型 博客&#xff1a; https://ja…
阅读更多...
【十八】MySQL 8.0 新特性

【十八】MySQL 8.0 新特性

MySQL 8.0 新特性 目录 MySQL 8.0 新特性 概述 简述 1、数据字典 2、原子数据定义语句 3、升级过程 4、会话重用 5、安全和账户管理 6、资源管理 7、表加密管理 8、InnoDB增强功能 9、字符集支持 10、增强JSON功能 11、数据类型的支持 12、查询的优化 13、公用…
阅读更多...
【前端学习】iframe标签以及postMessage解决iframe中的跨域问题

【前端学习】iframe标签以及postMessage解决iframe中的跨域问题

面试中被问到跨域问题&#xff0c;并且面试官提出一个iframe嵌套页面中遇到跨域问题用纯前端解决跨域的方法。卡壳了~ 来学习一下~~ 一. iframe标签介绍 <iframe>是html的一个行内块级元素&#xff0c;像行内元素一样会在一行中水平排列&#xff0c;又可以像块元素一样设…
阅读更多...
828华为云征文｜在Flexus X实例上安装JDK和Tomcat保姆教学

828华为云征文｜在Flexus X实例上安装JDK和Tomcat保姆教学

目录 一、Flexus云服务器X实例 1.1 Flexus X实例概述 1.2 Flexus X实例场景优势 1.3 其他型号与Flexus X实例比较 二、Flexus X实例上安装JDK 2.1 确定安装版本 2.2 yum命令直接安装 2.3 查看版本 三、Flexus X实例上安装tomcat 3.1 上传安装包到Flexus X实例服务器 …
阅读更多...
【Redis】持久化机制--RDB和AOF

【Redis】持久化机制--RDB和AOF

目录 1. RDB持久化 1.1 触发机制 1.2 流程说明 1.3 RDB文件的处理 1.4 RDB机制演示 1.5 RDB的优缺点 2. AOF持久化 2.1 使用AOF与基本演示 2.2 AOF的工作流程 2.3 文件同步&#xff08;缓冲区刷新策略&#xff09; 2.4 重写机制 2.5 AOF重写流程 2.6 启动时数据恢复 …
阅读更多...
产品需求-聊天框中发送的文件，要求文件名过长是保留后缀名省略中间的文字部分

产品需求-聊天框中发送的文件，要求文件名过长是保留后缀名省略中间的文字部分

介绍一下之前做过的一个需求&#xff0c;是要实现pc的一个聊天软件的消息引用功能。对于文件的引用&#xff0c;产品是这样做要求的&#xff1a; 消息框无固定长度&#xff0c;根据回复的文字长度决定消息框长度对于一个pc项目&#xff0c;当页面窗口变化时要实现响应式文件名…
阅读更多...
C++入门day5-面向对象编程（终）

C++入门day5-面向对象编程（终）

C入门day4-面向对象编程&#xff08;下&#xff09;-CSDN博客 本节是我们面向对象内容的最终篇章&#xff0c;不是说我们的C就学到这里。如果有一些面向对象的基础知识没有讲到&#xff0c;后面会发布在知识点补充专栏&#xff0c;全都是干货满满的。 https://blog.csdn.net/u…
阅读更多...
小学生管理系统项目

小学生管理系统项目

在当今数字化教育的背景下&#xff0c;小学生管理系统应运而生。本项目采用 JSP Servlet JDBC MySQL 的技术组合&#xff0c;并在开发工具 Idea 和 Eclipse 的辅助下&#xff0c;结合数据库管理工具 Navicat 进行开发。 一、系统入口 用户登录入口&#xff1a;为普通用户提…
阅读更多...
可看见车辆行人的高清实时视频第2辑

可看见车辆行人的高清实时视频第2辑

我们在《看见车辆行人的高清实时视频第2辑》分享了10处可看见车辆行人的实时动态高清视频。 现在我们又整理10处为你分享可看见车辆行人的实时动态高清视频&#xff0c;一共有30个摄像头数据&#xff0c;这些视频来自公开的高清摄像头实时直播画面。 我们在文末为你分享了这些…
阅读更多...
低代码平台推荐与对比，国内外哪家更胜一筹？

低代码平台推荐与对比，国内外哪家更胜一筹？

低代码开发通过图形界面简化开发&#xff0c;提升速度与协作&#xff0c;降低成本。国内外平台如ZohoCreator、OutSystems等各具特色&#xff0c;支持快速开发、集成与数据安全。企业可试用后按需选择&#xff0c;降低决策成本。 一、低代码是什么&#xff1f; 低代码开发是一…
阅读更多...
webpack 4 的 30 个步骤构建 react 开发环境

webpack 4 的 30 个步骤构建 react 开发环境

将 react 和 webpack4 进行结合&#xff0c;集 webpack 的优势于一身&#xff0c;从 0 开始构建一个强大的 react 开发环境。 其实很多人都有 一看就会&#xff0c;一做就废 的特点(当然也包括我在内)&#xff0c;这个时候&#xff0c;你需要制定一个略微详细的计划&#xff0…
阅读更多...
C++的成员初始化列表

C++的成员初始化列表

1、构造函数初始化列表&#xff0c;这是我们在构造函数中初始化类成员&#xff08;变量&#xff09;的一种方式&#xff0c;因此&#xff0c;当我们编写一个类并向该类添加成员时&#xff0c;通常需要用某种方式对这些成员&#xff08;变量&#xff09;进行初始化。 通常在构造…
阅读更多...
Efficient DETR: Improving End-to-End Object Detector with Dense Prior

Efficient DETR: Improving End-to-End Object Detector with Dense Prior

原文链接 [2104.01318] Efficient DETR: Improving End-to-End Object Detector with Dense Prior (arxiv.org)https://arxiv.org/abs/2104.01318 原文笔记 What 1、一种针对DETR的objectquery初始化的方法 2、针对Deformable DETR进行改进&#xff0c;改进之后的模型具有…
阅读更多...
【工具分享】FONIX勒索病毒解密工具

【工具分享】FONIX勒索病毒解密工具

前言 FONIX勒索软件首次出现在2020年6月&#xff0c;并迅速成为勒索即服务&#xff08;RaaS&#xff09;平台的一部分。尽管它最初的影响力有限&#xff0c;FONIX从2020年11月开始显著增加了攻击频率。FONIX以其复杂的加密方法著称&#xff0c;使用了AES、Salsa20、ChaCha和RS…
阅读更多...
【HarmonyOS】自定义圆点进度条

【HarmonyOS】自定义圆点进度条

【HarmonyOS】实现一个自定义带圆点的进度条效果。 方案就是做一个圆角组件&#xff0c;然后利用rotate旋转&#xff0c;至于动画效果&#xff0c;我查了一下文档&#xff0c;只要设置enableSmoothEffect:false&#xff0c;就可以关闭动画&#xff0c;然后自己开个定时器&#…
阅读更多...
鸿蒙开发（NEXT/API 12）【硬件（接入手写套件）】手写功能开发

鸿蒙开发（NEXT/API 12）【硬件（接入手写套件）】手写功能开发

接入手写套件后&#xff0c;可以在应用中创建手写功能界面。界面包括手写画布和笔刷工具栏两部分&#xff0c;手写画布部分支持手写笔和手指的书写效果绘制&#xff0c;笔刷工具栏部分提供多种笔刷和编辑工具&#xff0c;并支持对手写功能进行设置。接入手写套件后将自动开启一…
阅读更多...
C++：采用模板封装顺序表，栈，队列

C++：采用模板封装顺序表，栈，队列

1.顺序表&#xff1a; list.hpp #ifndef LIST_HPP #define LIST_HPP #include <iostream>using namespace std;template <class L>class Seqlist { private:L *ptr;L size;L len0;public:void init(L n){//堆区申请空间&#xff08;大小为n&#xff09;this->…
阅读更多...
基于STM32的智能空气质量监测系统

基于STM32的智能空气质量监测系统

目录 引言项目背景环境准备 硬件准备软件安装与配置系统设计 系统架构关键技术代码示例 传感器数据采集空气质量监测与控制实现实时数据显示与报警系统应用场景结论 1. 引言 空气质量对人类健康有着重要的影响&#xff0c;尤其是在污染较严重的地区。智能空气质量监测系统通…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023