Android中约束布局(ConstraintLayout)细节使用_constraintlayout 权重

约束布局的使用

约束布局的使用可以提升app的性能，嵌套层级会明显减少。而且官方也推荐使用约束布局。不过也不是说现在所有情况下都用约束布局，这需要自己根据现实场景来判断。在下面的使用细节中会细说一下。

基本使用

约束布局的常用属性如下：

        // 常用属性
		 layout_constraintLeft_toLeftOf//目标view左边与另一个view左边对齐
         layout_constraintLeft_toRightOf//目标view左边与另一个view右边对齐
         layout_constraintRight_toLeftOf//目标view右边与另一个view左边对齐
         layout_constraintRight_toRightOf//目标view右边与另一个view右边对齐
         layout_constraintTop_toTopOf//目标view顶部与另一个view顶部对齐
         layout_constraintTop_toBottomOf//目标view顶部与另一个view底部对齐
         layout_constraintBottom_toTopOf//目标view底部与另一个view顶部对齐
         layout_constraintBottom_toBottomOf//目标view底部与另一个view底部对齐
         layout_constraintBaseline_toBaselineOf//基于baseline对齐
         layout_constraintStart_toEndOf//目标view起始边缘与另一个view结束边缘对齐
         layout_constraintStart_toStartOf//目标view起始边缘与另一个view起始边缘对齐
         layout_constraintEnd_toStartOf//目标view结束边缘与另一个view起始边缘对齐
         layout_constraintEnd_toEndOf//目标view结束边缘与另一个view结束边缘对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

以上是约束布局的基本属性，使用也是很简单，多练习就会使用了。

细节使用

1. 水平或者垂直方向想match-parent
举个例子：水平方向match-parent。首先 android:layout_width="0dp"需要设置为0dp，这个就是表示match-parent。其次需要设置：
layout_constraintLeft_toLeftOf =“parent”
layout_constraintLeft_toRightOf =“parent”
这里的parent可以换成你需要的父布局。对应的在垂直方向上match-parent也是同样的，就不赘述了。

2.约束布局中权重的使用

重点：使用约束布局的权重，控件之间需要两两关联，不然就算设置0dp还是没效果。
在约束布局中权重有：
app:layout_constraintHorizontal_weight=""
app:layout_constraintVertical_weight=""
第一个是在水平方向的权重，下面是在垂直方向上的权重。在设置权重时，如果只设置权重比例的话，是没有效果的，必须要给对应的方向设置为0dp，不然权重设置不会有效果，比如设置水平方向的权重，则要设置：android:layout_width=“0dp”。（这一点很重要，小编因为这个问题，折磨了好多次了，所以痛下决心要写一篇博客记录一下）。
实例
如下图的需求

上图的需求肯定需要使用权重来处理，不然下面对应数据就不好对齐。下面是对应的代码

 <android.support.constraint.ConstraintLayout
        android:id="@+id/bill_msg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/bill_num"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            android:text="@string/account_detail_orderNum"
            android:textColor="@color/pub_color_999999"
            android:gravity="center"
            android:textSize="@dimen/public_text_size_28px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1.5"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/order_time"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/order_time"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/account_detail_orderTime"
            android:gravity="center"
            android:textColor="@color/pub_color_999999"
            android:textSize="@dimen/public_text_size_28px"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1.25"
            app:layout_constraintLeft_toRightOf="@+id/bill_num"
            app:layout_constraintRight_toLeftOf="@+id/order_type"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/order_type"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/account_detail_orderType"
            android:gravity="center"
            android:textColor="@color/pub_color_999999"
            android:textSize="@dimen/public_text_size_28px"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@+id/order_time"
            app:layout_constraintRight_toLeftOf="@+id/pay_type"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/pay_type"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/account_detail_payType"
            android:gravity="center"
            android:textColor="@color/pub_color_999999"
            android:textSize="@dimen/public_text_size_28px"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@+id/order_type"
            app:layout_constraintRight_toLeftOf="@+id/order_money"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/order_money"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/account_detail_orderMoney"
            android:gravity="center"
            android:textColor="@color/pub_color_999999"
            android:textSize="@dimen/public_text_size_28px"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@+id/pay_type"
            app:layout_constraintRight_toLeftOf="@+id/pay_money"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/pay_money"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/account_detail_payMoney"
            android:gravity="center"
            android:textColor="@color/pub_color_999999"
            android:textSize="@dimen/public_text_size_28px"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@+id/order_money"
            app:layout_constraintRight_toLeftOf="@+id/handFee"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/handFee"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/account_detail_handFee"
            android:gravity="center"
            android:textColor="@color/pub_color_999999"
            android:textSize="@dimen/public_text_size_28px"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@+id/pay_money"
            app:layout_constraintRight_toLeftOf="@+id/account_money"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/account_money"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/account_detail_accountMoney"
            android:gravity="center"
            android:textColor="@color/pub_color_999999"
            android:textSize="@dimen/public_text_size_28px"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@+id/handFee"
            app:layout_constraintRight_toLeftOf="@+id/error_type"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/error_type"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="异常类型"
            android:gravity="center"
            android:textColor="@color/pub_color_999999"
            android:textSize="@dimen/public_text_size_28px"
            android:visibility="gone"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@+id/account_money"
            app:layout_constraintRight_toLeftOf="@+id/operate"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/operate"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/account_detail_operate"
            android:gravity="center"
            android:textColor="@color/pub_color_999999"
            android:textSize="@dimen/public_text_size_28px"
            android:layout_marginTop="@dimen/public_space_21px"
            android:layout_marginBottom="@dimen/public_space_30px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@+id/error_type"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

3.BIOS（间隙比例）
这也是一个十分好用的属性，属性如下所示：

layout_constraintHorizontal_bias //水平方向 
layout_constraintVertical_bias  //垂直方向
1
2

假设有一个控件，你想让他偏左一点，不使用此属性的话，会多写几句代码来控制，使用此属性就可以一句解决。


上面两个图片可以通过修改水平方向bias的值来改变

<TextView
        android:id="@+id/TextView1"
        ...
        app:layout_constraintHorizontal_bias="0.3"//或者0.6
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
1
2
3
4
5
6

总结

目前在开发中，以上问题遇到的比较多，其余的等后面遇到会及时更新。其实开发时，不要一味的使用约束布局，虽然此布局是官方推荐。建议根据情况来使用布局。在使用权重的时候一定要看上述的重点，不然就很难顶。使用的时候选一个好的“基点”这样可以少写一下margin_left之类的属性。