Android - ConstraintLayout _ Relative Position

 │  更新│ 閱讀時長 ≈ 6 分鐘│ 本文字數 ≈ 911個字

在上一篇文章 Android - ConstraintLayout 基本介紹 中,我們知道ConstraintLayout基本概念和設計目的.

在此篇中我們將介紹ConstraintLayout的相對位置的解說

ConstraintLayout的設定共有13種, 在此我們使用兩個Button來解說,

水平方向

對於水平方向中的 Start/End 與 Left/Right 的不同點, 請參考
Android - RelativeLayout : Start/End 與 Left/Right 的不同

layout_constraintLeft_toLeftOf : 元件的左邊界和相對元件的左邊界對齊 （類似於android:layout_alignLeft）

Souce BT 的左邊界和Target BT 的左邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
<Button
        android:text="Source Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:layout_marginTop="30dp"
        app:layout_constraintTop_toBottomOf="@+id/button"
        app:layout_constraintLeft_toLeftOf="@+id/button"/>

layout_constraintLeft_toRightOf : 元件的左邊界和相對元件的右邊界對齊（類似於android:layout_toRightOf）

Souce BT 的左邊界和Target BT 的右邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       android:layout_marginTop="30dp"
       app:layout_constraintTop_toBottomOf="@+id/button"
       app:layout_constraintLeft_toRightOf="@+id/button"/>

layout_constraintRight_toLeftOf: 元件的右邊界和相對元件的左邊界對齊（類似於android:layout_toLeftOf）

Souce BT 的右邊界和Target BT 的左邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       android:layout_marginTop="30dp"
       app:layout_constraintTop_toBottomOf="@+id/button"
       app:layout_constraintRight_toLeftOf="@+id/button"/>

layout_constraintRight_toRightOf: 元件的右邊界和相對元件的右邊界對齊（類似於android:layout_alignRight）

Souce BT 的右邊界和Target BT 的右邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       android:layout_marginTop="30dp"
       app:layout_constraintTop_toBottomOf="@+id/button"
       app:layout_constraintRight_toRightOf="@+id/button"/>

layout_constraintStart_toEndOf: 元件的開始邊界和相對元件的結束邊界對齊（類似於android:layout_toEndOf）

Souce BT 的開始邊界和Target BT 的結束邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       android:layout_marginTop="30dp"
       app:layout_constraintTop_toBottomOf="@+id/button"
       app:layout_constraintStart_toEndOf="@+id/button"/>

layout_constraintStart_toStartOf: 元件的開始邊界和相對元件的開始邊界對齊（類似於android:layout_alignStart）

Souce BT 的開始邊界和Target BT 的開始邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       android:layout_marginTop="30dp"
       app:layout_constraintTop_toBottomOf="@+id/button"
       app:layout_constraintStart_toStartOf="@+id/button"/>

layout_constraintEnd_toStartOf: 元件的結束邊界和相對元件的開始邊界對齊（類似於android:layout_toStartOf）

Souce BT 的結束邊界和Target BT 的開始邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       android:layout_marginTop="30dp"
       app:layout_constraintTop_toBottomOf="@+id/button"
       app:layout_constraintEnd_toStartOf="@+id/button"/>

layout_constraintEnd_toEndOf: 元件的結束邊界和相對元件的結束邊界對齊（類似於android:layout_alignEnd）

Souce BT 的結束邊界和Target BT 的結束邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       android:layout_marginTop="30dp"
       app:layout_constraintTop_toBottomOf="@+id/button"
       app:layout_constraintEnd_toEndOf="@+id/button"/>

垂直方向

layout_constraintTop_toTopOf: 元件的上邊界和相對元件的上邊界對齊（類似於android:layout_alignTop）

Souce BT 的上邊界和Target BT 的上邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
9
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       app:layout_constraintLeft_toRightOf="@+id/button"
       android:layout_marginLeft="30dp"

       app:layout_constraintTop_toTopOf="@+id/button"/>

layout_constraintTop_toBottomOf: 元件的上邊界和相對元件的下邊界對齊（類似於android:layout_below）

Souce BT 的上邊界和Target BT 的下邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
9
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       app:layout_constraintLeft_toRightOf="@+id/button"
       android:layout_marginLeft="30dp"

       app:layout_constraintTop_toBottomOf="@+id/button"/>

layout_constraintBottom_toTopOf: 元件的下邊界和相對元件的上邊界對齊（類似於android:layout_above）

Souce BT 的下邊界和Target BT 的上邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
9
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       app:layout_constraintLeft_toRightOf="@+id/button"
       android:layout_marginLeft="30dp"

       app:layout_constraintBottom_toTopOf="@+id/button"/>

layout_constraintBottom_toBottomOf: 元件的上邊界和相對元件的上邊界對齊（類似於android:layout_alignTop）

Souce BT 的下邊界和Target BT 的下邊界對齊

XML 表示方式

1
2
3
4
5
6
7
8
9
<Button
       android:text="Source Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       app:layout_constraintLeft_toRightOf="@+id/button"
       android:layout_marginLeft="30dp"

       app:layout_constraintBottom_toBottomOf="@+id/button"/>

layout_constraintBaseline_toBaselineOf: 元件的baseline和相對元件的baseline對齊（類似於android:layout_alignBaseline）

Souce BT 的baseline和Target BT 的baseline對齊

XML 表示方式

1
2
3
4
5
6
7
8
9
<Button
       android:text="Source Button"
       android:layout_width="158dp"
       android:layout_height="87dp"
       android:id="@+id/button3"
       app:layout_constraintLeft_toRightOf="@+id/button"
       android:layout_marginLeft="8dp"

       app:layout_constraintBaseline_toBaselineOf="@+id/button"/>

Android - ConstraintLayout _ Relative Position

https://nickcarter9.github.io/2017/04/25/2017/2017_04_25-android_constraintlayout_relative_position/

作者

Nick Lin

發表於

2017-04-25

更新於

2023-01-18

許可協議

 

評論

追蹤

廣告

連結

×