文章大纲
一、为什么要进行页面布局优化
二、页面布局优化实操
三、项目源码下载
四、参考文章
一、为什么要进行页面布局优化
在开发Android时，会遇到某些是通用的布局，我们常将一些通用的视图提取到一个单独的layout文件中，然后使用<include>等标签在需要使用的其他layout布局文件中加载进来，比如我们自己App导航栏等。这样，便于对相同视图内容进行统一的控制管理，提高布局重用性。
二、页面布局优化实操
1. include标签的使用
操作是将需要重用的布局写在一个单独的xml文件中，再使用include标签复用到其他布局中。
新建复用布局common.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="姓名"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="年龄"/>
</LinearLayout>
在新的布局中进行复用
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="@layout/common"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
运行结果如下：
include进阶使用
指定<include>的id属性
若include标签中重新指定id，那么其中的控件就不可当成主xml（包含include标签的xml）中的控件来直接获得了，必须先获得include对应的xml文件（就是common.xml），再通过布局文件的findViewById方法来获得其中控件。 当然，若原布局设置了id属性，会被覆盖掉。
common.xml布局代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="姓名"/>
<Button
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="年龄"/>
</LinearLayout>
主布局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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<include
android:id="@+id/include_common"
layout="@layout/common" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
Activity中获取组件方式
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View view = findViewById(R.id.include_common);
Button button1 = view.findViewById(R.id.button1);
Button button2 = view.findViewById(R.id.button2);
}
}
如果我们想要在<include>标签当中覆写layout属性，必须要将layout_width和layout_height这两个属性也进行覆写，否则覆写效果将不会生效。
2.merge标签使用
include有一个缺点就是可能会产生多余的层级，比如，被复用布局是一个垂直的LinearLayout布局，当以include标签插入到另一个垂直的LinearLayout布局中时，结果就是一个垂直的LinearLayout里包含一个垂直的LinearLayout，这个嵌套的布局并没有实际意义，只会让UI性能变差。这时就可以使用merge标签。
common2.xml布局如下：
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="姓名" />
<Button
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:text="年龄" />
</merge>
merge标签使用注意点：
- 因为merge标签并不是View,所以在通过LayoutInflate.inflate()方法渲染的时候,第二个参数必须指定一个父容器,且第三个参数必须为true,也就是必须为merge下的视图指定一个父亲节点.由于merge不是View所以对merge标签设置的所有属性都是无效的
- merge标签必须使用在根布局，并且ViewStub标签中的layout布局不能使用merge标签
三、项目源码下载
链接：https://pan.baidu.com/s/1XFjC4YqfHS9wKl6rHki1zw
提取码：gdce