ConstraintLayout的用法

<span class="typ">ConstraintLayout</span> 相对于 <span class="typ">RelativeLayout</span>来说性能更好，布局上也更加灵活。在最新的Google Android开发文档中是推荐使用 <span class="typ">ConstraintLayout</span>的，下面来看看具体用法。

0x00 相对位置(Relative positioning)

这个比较简单，看图解释，假设控件B要放在控件A的右侧，可以使用 <span class="pln">layout_constraintLeft_toRightOf</span>属性。

1

2

3

< Button android:id="@+id/buttonA" ... />

< Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />

看图2可以了解控件约束属性代表的含义。

类似相对位置的约束属性有：

• <span class="pln">layout_constraintLeft_toLeftOf</span>
• <span class="pln">layout_constraintLeft_toRightOf</span>
• <span class="pln">layout_constraintRight_toLeftOf</span>
• <span class="pln">layout_constraintRight_toRightOf</span>
• <span class="pln">layout_constraintTop_toTopOf</span>
• <span class="pln">layout_constraintTop_toBottomOf</span>
• <span class="pln">layout_constraintBottom_toTopOf</span>
• <span class="pln">layout_constraintBottom_toBottomOf</span>
• <span class="pln">layout_constraintBaseline_toBaselineOf</span>
• <span class="pln">layout_constraintStart_toEndOf</span>
• <span class="pln">layout_constraintStart_toStartOf</span>
• <span class="pln">layout_constraintEnd_toStartOf</span>
• <span class="pln">layout_constraintEnd_toEndOf</span>

0x01 外边距(Margins)

这个属性也好理解，看图3

可以通过以下属性设置一个控件相对另一个控件的外边距：

• <span class="pln">android<span class="pun">:<span class="pln">layout_marginStart</span></span></span>
• <span class="pln">android<span class="pun">:<span class="pln">layout_marginEnd</span></span></span>
• <span class="pln">android<span class="pun">:<span class="pln">layout_marginLeft</span></span></span>
• <span class="pln">android<span class="pun">:<span class="pln">layout_marginTop</span></span></span>
• <span class="pln">android<span class="pun">:<span class="pln">layout_marginRight</span></span></span>
• <span class="pln">android<span class="pun">:<span class="pln">layout_marginBottom</span></span></span>

属性值必须是大于或者等于0。

接一下看一个 <span class="typ">RelativeLayout</span> 没有的属性：

当一个相对的控件隐藏时， <span class="typ">ConstraintLayout</span>也可以设置一个不同的边距：

• <span class="pln">layout_goneMarginStart</span>
• <span class="pln">layout_goneMarginEnd</span>
• <span class="pln">layout_goneMarginLeft</span>
• <span class="pln">layout_goneMarginTop</span>
• <span class="pln">layout_goneMarginRight</span>
• <span class="pln">layout_goneMarginBottom</span>

具体的栗子下面会讲到。

0x03 Centering positioning and bias

居中以及设置偏差

1

2

3

4

5

< android.support.constraint.ConstraintLayout ...>
< Button android:id="@+id/button" ...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;

<!--</code--><code class="html keyword">android.support.constraint.ConstraintLayout</code><code class="html plain">></code>

还可以设置bias属性，表示子控件相对父控件的位置倾向，可以使用属性：

• <span class="pln">layout_constraintHorizontal_bias</span>
• <span class="pln">layout_constraintVertical_bias</span>

假设设置控件A相对父控件横向偏差是30%：

1

2

3

4

5

6

< android.support.constraint.ConstraintLayout ...>
< Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>

<!--</code--><code class="html keyword">android.support.constraint.ConstraintLayout</code><code class="html plain">></code>

0x04 弧形定位(Circular positioning)

这个属性是在1.1版本添加的。

可以使用属性有：

• <span class="pln">layout_constraintCircle</span> : 相对控件的id
• <span class="pln">layout_constraintCircleRadius</span> : 相对控件中心的距离，也就是圆的半径
• <span class="pln">layout_constraintCircleAngle</span> : 相对夹角 (从 0 ~ 360度)

例如，图6代码示例

1

2

3

4

5

< Button android:id="@+id/buttonA" ... />

< Button android:id="@+id/buttonB" ...
app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />

0x05 Visibility behavior

一般情况下，设置 <span class="pln">GONE</span>属性后，控件就不会出现在布局中了，B控件对A控件的margin属性也就没有作用了。

但是 <span class="typ">ConstraintLayout</span> 能对已经设置 <span class="pln">GONE</span>属性的控件进行特殊处理。当A控件设置 <span class="pln">GONE</span>之后，A控件相当于变成了一个点， B控件相对于对A的约束仍然是起作用的。图7的代码示例，A控件设置成了 <span class="pln">GONE</span>,当B控件的 <span class="pln">margin</span>属性还是有作用的。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

< android.support.constraint.ConstraintLayout ...>
< Button
android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button A"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent" />
<!--当A控件设置Gone之后，B控件的margin属性是起作用的，即左边距还是30dp-->
< Button
android:id="@+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:text="button B"
app:layout_constraintLeft_toRightOf="@+id/buttonA" />

<!--</code--><code class="html keyword">android.support.constraint.ConstraintLayout</code><code class="html plain">></code>

然而有时候， B控件是不希望相对于隐藏控件的属性还起作用。这时候可以用到上面 0x02提到的 <span class="pln">goneMargin</span>属性。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

< android.support.constraint.ConstraintLayout ...>
< Button
android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button A"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent" />
<!--当A控件设置Gone之后，希望B控件的左边距为0dp，那么可以设置layout_goneMarginLeft属性-->
< Button
android:id="@+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:text="button B"
app:layout_goneMarginLeft="0dp"
app:layout_constraintLeft_toRightOf="@+id/buttonA" />

<!--</code--><code class="html keyword">android.support.constraint.ConstraintLayout</code><code class="html plain">></code>

0x06 尺寸约束(Dimensions constraints)

设置最小或最大尺寸

可以使用以下属性：

• <span class="pln">android<span class="pun">:<span class="pln">minWidth</span></span></span>
• <span class="pln">android<span class="pun">:<span class="pln">minHeight</span></span></span>
• <span class="pln">android<span class="pun">:<span class="pln">maxWidth</span></span></span>
• <span class="pln">android<span class="pun">:<span class="pln">maxHeight</span></span></span>

当 <span class="typ">ConstraintLayout</span>宽高设置为 <span class="pln">wrap_content</span>时，以上属性可以起作用。

设置百分比布局

当 <span class="typ">ConstraintLayout</span> 子布局的宽或高设置为0dp时，可以对宽或高设置百分比，例如设置一个按钮的宽是屏幕宽度的30%，那么可以这样处理：

1

2

3

4

5

6

7

8

9

10

11

< android.support.constraint.ConstraintLayout ...>
<!--按钮width属性设置为0dp,然后需要指定layout_constraintWidth_default，以及layout_constraintWidth_percent两个属性-->
< Button
android:id="@+id/buttonB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="button B"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.3" />

<!--</code--><code class="html keyword">android.support.constraint.ConstraintLayout</code><code class="html plain">></code>

设置宽度百分比布局：

1. <span class="pln">layout_width</span>或者 <span class="pln">layout_height</span> 设置为0dp
2. 设置 <span class="pln">layout_constraintWidth_default<span class="pun">=<span class="str">"percent"</span></span></span>或者 <span class="pln">layout_constraintHeight_default<span class="pun">=<span class="str">"percent"</span></span></span>
3. 通过 <span class="pln">layout_constraintWidth_percent</span>或者 <span class="pln">layout_constraintHeight_percent</span>指定百分比

设置宽高比例

当 <span class="pln">layout_width</span>或者 <span class="pln">layout_height</span>设置为0dp时，还可以通过 <span class="pln">layout_constraintDimensionRatio</span>设置宽高比例。该比例表示 <span class="pln">width<span class="pun">:<span class="pln">height</span></span></span>的值。

1

2

3

4

< Button
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />

当 <span class="pln">layout_width</span>与 <span class="pln">layout_height</span>都设置为0dp时，通过 <span class="pln">app<span class="pun">:<span class="pln">layout_constraintDimensionRatio</span></span></span> 指定宽高的比例。这时控件的宽高将按照该比例相对于父布局的大小设置宽高。

1

2

3

4

5

6

7

8

< android.support.constraint.ConstraintLayout ...>
< Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent" />

<!--</code--><code class="html keyword">android.support.constraint.ConstraintLayout</code><code class="html plain">></code>

<span class="pln">h<span class="pun">,<span class="lit">16<span class="pun">:<span class="lit">9</span></span></span></span></span>的含义是 <span class="pln">h<span class="pun">:<span class="pln">w<span class="pun">=<span class="lit">16<span class="pun">:<span class="lit">9</span></span></span></span></span></span></span> 也可设置 <span class="pln">w<span class="pun">,<span class="lit">9<span class="pun">:<span class="lit">16</span></span></span></span></span>效果是一样的。

0x07 Chains

在横轴或或者数轴上的控件相互约束时，可以组成一个 链式约束。

图9中，A控件与B控件相互约束，这就是一个简单的链式约束。

链头

Chain Style

可以通过 <span class="pln">layout_constraintHorizontal_chainStyle</span>或 <span class="pln">layout_constraintVertical_chainStyle</span>设置链式控件的样式。这个属性有点像 <span class="typ">LinearLayout</span>中的 <span class="pln">weight</span> 属性平分布局。

• <span class="pln">CHAIN_SPREAD</span>
• Weighted chain
• <span class="pln">CHAIN_SPREAD_INSIDE</span>
• <span class="pln">CHAIN_PACKED</span>

设置权重

• <span class="pln">layout_constraintHorizontal_weight</span>
• <span class="pln">layout_constraintVertical_weight</span>

0x08 引用

https://developer.android.com/reference/android/support/constraint/ConstraintLayout

Original: https://www.cnblogs.com/endv/p/16108342.html
Author: Endv
Title: ConstraintLayout的用法