Android基礎佈局之ConstraintLayout
Android基礎之佈局ConstraintLayout
Google I/O 2016 上釋出了 ConstraintLayout，據說很強大，那就一探究竟吧！
gradle配置
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta2'
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
這裡寫圖片描述
<!--如圖，左邊一個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
如上圖中，最左邊和最右邊的位置已經確定，B出現在A和C中間，但是如果我不想在中間怎麼辦（比如說我想靠右一點）
這裡引入2個偏移屬性
layout_constraintHorizontal_bias（水平方向偏移）（範圍0-1）
layout_constraintVertical_bias（垂直方向偏移）（範圍0-1）
1
2
怎麼理解？我只發圖不說話，看圖
如圖：B的水平偏移為0
這裡寫圖片描述
app:layout_constraintHorizontal_bias="0"
1
如圖：B的水平偏移為0.5
這裡寫圖片描述
app:layout_constraintHorizontal_bias="0.5"
1
如圖：B的水平偏移為0.7
這裡寫圖片描述
app:layout_constraintHorizontal_bias="0.7"
1
如圖：B的水平偏移為1
這裡寫圖片描述
app:layout_constraintHorizontal_bias="1"
1
總結：（明白了嗎？不明白請繼續看圖），
1.通過8個邊界約束屬性可以固定View的最左邊、最右邊、最上面、最下面的位置
2.通過設定偏移屬性，可以控制View在邊界範圍移動，最左邊是0，最右邊是1，中間是0.5
3.當設定了邊界約束屬性後，View會自動出現在中間，也就是說，預設的偏移屬性是0.5
二、大小控制
先介紹兩個佈局大小控制屬性
layout_constraintHorizontal_weight //水平方向上比重，類似線性佈局
layout_constraintVertical_weight //垂直方向上比重，類似線性佈局
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
效果如下(效果圖中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
效果圖如下：
這裡寫圖片描述
三、位置控制補充
絕對座標：父佈局左上角預設為（0，0），這個座標是是相對於父佈局左上角的座標
layout_editor_absoluteX 絕對座標x
layout_editor_absoluteY 絕對座標y
1
2
當設定了左邊界控制屬性，x絕對座標失效，請使用基礎佈局的（layout_marginLeft替代）
當設定了上邊界控制屬性，y絕對座標失效，請使用基礎佈局的（layout_marginTop替代）
因此，，絕對座標。。不好適配，也不好控制。差評。
另外附上一張
Android Studio 超智慧的控制設定圖，如下
這裡寫圖片描述
---------------------
作者：老司機-黃
來源：CSDN
原文：https://blog.csdn.net/h8800830/article/details/53014661
版權宣告：本文為博主原創文章，轉載請附上博文連結！