ConstraintLayout使用

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

ConstraintLayout（约束布局）的优点：

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

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

dependencies {
    ...
    implementation '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>

相对父布局水平居中

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

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

这两组属性都可以。

 <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。

app:layout_constraintDimensionRatio="h,16:9"

设置比例的时候,我们把基准边叫A,被基准边确定尺寸的边叫B。我们有一个规则：B的尺寸必须设置为'0dp'。才可以正确设置比例。

在上面的例子中，我们改变一下控件的宽度为200dp。

    <ImageView
        android:layout_width="200dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="200dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/lake"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
16_9.png

我们接下来使用高度来决定宽度，宽高比设置为1:2。这个时候宽度尺寸要设置为0dp

     <ImageView
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@drawable/lake"
        app:layout_constraintDimensionRatio="w,1:2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

1_2.png

圆形定位
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属性
来引用多个带约束的组件，从而将它们看作一个整体

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".BasicActivity">

    <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_constraintStart_toStartOf="parent"
        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_constraintStart_toStartOf="parent"
        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:barrierDirection="right"
        app:constraint_referenced_ids="tv_name,tv_contract" />

    <EditText
        android:id="@+id/et_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="请输入姓名"
        app:layout_constraintLeft_toRightOf="@+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_toRightOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_name" />


</androidx.constraintlayout.widget.ConstraintLayout>
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" />

参考链接:

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容