如何实现高效的UI布局,在Android官方提供了三种布局方式 <include/> <merge/> <ViewStub/>
一、首先来看<include/> 布局的重用性,顾名思义它能够重用布局文件。
简单的例子:main.xml
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width=”match_parent”
- android:layout_height=”match_parent”
- android:background="@color/black"
- android:gravity="center_horizontal">
- <include layout="@layout/title"/> //重用
- <TextView android:layout_width=”match_parent”
- android:layout_height="wrap_content"
- android:text="@string/app"
- android:padding="10dp" />
- </LinearLayout>
1.在设置了<include/> 标签的layout_width 和layout_height两个属性后,<include/>标签的android:layout_*都是可以使用的。
2.<include/>标签可以使用单独的layout属性,这个也是必须使用的。
二、<merge/> 的使用减少布局层次结构 它有两种使用方式;
第一种使用方式:替换根布局FrameLayout
如果在一个布局文件中它的跟布局为<FrameLayout/>可以如下使用:
替换前:main.xml
<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/app" />
</FrameLayout>
替换后:main.xml
<?xml version="1.0" encoding="UTF-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/app_name" />
</merge>
第二种使用方式:当时用<include/>时,如果根布局和自布局的根节点相同,那么可以将子布局的跟节点使用<merge/>来代替
例如:
main.xml
<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/app" />
<include layout="@layout/title"/>
</FrameLayout>
布局:title.xml 子布局根节点与父布局根节点一致是可以用<merge/>代替,减少布局层次结构
<?xml version="1.0" encoding="UTF-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/app" />
</merge>
三、<ViewStub/> 的使用,它的最大优不会影响UI的初始化性能,例如各种不常用的进度条,提示信息都可使用<ViewStub/>来代替已减少你内存的使用量,加快渲染的速度。
<ViewStub/>是不可见的,大小为0的View,当你真正什么时候使用它时,它就会显示。
例如:main.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">
<ViewStub
android:id="@+id/viewstub"
android:inflatedId="@+id/import"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="@layout/message"></ViewStub>
</LinearLayout>
布局 message.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:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:text="正在加载..." />
</LinearLayout>
当你想加载布局时,可以使用下面其中一种方法:
- ((ViewStub) findViewById(R.id.import)).setVisibility(View.VISIBLE);
- 或者
- View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();
其他:实现高效的布局应注意以下几点:
1.LinearLayout中应慎用Layout_weight 在渲染UI时会绘制两次。
2.减少布局层次的嵌套,扁平化布局设计。
3.去除布局的跟布局(如:没有子元素子布局文件,或者没有背景,默认不会显示)和累赘的父控件。
4.使用<merge/> <include/> <ViewStub/>标签
5.背景的优化,使用Ninepatch更节省内存,透明化绘制。
6.为当前页面指定焦点控件<requsetFocus/>避免整个屏幕处于获取焦点状态。
7.Android 4.x最新布局标签GridLayout、以及space.
常用分析布局工具 :Lint能够帮助你检查布局文件中潜在的Bug和提供优化方案,Hierarchy Viewer Tool查看布局层次结构以及计算UI渲染时所耗费的时间:1.测量时,2.布局,3.绘画 每个所占用的时间。以后还会详细介绍这两个工具的详细使用情况,网上也有很多的教程。