Andorid之页面布局优化

2024-03-18 10:30:46

文章大纲

一、为什么要进行页面布局优化
二、页面布局优化实操
三、项目源码下载
四、参考文章

一、为什么要进行页面布局优化

在开发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

码农公寓