Android ConstraintLayout使用技巧：構建複雜而美麗的UI界面

隨着移動設備的普及，用戶對於應用程序的UI界面要求越來越高。開發人員要在保證應用性能的同時，儘可能的構建複雜而美麗的UI界面成為了必然趨勢。而在Android中，ConstraintLayout提供了一種非常有效的方式來構建複雜而美麗的UI界面。

一、ConstraintLayout簡介

ConstraintLayout是Android Studio自帶的、適用於Android 2.3及更高版本的布局方式，它採用了一種更加靈活的方式來約束各個組件之間的相對位置。

相比於RelativeLayout和LinearLayout等傳統布局，ConstraintLayout具有更高的性能和更豐富的功能。它既能夠簡單地實現線性布局和相對布局，又能夠實現複雜的布局比如鏈表布局、百分比布局等等。而在實現複雜布局的同時，還可以有效地避免布局嵌套和性能問題。

二、ConstraintLayout基本用法

相信大多數開發人員都已經了解了ConstraintLayout的基本用法，例如match_parent、wrap_content等屬性的使用。我們在此重點介紹一些較為複雜的用法，例如鏈表布局和動態布局。

1. 鏈表布局

鏈表布局是指多個組件按照一定規則在界面中形成一條鏈表，在ConstraintLayout中使用的就是HorizontalChain和VerticalChain兩個屬性。下面我們以HorizontalChain為例來介紹鏈表布局的使用：

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/btn_2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Button
            android:id="@+id/btn_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"
            app:layout_constraintLeft_toRightOf="@id/btn_1"
            app:layout_constraintRight_toLeftOf="@id/btn_3"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Button
            android:id="@+id/btn_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3"
            app:layout_constraintLeft_toRightOf="@id/btn_2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        </android.support.constraint.ConstraintLayout>

在上面的代碼中，我們使用了HorizontalChain屬性來實現三個Button組成的鏈表布局。其中，HorizontalChainStyle屬性採用了spread_inside的方式來對三個Button進行布局。整個布局如下圖所示：


上圖演示了三個Button之間對齊方式為水平方向，且第一個和第二個Button的右側及左側分別連接、中間的兩個Button的左右兩側彼此連接，最後一個Button與父容器右邊緣連接的布局效果。

需要注意的是，HorizontalChainStyle屬性的取值包括spread_inside、spread、packed三種方式，在不同的布局需求下可以靈活運用。

2. 動態布局

動態布局使用ConstraintSet來實現，可以在代碼中動態的修改ConstraintLayout中各個組件之間的布局關係。下面舉個例子說明：

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/layout_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Button
            android:id="@+id/btn_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"
            app:layout_constraintLeft_toRightOf="@id/btn_1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Button
            android:id="@+id/btn_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3"
            app:layout_constraintLeft_toRightOf="@id/btn_2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        </android.support.constraint.ConstraintLayout>

在上面的代碼中，我們定義了三個Button組成的鏈表布局，但存在一個問題，就是三個Button之間的寬度並不相等。我們可以通過如下代碼對ConstraintLayout中的各個組件的寬度進行動態設置：

    ConstraintLayout layout = findViewById(R.id.layout_root);
    ConstraintSet set = new ConstraintSet();
    set.clone(layout);
    set.constrainWidth(R.id.btn_1, 0);
    set.constrainWidth(R.id.btn_2, ConstraintSet.MATCH_CONSTRAINT);
    set.constrainWidth(R.id.btn_3, 0);
    set.applyTo(layout);

在上述代碼中，首先通過findViewById方法獲取到了ConstraintLayout對象，然後通過ConstraintSet對其進行備份。接下來，我們調用了set.constrainWidth方法對各個Button的寬度進行設置。在這裡，我們設置第一個和最後一個Button的寬度為0，中間的Button的寬度設置為MATCH_CONSTRAINT，這樣就保證了三個Button的寬度都相等了。最後，我們再次調用set.applyTo方法將設置應用到具體的UI界面中。

三、ConstraintLayout最佳實踐

雖然ConstraintLayout有着非常多的功能和使用技巧，但是，在使用時還需要注意一些最佳實踐。下面我們總結了幾個常見的實踐建議：

1. 避免隨意嵌套

和其他ViewGroup一樣，ConstraintLayout中的嵌套層數也會影響應用程序的性能。因此，在使用ConstraintLayout時，應盡量避免無意義的嵌套。使用include控件來引用其他布局是一種很好的解決方案，同時也能夠使布局更加復用。

2. 使用Guideline調整間距

Guideline是Android ConstraintLayout中一個非常有用的工具，它可以用來調整視圖之間的間距和位置。其實現方式是在布局中添加一條垂直或者水平的虛線來佔據特定位置，並將組件對該虛線進行約束。在實際應用中，可以使用Guideline調整一個界面元素的位置和大小。

3. 適當使用Barrier

Barrier是Android ConstraintLayout中的一個不太常用，但是非常有用的控件，它類似於在布局中添加一條虛擬的屏障。它能夠實現當一個組件的一些邊緣需要作為約束的時候，自動生成一個虛擬的屏障。在實際應用中，適當使用Barrier能夠使布局更加簡單和容易維護。

四、總結

本文主要介紹了Android ConstraintLayout的基礎用法和高級用法，同時也介紹了常見的最佳實踐。當然，這只是冰山一角，除此之外還有很多其他的相關技術，如果開發人員能夠充分發揮其所長，非常簡單就可以實現複雜而美麗的UI界面。