Andorid之页面布局优化

文章大纲

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

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

  在开发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标签使用注意点：

1. 因为merge标签并不是view,所以在通过layoutinflate.inflate()方法渲染的时候,第二个参数必须指定一个父容器,且第三个参数必须为true,也就是必须为merge下的视图指定一个父亲节点.由于merge不是view所以对merge标签设置的所有属性都是无效的
2. merge标签必须使用在根布局，并且viewstub标签中的layout布局不能使用merge标签

三、项目源码下载

链接：https://pan.baidu.com/s/1xfjc4yqfhs9wkl6rhki1zw
提取码：gdce

四、参考文章

2. https://www.cnblogs.com/leipdao/p/8981687.html