一篇搞懂ConstraintLayout布局

ConstraintLayout 是Google新推的以一种布局，是结合了LinearLayout和RelativeLayout两者的优点，所以有些属性的使用方法和RelativeLayout一样的。ConstraintLayout还提供了可视化操作，不用写xml配置文件，只需要拖动就可以完成界面的绘制。

1.ConstraintLayout 可用的属性

layout_constraintLeft_toLeftOf //当前控件的左边和目标的左边对齐

layout_constraintLeft_toRightOf //当前控件的左边和目标的右对齐

layout_constraintRight_toLeftOf //当前控件的右边和目标的左边对齐

layout_constraintRight_toRightOf //当前控件的右边和目标的右边对齐

layout_constraintTop_toTopOf //当前控件的顶部和目标的顶部对齐

layout_constraintTop_toBottomOf //当前控件的顶部和目标的底部对齐

layout_constraintBottom_toTopOf //当前控件的底部和目标的顶部对齐

layout_constraintBottom_toBottomOf //当前控件的底部和目标的底部对齐

layout_constraintBaseline_toBaselineOf //当前控件的基准线和目标的基准线对齐

layout_constraintStart_toEndOf //当前控件的开始和目标的结束对齐

layout_constraintStart_toStartOf //当前控件的开始和目标的开始对齐

layout_constraintEnd_toStartOf //当前控件的结束和目标的开始对齐

layout_constraintEnd_toEndOf //当前控件的结束和目标的结束对齐

看到这个肯定一脸懵逼，我们用这些属性，实现常见的布局。

1.1 居左

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

1.2 居右

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

1.3 居中

水平居中

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

垂直居中

<android.support.constraint.ConstraintLayout ...>
    <Button android:id="@+id/button" ...
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</ConstraintLayout>

两者结合起来就是水平和垂直居中

1.4 bias

若你想居中后，但是偏移点，你可以使用
- layout_constraintHorizontal_bias //水平方向
- layout_constraintVertical_bias //垂直方向

偏移值没有占比好理解点。翻译成占比，值默认0.5，若是水平方向，说明左右各占50%，若小于0.5，则是左边占比a%，若大于0.5则向右占比a%(a为偏移值)，两边占比之和是100》

app:layout_constraintHorizontal_bias=“0.3”//左边占比30

居底，居顶，居左，居右，只需要单独使用其中一个属性即可。比如居右：

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

1.5 layout_constraintBaseline_toBaselineOf

这个属性是基准线对齐，那基准线定义在哪呢，见下图：

一篇搞懂ConstraintLayout布局

2.GONE属性

在实际的项目中，可能会遇到，约束目标View.GONE，这时候可以用下面的属性：

layout_goneMarginStart

layout_goneMarginEnd

layout_goneMarginLeft

layout_goneMarginTop

layout_goneMarginRight

layout_goneMarginBottom

这个属性就不细讲了，因为针对依赖的对象Gone的情况下。

3.圆形布局

layout_constraintCircle : //圆点
layout_constraintCircleRadius: //半径
layout_constraintCircleAngle : //放置相对角度

一篇搞懂ConstraintLayout布局

一篇搞懂ConstraintLayout布局

代码如下：

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="button"
        app:layout_constraintCircle="@id/textView2"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="40dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="button"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

4.ratio

ConstraitLayout 提供控件的比例属性，必须约束宽或者高，即设置为0，让后通过下面属性设置比例。

layout_constraintDimensionRatio

具体使用如下:

<Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="0dp" //约束高
        android:layout_marginTop="16dp"
        android:text="button"
        app:layout_constraintDimensionRatio="18:9" //ratio属性
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="parent" />

Chains

这个属性是ConstraintLayout独有的属性，但类似于LinearLayout中的weightSum的概念，实现按比列显示等功能，有两个属性，layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle，这三个属性对应值有三个

CHAIN_SPREAD --空间展开显示

Weighted chain – 按照分配的权重显示大小

CHAIN_SPREAD_INSIDE – 首尾都靠边

CHAIN_PACKED – 控件为是为一组

看示意图。

切记：这种布局实现的关键点在于控件之间的依赖要是双向的。

一篇搞懂ConstraintLayout布局

spread_inside的效果：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        app:layout_constraintVertical_chainStyle="spread_inside"
        android:text="比例1"
        app:layout_constraintBottom_toTopOf="@+id/btn2"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintVertical_chainStyle="packed"
        android:text="比列2"
        app:layout_constraintBottom_toTopOf="@+id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/btn1" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        app:layout_constraintVertical_chainStyle="packed"
        android:layout_height="100dp"
        android:text="比列3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn2" />

</androidx.constraintlayout.widget.ConstraintLayout>

一篇搞懂ConstraintLayout布局

WeightChain实现：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="比例1"
        app:layout_constraintEnd_toStartOf="@id/btn2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="比列2"
        app:layout_constraintEnd_toStartOf="@id/btn3"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toEndOf="@id/btn1" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="比列3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintStart_toEndOf="@id/btn2" />
</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

一篇搞懂ConstraintLayout布局

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="比例1"
        app:layout_constraintBottom_toTopOf="@+id/btn2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintVertical_weight="1" />


    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:text="比列2"
        app:layout_constraintBottom_toTopOf="@+id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/btn1"
        app:layout_constraintVertical_weight="2" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="比列3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn2"
        app:layout_constraintVertical_weight="3" />

</androidx.constraintlayout.widget.ConstraintLayout>

一篇搞懂ConstraintLayout布局

参考：

Google ConstraintLayout

一篇搞懂ConstraintLayout布局

1.ConstraintLayout 可用的属性

1.1 居左

1.2 居右

1.3 居中

1.4 bias

1.5 layout_constraintBaseline_toBaselineOf

2.GONE属性

3.圆形布局

4.ratio

Chains

继续阅读

专访邓凡平：深入理解Android

与专家面对面：Android开发入门问与答

Android MVP架构MVCMVP

mvp初探

Android常用工具类简介目录

android常用工具类转载自：http://www.trinea.cn/android/android-common-utils/Android常用工具类

Android常用工具类ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解决 Failure [INSTALL_FAILED_OLDER_SDK] 问题

Android – ListView 中添加按钮，动态删除添加ItemView的操作

Kotlin的ListView与RecyclerView的简单应用

关于公司的那些坑：Android Studio篇

android SQLite事务和kotlin协程

无法正常编译错误Compilation failed to complete

关于Gradle配置的小结

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Android APK文件反编译Android APK文件反编译