第AndroidConstraintLayout約束布局使用詳解目錄基本屬性約束強(qiáng)度Visibility屬性控件寬高比子控件之間的寬高占比錨向指示線Chains鏈

基本屬性

可以讓本View的一個(gè)方向置于目標(biāo)View的一個(gè)方向，比如

layout_constraintBottom_toBottomOf：本View的下面置于目標(biāo)View的下面，與此類似的還有l(wèi)ayout_constraintEnd_toEndOf，

layout_constraintStart_toStartOf，layout_constraintTop_toTopOf，layout_constraintBottom_toTopOf等等。

例如，B放在A的上面，就可以讓B的下面置于A的上面

xmlversion="1.0"encoding="utf-8"

androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity"

TextView

android:id="@+id/a"

android:layout_width="100dp"

android:layout_height="100dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/a"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/

TextView

android:id="@+id/b"

android:layout_width="100dp"

android:layout_height="100dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/b"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintBottom_toTopOf="@id/a"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/

/androidx.constraintlayout.widget.ConstraintLayout

還有一個(gè)屬性就是layout_constraintBaseline_toBaselineOf，這個(gè)可以讓其內(nèi)部文字對(duì)齊。

約束強(qiáng)度

利用layout_constraintHorizontal_bias和layout_constraintVertical_bias，可以設(shè)置控件在水平和垂直方向上的偏移量，值為0-1

比如，讓一個(gè)控件居中顯示，我們會(huì)這樣寫

xmlversion="1.0"encoding="utf-8"

androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity"

TextView

android:id="@+id/a"

android:layout_width="100dp"

android:layout_height="100dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/a"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/

/androidx.constraintlayout.widget.ConstraintLayout

現(xiàn)在，它的上下左右的剩余空間都占50%，現(xiàn)在我想讓它的左側(cè)剩余空間從50%變成10%，上面的剩余空間從50%變成100%，可以這么干

xmlversion="1.0"encoding="utf-8"

androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity"

TextView

android:id="@+id/a"

android:layout_width="100dp"

android:layout_height="100dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/a"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.1"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="1"/

/androidx.constraintlayout.widget.ConstraintLayout

Visibility屬性

在ConstraintLayout布局，visibility屬性設(shè)置為gone的話，可以理解為該View被縮小成一個(gè)不可見(jiàn)的小點(diǎn)，而其他對(duì)其有約束的View依照該點(diǎn)來(lái)進(jìn)行定位。

比如，現(xiàn)在有兩個(gè)TextView

如果這時(shí)，將A設(shè)置成不可見(jiàn)，那B的位置會(huì)有些改變

這時(shí)，我們可以通過(guò)layout_goneMarginTop，layout_goneMarginBottom，layout_goneMarginStart，layout_goneMarginEnd屬性來(lái)設(shè)置與之的距離，這類屬性只有在A的visibility屬性為gone時(shí)才會(huì)生效。

xmlversion="1.0"encoding="utf-8"

androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity"

TextView

android:id="@+id/a"

android:layout_width="100dp"

android:layout_height="100dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/a"

android:textColor="@color/white"

android:textSize="30sp"

android:visibility="gone"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/

TextView

android:id="@+id/b"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_marginTop="20dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/b"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/a"

app:layout_goneMarginTop="70dp"/

/androidx.constraintlayout.widget.ConstraintLayout

控件寬高比

如果想實(shí)現(xiàn)固定寬高比的話，可以使用layout_constraintDimensionRatio屬性，至少設(shè)置layout_width或layout_height為0

xmlversion="1.0"encoding="utf-8"

androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity"

TextView

android:id="@+id/a"

android:layout_width="0dp"

android:layout_height="0dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/a"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintDimensionRatio="4:2"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/

/androidx.constraintlayout.widget.ConstraintLayout

子控件之間的寬高占比

我們知道，LinearLayout可以為子控件設(shè)置layout_weight屬性，控制子控件之間的寬高占比，ConstraintLayout也可以，對(duì)應(yīng)的屬性是layout_constraintHorizontal_weight，layout_constraintVertical_weight

xmlversion="1.0"encoding="utf-8"

androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity"

TextView

android:id="@+id/a"

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_marginStart="10dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/a"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/b"

app:layout_constraintHorizontal_weight="1"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/

TextView

android:id="@+id/b"

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_marginStart="10dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/b"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/c"

app:layout_constraintHorizontal_weight="1"

app:layout_constraintStart_toEndOf="@+id/a"

app:layout_constraintTop_toTopOf="parent"/

TextView

android:id="@+id/c"

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_marginStart="10dp"

android:layout_marginEnd="10dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/c"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_weight="1"

app:layout_constraintStart_toEndOf="@+id/b"

app:layout_constraintTop_toTopOf="parent"/

/androidx.constraintlayout.widget.ConstraintLayout

錨向指示線

當(dāng)我們需要任意位置的錨點(diǎn)時(shí)，可以使用Guideline來(lái)幫助定位，它的寬度和高度均為0，可見(jiàn)性也為GONE，它是為了幫助其他View定位而存在的，并不會(huì)出現(xiàn)在實(shí)際頁(yè)面上。

androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline_horizontal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

app:layout_constraintGuide_percent="0.2"/

androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline_vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintGuide_begin="100dp"/

Chains鏈

Chain鏈?zhǔn)且环N特殊的約束，是用來(lái)分發(fā)鏈條剩余空間位置的。幾個(gè)View之間通過(guò)雙向連接而互相約束對(duì)方的位置的，就叫鏈條，像這種

鏈條分為水平鏈條和豎直鏈條，分別用layout_constraintHorizontal_chainStyle和layout_constraintVertical_chainStyle兩個(gè)屬性來(lái)設(shè)置。屬性值有三種：spread，spread_inside，packed

layout_constraintHorizontal_chain>

layout_constraintHorizontal_chain>

layout_constraintHorizontal_chain>

xmlversion="1.0"encoding="utf-8"

androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity"

TextView

android:id="@+id/a"

android:layout_width="100dp"

android:layout_height="100dp"

android:background="@color/purple_200"

android:gravity="center"

android:text="@string/a"

android:textColor="@color/white"

android:textSize="30sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/b"

app:layout_constraintHorizontal_chainapp:layout_constrai