。

一个高效的布局不仅能提升用户体验#xff0c;还能显著改善应用的性能。

随着应用功能的复杂性增加#xff0c;布局的优化变得尤为重要。

优化布局能够减少渲染时间#xff0c;提高响应速度#xff0c…引言

1.重要性

在Android应用开发中布局是用户界面的基础。

一个高效的布局不仅能提升用户体验还能显著改善应用的性能。

随着应用功能的复杂性增加布局的优化变得尤为重要。

优化布局能够减少渲染时间提高响应速度从而让用户获得更流畅的体验。

布局直接影响应用的启动时间和运行时性能。

嵌套过深的布局会导致测量和绘制的开销增加进而引发界面卡顿或不流畅的问题。

此外复杂的布局会消耗更多的内存可能导致应用崩溃。

通过合理的布局设计可以降低CPU和GPU的负担提升整体应用的运行效率。

布局性能是指在Android应用中布局系统处理视图View和视图组ViewGroup的效率。

它主要涉及以下几个方面

测量性能

指计算视图大小所需的时间和资源。

高效的测量可以减少布局过程中CPU的占用。

布局性能

这是指在视图层级中定位和排列视图所需的时间。

层级过深或过于复杂的布局会导致性能下降。

渲染性能

涉及将布局绘制到屏幕上所需的时间和资源。

有效的渲染能够确保界面快速响应用户操作。

内存使用

低内存使用意味着更少的GC垃圾回收从而减少卡顿和延迟。

布局性能应关注内存的合理分配和使用。

优化布局文件

提供了一套完整的约束系统可以通过相对定位、边距、比例、链等特性来定义子视图之间的关系。

这样一来不同视图之间可以在同一层级内相互依赖避免了层层嵌套的问题。

使用传统布局如LinearLayout、RelativeLayout时通常需要多个嵌套来满足复杂的布局需求。

例如一个水平和垂直居中的布局需要嵌套两个

LinearLayout

RelativeLayout、LinearLayout、FrameLayout

ConstraintLayout

支持链式布局可以将多个视图通过链条的形式连接在一起根据指定的分布方式如均匀分布、权重分布等来排列视图。

这种方式不仅减少了嵌套层级还能更加灵活地管理视图的排列。

Guideline

可以在布局中定义固定的比例参考线方便其他视图的对齐和排列Barrier

ConstraintLayout的使用可以参考以下博客【Android】ConstrainLayout约束布局基本操作_android

include使用

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

我们应该都知道目前几乎所有的软件都会有一个头布局头布局中可以包含界面的标题、返回按钮、以及其它一些操作功能。

有些软件是使用ActionBar来实现的但是由于ActionBar的灵活性不太好因而也有很多软件会选择自己去编写实现。

因为应用中几乎所有界面都要用头布局所以这种情况下使用include标签就非常合适了。

我们创建title_bar.xml

xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent

Buttonandroid:idid/backandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_alignParentLefttrueandroid:layout_centerVerticaltrueandroid:textBack

/TextViewandroid:idid/titleandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_centerInParenttrueandroid:textTitleandroid:textSize20sp

/Buttonandroid:idid/doneandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_alignParentRighttrueandroid:layout_centerVerticaltrueandroid:textDone

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

include

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

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

我们可以将RelativeLayout的layout_height属性修改成wrap_content

include

layoutlayout/title_barandroid:layout_widthmatch_parentandroid:layout_heightwrap_content/除了layout_height之外我们还可以覆写titlebar中的任何一个layout属性如layout_gravity、layout_margin等而非layout属性则无法在include标签当中进行覆写。

但是在覆写的时候必须要将layout_width和layout_height这两个属性也进行覆写否则覆写效果将不会生效。

merge使用

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

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

?xml

xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:orientationvertical

Buttonandroid:idid/okandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginLeft20dpandroid:layout_marginRight20dpandroid:textOK

/Buttonandroid:idid/cancelandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginLeft20dpandroid:layout_marginRight20dpandroid:layout_marginTop10dpandroid:textCancel

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

include

layoutlayout/ok_cancel_layout/?xml

version1.0

xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:idid/mainandroid:orientationverticalandroid:layout_widthmatch_parentandroid:layout_heightmatch_parenttools:context.MainActivityinclude

layoutlayout/title_barandroid:layout_widthmatch_parentandroid:layout_heightwrap_content/EditTextandroid:idid/editandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginBottom10dpandroid:layout_marginLeft20dpandroid:layout_marginRight20dpandroid:layout_marginTop10dpandroid:hintEdit

something

layoutlayout/ok_cancel_layout//LinearLayout运行效果如下

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

LayoutInflater原理分析带你一步步深入了解View(一)_android

layoutinflater原理分析,带你一步步深入了解view(一)-CSDN博客

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

我们此时就可以用merge来优化布局。

修改ok_cancel_layout.xml中的代码

?xml

xmlns:androidhttp://schemas.android.com/apk/res/androidButtonandroid:idid/okandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginLeft20dpandroid:layout_marginRight20dpandroid:textOK

/Buttonandroid:idid/cancelandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginLeft20dpandroid:layout_marginRight20dpandroid:layout_marginTop10dpandroid:textCancel

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

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

ViewStub使用

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

虽然设置其它元素可见不可见也可以实现该操作但是相应的元素还是会进行加载。

那么我们如何才能让这些不常用的元素仅在需要时才去加载呢Android为此提供了一种非常轻量级的控件ViewStub。

ViewStub虽说也是View的一种但是它没有大小没有绘制功能也不参与布局资源消耗非常低将它放置在布局当中基本可以认为是完全不会影响性能的。

?xml

xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationvertical

EditTextandroid:idid/edit_extra1android:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginLeft20dpandroid:layout_marginRight20dpandroid:hintExtra

field

/EditTextandroid:idid/edit_extra2android:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginLeft20dpandroid:layout_marginRight20dpandroid:layout_marginTop10dpandroid:hintExtra

field

/EditTextandroid:idid/edit_extra3android:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginLeft20dpandroid:layout_marginRight20dpandroid:layout_marginTop10dpandroid:hintExtra

field

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

修改activity_main.xml

xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:idid/mainandroid:orientationverticalandroid:layout_widthmatch_parentandroid:layout_heightmatch_parenttools:context.MainActivityinclude

layoutlayout/title_barandroid:layout_widthmatch_parentandroid:layout_heightwrap_content/EditTextandroid:idid/editandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginBottom10dpandroid:layout_marginLeft20dpandroid:layout_marginRight20dpandroid:layout_marginTop10dpandroid:hintEdit

something

/Buttonandroid:idid/moreandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_gravityrightandroid:layout_marginRight20dpandroid:layout_marginBottom10dpandroid:textMore

/ViewStubandroid:idid/view_stubandroid:layoutlayout/profile_extraandroid:layout_widthmatch_parentandroid:layout_heightwrap_content/include

layoutlayout/ok_cancel_layout//LinearLayout我们新增了一个More

Button用来加载不常用元素后在Button的下面定义了一个ViewStub。

通过layout属性将profile_extra布局传入进来。

public

{super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main),

(v,

insets.getInsets(WindowInsetsCompat.Type.systemBars());v.setPadding(systemBars.left,

systemBars.top,

findViewById(R.id.more);moreButton.setOnClickListener(new

{Overridepublic

findViewById(R.id.view_stub);if

(viewStub

inflatedView.findViewById(R.id.edit_extra1);editExtra2

(EditText)

inflatedView.findViewById(R.id.edit_extra2);editExtra3

(EditText)

inflatedView.findViewById(R.id.edit_extra3);}}});}

}ViewStub

在布局加载时并不会立即把其内容添加到视图层次结构中它只占用极少的内存占位。

当你调用

inflate()

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

效果如下

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

参考Android最佳性能实践(四)——布局优化技巧_android

在代码里生成布局性能-CSDN博客