Android ConstraintLayout 布局解析

ConstraintLayout其实是一个升级版的RelativeLayout

ConstraintLayout 布局属性主要有位置控制，边界间距，水平对齐，偏移属性，设置宽高比，大小控制等

一、位置控制

app:layout_constraintLeft_toLeftOf  //我最左边的位置 在别人的左边，以下类似
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintRight_toRightOf

app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constraintBottom_toBottomOf

app:layout_constraintStart_toEndOf
app:layout_constraintStart_toStartOf
app:layout_constraintEnd_toStartOf
app:layout_constraintEnd_toStartOf

比如app:layout_constraintLeft_toLeftOf="parent"表示和父布局的左边对齐，也可以指定为@id/button1，就是和button1左对齐

二、边界间距

android:layout_margin=""    //表示四周边界为多少
android:layout_marginTop="" //表示距顶部边界为多少
android:layout_marginBottom=""
android:layout_marginLeft=""
android:layout_marginRight=""
android:layout_marginStart=""
android:layout_marginEnd=""

注意比如要举例父布局顶部10dp，首先要声明和父布局顶端对齐app:layout_constraintTop_toTopOf="parent"，之后再声明边距 android:layout_marginTop="10dp"

三、水平对齐

app:layout_constraintBaseline_toBaselineOf="@id/main_btn_expendView1"

针对上面三点举个例子：

<Button
        android:id="@+id/main_btn_expendView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="10dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="10dp"
        android:text="ExpendView1"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/main_btn_groupView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@id/main_btn_expendView1"
        app:layout_constraintRight_toLeftOf="@id/main_btn_expendView1"
        app:layout_constraintLeft_toLeftOf="parent"
        android:text="GroupView2"
        android:textAllCaps="false"/>

之后如果你想让GroupView2按钮充满ExpendView1的左侧，就不能使用warp_content/固定值等，因为我们为控件添加的约束都是约束“Constraint”，这个约束有点像橡皮筋一样会拉这个控件，但是并不会改变控件的尺寸，所以这时候应该将GroupView2的宽度设置为 ‘0’（android:layout_width="0dp"）

扫描二维码关注公众号，回复： 1723487 查看本文章

四、偏移属性

 layout_constraintHorizontal_bias    （水平方向偏移）（范围0-1）
 layout_constraintVertical_bias      （垂直方向偏移）（范围0-1）

不过这两个属性要配合以下等约束使用

app:layout_constraintLeft_toLeftOf=”parent” 
app:layout_constraintRight_toRightOf=”parent” 
app:layout_constraintTop_toTopOf=”parent” 
app:layout_constraintBottom_toBottomOf=”parent”

即如果在竖直方向偏移，就要设置该控件的上下边界，此偏移属性才会生效

比如新增一个按钮，在GroupView2下方，同时水平向右偏移0.05

如果只指定上下边界

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

则会在中间

此时在加入偏移属性app:layout_constraintHorizontal_bias="0.05"

五、设置宽高比

app:layout_constraintDimensionRatio

注意：需要把宽（layout_width）或者高（layout_height）其中的一个设置为0dp

举个例子：

<Button
        android:id="@+id/main_btn_WH"
        android:layout_width="0dp"
        android:layout_height="120dp"
        app:layout_constraintTop_toBottomOf="@id/main_btn_rewriteView3"
        app:layout_constraintDimensionRatio="W,2:1"
        android:text="WH"/>

其中:app:layout_constraintDimensionRatio="W,2:1",也可以改为app:layout_constraintDimensionRatio="2:1"

默认是W：H

当然也可以指定为H:W，如下

app:layout_constraintDimensionRatio="H,2:1"

六、大小控制

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

1. 实现水平方向线性布局，所有View都必须设置左右边界控制属性，而且相互控制

2. 实现竖直方向线性布局，所有View都必须设置上下边界控制属性，而且相互控制

2. 实现比重大小控制，必须设置 layout_width=”0dp”

举例：

设置横向三个Button，比例为2:1:2

此时这三个Button成为一条链，在这个链的最左侧的元素成为链头，我们可以在链头设置风格

app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle=""

spread 元素将被展开（默认样式）

spread_inside 类似，但链的端点将不会扩展

packed 链的元素将被打包在一起。孩子的水平或垂直偏差属性将影响包装元素的定位

Android ConstraintLayout 布局解析

猜你喜欢