ConstraintLayout 使用初探

首先扯点别的:新版CSDN博客编辑器是真心难用。想把以前的文章改一改都不行。复制过来写。

ConstraintLayout（约束布局） 的优点:

1. 在创建复杂的布局页面的同时，依然能够保证扁平化的View层级（没有ViewGroup的嵌套）.
2. ConstraintLayout 类似于RelativeLayout,根据兄弟节点View之间的关系，View和父布局之间的关系来放置View.
3. 使用Android Studio的布局编辑器可以很方便的使用ConstraintLayout .

下面就开始使用
首先在你的module的build文件中添加依赖

dependencies {
    ...
    compile 'com.android.support.constraint:constraint-layout:1.1.3'
}

新建一个布局文件根节点选择ConstraintLayout，然后就可以愉快的使用了

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

水平居中

 <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="16dp"
        android:text="@string/centering"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

上面的例子是相对父控件水平居中。如果想调整水平方向上的偏移量，可使用app:layout_constraintHorizontal_bias属性。

例如设置，控件就会向左偏移。

app:layout_constraintHorizontal_bias="0.2"

相对于控件居中

<ImageView
        android:id="@+id/img_left"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.243"
        app:srcCompat="@drawable/lake" />


    <ImageView
        android:id="@+id/img_right"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginLeft="24dp"
        app:layout_constraintBottom_toBottomOf="@+id/img_left"
        app:layout_constraintLeft_toRightOf="@+id/img_left"
        app:layout_constraintTop_toTopOf="@+id/img_left"
        app:srcCompat="@drawable/ic_android_black_24dp" />

vertical_center.png

上面的例子中，img_right相对img_left在竖直方向上居中。

注意：以前一直以为只能是尺寸比较小的控件相对尺寸较大的控件来居中对齐，其实不然。尺寸较大的控件，也能相对于尺寸较小的控件居中对齐。

  <ImageView
        android:id="@+id/img_left"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginEnd="16dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="@+id/img_right"
        app:layout_constraintRight_toLeftOf="@+id/img_right"
        app:layout_constraintTop_toTopOf="@+id/img_right"
        app:srcCompat="@drawable/lake" />


    <ImageView
        android:id="@+id/img_right"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginEnd="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_android_black_24dp" />

center_location.png

上面的例子中，img_left相对img_right在竖直方向上居中。

使用比重

 <Button
        android:id="@+id/btn_a"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="a"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_b" />

    <Button
        android:id="@+id/btn_b"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="b"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_a"
        app:layout_constraintRight_toRightOf="parent" />

horizontal_weight.png

上面的例子中，A占比重2/3，B占比重1/3。

Guideline

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="a"
        app:layout_constraintRight_toLeftOf="@+id/guide_line" />

    <android.support.constraint.Guideline
        android:id="@+id/guide_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="b"
        app:layout_constraintLeft_toRightOf="@+id/guide_line" />

guilde_line.png

上面的例子展示了Guideline作为竖直方向上的分割线。然后A和B相对Guideline居中。

指定Guideline的偏移量。

app:layout_constraintGuide_percent="0.5"

如果你想明确指定Guideline的具体偏移量。

 <android.support.constraint.Guideline
        android:id="@+id/guide_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="100dp" />

上面的代码指定Guideline距离左边100dp。

指定宽高比
这是我最喜欢的一个特点。以前在展示图片的时候，必须动态在代码里设置ImageView的宽高比，很是麻烦。现在ConstraintLayout支持在布局文件中固定控件的宽高比，也是舒服。

 <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:contentDescription="@string/lake_tahoe_image"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@drawable/lake" />

ratio.png

上面的例子设置宽高比为16:9。使用设置比例的时候，至少有一个边的的取值是0dp。

app:layout_constraintDimensionRatio="h,16:9"

表示高度由宽度来决定。宽高比为16:9。

如果是

app:layout_constraintDimensionRatio="w,16:9"

则表示宽度由高度决定。宽高比是9:16。

圆形定位
Circular positioning（圆形定位）:可以将一个控件的中心以一定的角度和距离约束到
另一个控件的中心，相当于在一个圆上放置一个控件

    <Button
        android:id="@+id/btn_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginTop="100dp"
        android:text="A"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintCircle="@+id/btn_a"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp" />

circular_positioning.jpg

** Barrier**
Barrier 直译为障碍、屏障。在约束布局中，可以使用属性constraint_referenced_ids属性
来引用多个带约束的组件，从而将它们看作一个整体

 <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="姓名："
        app:layout_constraintBottom_toBottomOf="@+id/et_name"
        app:layout_constraintTop_toTopOf="@+id/et_name" />

    <TextView
        android:id="@+id/tv_contract"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="联系方式："
        app:layout_constraintBottom_toBottomOf="@+id/et_contract"
        app:layout_constraintTop_toTopOf="@+id/et_contract" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tv_name,tv_contract"
        app:barrierDirection="right"/>

    <EditText
        android:id="@+id/et_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="请输入姓名"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/et_contract"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="请输入联系方式"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_name" />

barrier.png

Group

Group 用于控制多个控件的可见性,如下，改变group的可见性，就可以引用的控件的可见性。

 <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="btn_f,btn_g"
        android:visibility="visible" />

    <Button
        android:id="@+id/btn_f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="32dp"
        android:layout_marginStart="32dp"
        android:text="F"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btn_g"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:text="G"
        app:layout_constraintLeft_toRightOf="@+id/btn_f"
        app:layout_goneMarginLeft="120dp" />

如果设置group可见性为gone，那么两个按钮都不可见。

 <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="btn_f,btn_g"
        android:visibility="gone" />

参考链接:
【0】google示例源代码
【1】http://blog.csdn.net/guolin_blog/article/details/53122387
【2】https://developer.android.com/training/constraint-layout/index.html
【3】https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html
ConstraintLayout总览