Android基礎之布局ConstraintLayout

標籤：ret   href   horizon   完整   tool   traints   而且      scroll   

Google I/O 2016 上發布了 ConstraintLayout，據說很強大，那就一探究竟吧！

gradle配置

      compile ‘com.android.support.constraint:constraint-layout:1.0.0-beta2‘  

• 1

• 1

閱讀前提：熟悉四大基礎布局

一、位置控制

• 8個邊界控制屬性 
  註：最左邊表示可移動的最左邊，左邊表示View的左邊邊界

    app:layout_constraintLeft_toLeftOf     app:layout_constraintLeft_toRightOf 我最左邊的位置 在別人的右邊 下面的意思類似    app:layout_constraintRight_toRightOf     app:layout_constraintRight_toLeftOf    app:layout_constraintTop_toTopOf     app:layout_constraintTop_toBottomOf    app:layout_constraintBottom_toBottomOf    app:layout_constraintBottom_toTopOf

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

不明白沒關係，看例子。

* 例如：

    <!--，左邊一個A，右邊一個C，我如果想建立一個B在A C之間，如下-->     <Button        app:layout_constraintLeft_toRightOf="@+id/bt_a"        app:layout_constraintRight_toLeftOf="@+id/bt_c"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="B"/>    <!--字面理解：1.我最左邊的位置，在button A的右邊-->    <!--字面理解：1.我最右邊的位置，在button C的左邊-->

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

如中，最左邊和最右邊的位置已經確定，B出現在A和C中間，但是如果我不想在中間怎麼辦（比如說我想靠右一點）

• 這裡引入2個位移屬性

    layout_constraintHorizontal_bias（水平方向位移）（範圍0-1）    layout_constraintVertical_bias（垂直方向位移）（範圍0-1）  

• 1
• 2

• 1
• 2

怎麼理解？我只發圖不說話，看圖 
B的水平位移為0 

    app:layout_constraintHorizontal_bias="0"

• 1

• 1

B的水平位移為0.5 

    app:layout_constraintHorizontal_bias="0.5"

• 1

• 1

B的水平位移為0.7 

    app:layout_constraintHorizontal_bias="0.7"

• 1

• 1

B的水平位移為1 

    app:layout_constraintHorizontal_bias="1"    

• 1

• 1

總結：（明白了嗎？不明白請繼續看圖）， 
1.通過8個邊界約束屬性可以固定View的最左邊、最右邊、最上面、最下面的位置 
2.通過設定位移屬性，可以控制View在邊界範圍移動，最左邊是0，最右邊是1，中間是0.5 
3.當設定了邊界約束屬性後，View會自動出現在中間，也就是說，預設的位移屬性是0.5

二、大小控制

• 先介紹兩個布局大小控制屬性

    layout_constraintHorizontal_weight //水平方向上比重，類似線性布局    layout_constraintVertical_weight  //垂直方向上比重，類似線性布局

• 1
• 2

• 1
• 2

下面我將用ConstraintLayout來模仿一個水平方向的線性布局的例子

完整布局檔案：

    <?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:ignore="MissingConstraints">        <!--A邊界控制屬性 有 左 和 右-->        <Button            android:id="@+id/bt_a"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:text="A"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintLeft_toLeftOf="parent"            app:layout_constraintRight_toLeftOf="@id/bt_b"/>        <!--B邊界控制屬性 也有 左 和 右-->        <Button            android:id="@+id/bt_b"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:text="B"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintLeft_toRightOf="@id/bt_a"            app:layout_constraintRight_toLeftOf="@id/bt_c"/>        <!--C邊界控制屬性 只有右-->        <Button            android:id="@+id/bt_c"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:text="C"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintRight_toRightOf="parent"/>    </android.support.constraint.ConstraintLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

效果如下(中C明顯比較小，說明C 比重設定沒有效果) 

結論： 
1.實現水平方向線性布局，所有的View都必須設定左右邊界控制屬性，而且相互控制 
2.實現比重大小控制，必須設定layout_width=”0dp”

布局（能看懂基本上說明你已經掌握了比重控制）

    <?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:ignore="MissingConstraints">        <TextView            android:background="#0f0"            android:id="@+id/bt_a"            android:layout_width="0dp"            android:layout_height="0dp"            android:text="A"            app:layout_constraintBottom_toTopOf="@id/bt_b"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintLeft_toLeftOf="parent"            app:layout_constraintRight_toLeftOf="@id/bt_b"            app:layout_constraintTop_toTopOf="parent"            app:layout_constraintVertical_weight="1"/>        <TextView            android:background="#0f0"            android:id="@+id/bt_b"            android:layout_width="0dp"            android:layout_height="0dp"            android:text="B"            app:layout_constraintBottom_toTopOf="@id/bt_c"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintLeft_toRightOf="@id/bt_a"            app:layout_constraintRight_toLeftOf="@id/bt_c"            app:layout_constraintTop_toBottomOf="@id/bt_a"            app:layout_constraintVertical_weight="1"/>        <TextView            android:background="#0f0"            android:id="@+id/bt_c"            android:layout_width="0dp"            android:layout_height="0dp"            android:text="C"            app:layout_constraintBottom_toBottomOf="parent"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintLeft_toRightOf="@id/bt_b"            app:layout_constraintRight_toRightOf="parent"            app:layout_constraintTop_toBottomOf="@id/bt_b"            app:layout_constraintVertical_weight="1"/>    </android.support.constraint.ConstraintLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44

如下： 

三、位置控制補充

絕對座標：父布局左上方預設為（0，0），這個座標是是相對於父布局左上方的座標

    layout_editor_absoluteX 絕對座標x    layout_editor_absoluteY 絕對座標y

• 1
• 2

• 1
• 2

當設定了左邊界控制屬性，x絕對座標失效，請使用基礎布局的（layout_marginLeft替代） 
當設定了上邊界控制屬性，y絕對座標失效，請使用基礎布局的（layout_marginTop替代）

因此，，絕對座標。。不好適配，也不好控制。差評。

另外附上一張 
Android Studio 超智能的控制設定圖，如下

 

頂

4

 

踩

0

  

• 上一篇Android分享之時間日期轉換工具類DateTime
• 下一篇Android分享之Log工具類

    相關文章推薦

• • Android新特性介紹，ConstraintLayout完全解析
• • 有關Activity樣式 、狀態列透明、螢幕亮度問題應用情境及其總結
• • ConstraintLayout 的入門用法
• • Android ConstraintLayout 約束布局詳解
• • 曆久而新，我的新書《第二行代碼》已出版！

• • Android圖片載入架構最全解析（一），Glide的基本用法
• • android網路編程--從網路下載圖片，並儲存到記憶卡
• • 瞭解使用Android ConstraintLayout
• • Android ConstraintLayout詳解
• • 探索Android ConstraintLayout布局

  

猜你在找

Android基礎之布局ConstraintLayout