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

四、參考文章

1. https://www.jianshu.com/p/bb908bd4c0c3
2. https://www.cnblogs.com/leipDao/p/8981687.html