Android ConstraintLayout的易懂教程

1. 簡介

ConstraintLayout是Google提供的一種ViewGrop,由於它不用像LinearLayout那樣嵌套的方式實現複雜的Layout，使得ConstraintLayout更加易寫易讀，還能讓App的性能有所提升(由於少了層級嵌套，因此繪製時的性能損耗也會減小)。

ConstraintLayout如其名字，它是經過設置顯示限制來決定View的顯示位置。

2. 使用方法

2.1 引入外部庫和設置ViewGroup

正常狀況下，新建一個工程時會自動加入ConstraintLayout的庫，若是沒有則須要手動加入。

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
複製代碼

接下來須要把layout文件中的根ViewGroup設置成ConstraintLayout。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent">
    ......
</androidx.constraintlayout.widget.ConstraintLayout>
複製代碼

2.2 設置基本的限制條件

介紹一下決定View位置的幾種ConstraintLayout的限制條件。

• app:layout_constraintTop_toTopOf //該View的上部與指定的View上部位置一致
• app:layout_constraintTop_toBottomOf //該View的上部與指定的View下部位置一致
• app:layout_constraintBottom_toBottomOf
• app:layout_constraintBottom_toTopOf
• app:layout_constraintStart_toStartOf
• app:layout_constraintStart_toEndOf
• app:layout_constraintEnd_toEndOf
• app:layout_constraintEnd_toStartOf

須要注意的是除了設置View的ID，還能夠設置parent。parent是指顯示界面。 還有好比同時設置左右限制，則View會居中，就像兩端被繩子拉緊居中似的。

若是想要左側或者右側傾斜，則須要加入權重。

app:layout_constraintHorizontal_bias="0.2"
複製代碼

還有若是要設置View的margin須要用下面的方法。

• android:layout_marginTop
• android:layout_marginButtom
• android:layout_marginStart
• android:layout_marginEnd

舉一個例子,你們應該很快就會理解了。

<TextView android:id="@+id/textView10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="50dp" android:text="TextView10" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.2" app:layout_constraintStart_toStartOf="parent" />
複製代碼

2.3 Barrier

有時候咱們會有根據多個View中最右端的位置，決定另外一個View的位置。若是使用ConstraintLayout的Barrier就容易實現。

首先增長一個Barrier,而且設置以下的設置。

2.3.1 Barrier的方向

須要決定要把Barrier放置在相對於View的哪一個位置。根據上述需求:

app:barrierDirection="end"
複製代碼

除了end,還有start,top,bottom。

2.3.2 引用的ID

還須要設置對限制起做用的引用ID。若是咱們是須要根據兩個TextView中最右端的位置，來決定另外一View的位置時，能夠寫成以下的代碼。

app:constraint_referenced_ids="textView1,textView2"
複製代碼

2.3.3 例

<androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="end" app:constraint_referenced_ids="textView1,textView2" />
複製代碼

2.4 GuideLine

若是在一個View中有不少組件須要設置同樣的margin的時候可使用GuideLine，使其日後的總體修改更容易，代碼更加簡潔。

GuideLine正如它的名字，它是一個參考線，但它是隱形的。GuideLine自己是不會顯示在View中的，它只是做爲參考線，統一各個View的margin。

2.4.1 設置參考線的方向

咱們須要設置參考線是縱向仍是橫向的。以下代碼。

android:orientation="vertical"
複製代碼

vertical是縱向，horizontal是橫向。

2.4.2 設置參考線的位置

經過使用基本限制條件來設置參考線的位置。但這裏有一個特別值得注意的一點是，margin的設置是不能用普通的限制條件，須要用其專門的margin限制條件。

margin的限制條件:

• app:layout_constraintGuide_end
• app:layout_constraintGuide_start
• app:layout_constraintGuide_top
• app:layout_constraintGuide_bottom

下面的代碼的意思是，把參考線設置在離界面右端的30dp的位置。

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_end="30dp"
複製代碼

2.4.3 設置其餘View的位置限制條件

剩下的就是把View的位置限制條件設置成GuideLine便可。

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World1!" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toEndOf="@id/guideline1" />
複製代碼

2.4.4 總體代碼

<androidx.constraintlayout.widget.Guideline android:id="@+id/guideline1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintStart_toStartOf="parent" app:layout_constraintGuide_begin="30dp" />
         
         <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World1!" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toEndOf="@id/guideline1" />
複製代碼

2.4.5 截圖

2.5 ChainStyle

根據上面的敘述，對View設置左右的限制時，該View會居中顯示。可是若是兩個View想要貼在一塊兒顯示，就須要用到ChainStyle。

ChainStyle一共有三種類型。

• spread_inside
• spread
• packed

固然根據方向分爲縱向和橫向的ChainStyle。

• layout_constraintHorizontal_chainStyle
• layout_constraintVertical_chainStyle

使用ChainStyle時有一個注意點是，須要對View的兩側都要設置限制，若是缺乏限制條件，ChainStyle就不會起做用。

2.5.1 spread_inside

spread_inside是兩邊View貼近邊緣，中間居中。

2.5.2 spread

spread是全部View居中。

2.5.3 packed

packed是全部的View都貼在一塊兒。

2.5.4 例

<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="150dp" android:text="TextView1" app:layout_constraintEnd_toStartOf="@id/textView2" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="150dp" android:text="TextView2" app:layout_constraintEnd_toStartOf="@id/textView3" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toEndOf="@id/textView1" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="150dp" android:text="TextView3" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toEndOf="@id/textView2" app:layout_constraintTop_toTopOf="parent" />
複製代碼

3. 其餘

除了上述內容，還有不少關於ConstraintLayout的其餘內容，由於篇幅有限就再也不介紹了。

GitHub： github.com/HyejeanMOON…

4. 其餘教程

Google的MergeAdapter的使用
Paging在Android中的應用
Android WorkManager的使用 android中的Transition動畫的使用