ConstraintLayout随笔

ConstraintLayout随笔

前言

ConstraintLayout是谷歌推出的布局，又叫做约束布局。

布局以曾经推出但未被推广的百分比布局为蓝本重新定义的布局。

布局适用性极广，但还不够成熟所以也有比较多的坑。

ConstraintLayout优势在于布局会随着界面的改变而自动适配。

1.    使用

约束布局中有很多种布局类型，适用于各种情况。

1.1圆形约束

顾名思义，以某个控件为圆心，约束圆弧上的某个控件。
示例：

<Button android:id="@+id/buttonB" 

      //引用的控件ID

      app:layout_constraintCircle="@+id/buttonA"

      //圆半径

      app:layout_constraintCircleRadius="100dp"

      //偏移圆角度  水平右方向为0逆时针方向旋转

      app:layout_constraintCircleAngle="45" />

 

使用场景较少，可适用于悬浮窗导航栏的展开等。

1.2线性约束

对控件的某一边进行约束：
//控件左边缘位于某个控件左边

app:layout_constraintLeft_toLeftOf

//控件右边缘位于某个控件右方

app:layout_constraintLeft_toLeftOf

//控件上边缘位于某个控件上方

app:layout_constraintLeft_toLeftOf

//控件下边缘位于某个看控件下方

app:layout_constraintLeft_toLeftOf

例如A位于B的右方，则

    <Button

        android:id="@+id/bt_A"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginLeft="16dp"

        android:text="A"

        app:layout_constraintLeft_toRightOf="@+id/bt_B"/>

 

    <Button

        android:id="@+id/bt_B"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="B"/>

总结为下划线前的位置为自身控件的某个边，下划线后为约束对象的某一边。

在约束布局中，宽高仍然会起作用。

宽高设置为0时，默认由约束条件决定宽高，例如

    <Button

        android:id="@+id/bt_A"

        android:layout_width="0dp"

        android:layout_height="0dp"

        android:text="A"

         app:layout_constraintRight_toRightOf="parent"

         app:layout_constraintLeft_toLeftOf="parent"

         app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintTop_toTopOf="parent"/>

代码中宽高设置为0，则由约束条件决定宽高，约束对象为父布局，则填充父布局。

若代码中宽高设置不为0，则约束条件仅决定位置，不影响宽高。

无论宽高是否设置为0，约束布局都生效。

约束布局中存在链式关系，即ABC三个控件相互约束形成一条链，这其中只要移动某一个控件，则会带动整体的移动。

类似图中这种链式关系，当你需要移动某一行的时候，只需要更改最左边的控件位置，则整行都会移动。

 

1.3百分比布局

    ·  layout_constraintWidth_min and layout_constraintHeight_min //设置最小尺寸

• layout_constraintWidth_max and layout_constraintHeight_max //设置最大尺寸
  • layout_constraintWidth_percent and layout_constraintHeight_percent //设置相对于父类的百分比

例如:

<Button

        android:id="@+id/bt_A"

        android:layout_width="0dp"

        android:layout_height="0dp"

        android:text="A"

        app:layout_constraintHeight_percent=“0.4”

         app:layout_constraintRight_toRightOf="parent"

         app:layout_constraintLeft_toLeftOf="parent"

         app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintTop_toTopOf="parent"/>

高度为父布局的十分之四，注意此属性仅在设置了对应的边的约束时生效，即若要设置高度百分比，则需要设置上下边的约束，而且控件宽高必须是0，若设置了其他宽高都会导致百分比属性设置无效。

1.4隐藏边距
     

layout_goneMarginStart

layout_goneMarginEnd

layout_goneMarginLeft

layout_goneMarginTop

layout_goneMarginRight

layout_goneMarginBottom

当约束对象设置为gone时，仍然生效的边距设置。

1.5比例布局

app:layout_constraintDimensionRatio="H,16:9"
    此布局属性为控件本身约束宽与高的比例，若设置宽高为0则某一边的约束会影响到另边，宽高比为16：9，使用此布局要保证宽或者高至少1个位0.

活用此属性可以解决大部分适配及控件变形的问题。例如ui给出的宽100px高120px的控件，可设置为H,5:6,然后设置某一边所占屏幕百分比。

 

1.6 Guideline

此控件为约束布局中附带的特殊控件，可以看成一条看不见的线，具有以下三种属性：

• layout_constraintGuide_begin 距离父容器起始位置的距离（左侧或顶部）
• layout_constraintGuide_end 距离父容器结束位置的距离（右侧或底部）
• layout_constraintGuide_percent 距离父容器宽度或高度的百分比

 

     <android.support.constraint.Guideline

        android:layout_width="wrap_content"

        android:orientation="vertical"

        app:layout_constraintGuide_begin="100dp"

        android:layout_height="wrap_content"/>

 

简单来说这就是一个类似房子地基的东西，在页面中不会显示，仅作为约束对象来使用，大大增加了约束布局的泛用性。

Orientation有垂直或水平两种方向设置，垂直或水平的不可见的线。

1.7Group

Group用于控制多个控件的可见性。

<android.support.constraint.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="item_1,item_2" />

对group进行显示与隐藏，则item_1和item_2都会被控制，需要注意的是，若一个空间被两个Group引用，则Group会失去效果。

总结

约束布局相对原本的线性布局相对布局等，更具有灵活性和开放性，控件本身不再被父布局所限制，代码不再嵌套多层，具有美观性。

相较原本的布局而言，从特性来看，可以将其他布局比喻成垒方块，而约束布局则是建房子。

但同时要注意的是约束布局需要对整体具有一定的把控性，若没有构思好整个架构就一路写到底，会导致整个布局一团乱麻，想调整一个小小的位置却因为相互约束而无从下手。