Android ConstraintLayout 使用与适配（使用篇）

本文主要涉及以下几篇文章

Android 屏幕适配总结

Android ConstraintLayout 使用与适配（使用篇）

Android ConstraintLayout 使用与适配（适配篇）

Android 自动创建最小宽度限定符文件插件 AutoDimens​​​​​​​

前言：官方把 ConstraintLayout  扶正(取代以前五种布局方式，如项目创建即使用 ConstraintLayout  做根布局)好久了，但是一直没有当回事。最近重新关注了一下 Android 屏幕适配，现在官方推荐使用 ConstraintLayout 来解决适配的问题，因此好好看看了相关的文章。开始看的时候有些不习惯。原因是总以之前的五种布局思维去理解 ConstraintLayout，因此会很别扭。网上的相关文章大多也是这样对比讲解的。但我觉得应该完全抛弃以前的布局思维，以一种全新的思维方式去理解 ConstraintLayout 更合适，以下是我的理解方式：

一、使用

1.约束

    为控件添加一个约束很简单，只要选中控件，然后拖拽四个圆圈到想约束的控件即可，如下

图1

    约束是 ConstraintLayout 的核心概念，约束在 ConstraintLayout 中可以理解为一个控件(约束控件)与另一个控件(被约束控件)的位置关系。要决定 控件B 的位置，就要给 控件B 添加相对 控件A 的约束。控件A(约束控件)，控件B(被约束控件)。

    图1的操作中，ConstraintLayout 就是约束控件，Button 是被约束控件。当约束 Button 到 ConstraintLayout 右边时，Button 就被固定在了 ConstraintLayout  的右边。此时再约束 Button 到 ConstraintLayout 左边，就会产生水平方向的冲突(一个控件不能同时被固定在左右两边的位置，除非 Button 的大小与 ConstraintLayout 完全一样，否则无法同时满足这两个约束)。当发生这种冲突的时候，约束会自动进行处理，约束会自动把 Button控件 移动至两个约束的中间(即出现 Button 被居中的现象)，此时 Button控件 便可设置 Bias 属性，并在编辑区右边出现水平偏移轴，都是用来设置 Button控件 在水平方向位置的。如下图

2.Bias 属性

    在两个冲突约束出现时，可以设置 Bias 属性来控制控件在两个约束间的位置，取范围是 0 ~ 1 之间，可以使用小数，最终按设置值的百分比来进行位置定位。如 0.2 就是两个冲突约束的 20% 的位置，0.375 就是两个冲突约束的 37.5% 的位置。

    Bias 属性有两个：

        layout_constraintHorizontal_bias (水平轴)

        layout_constraintVertical_bias (垂直轴)

    当冲突约束发生，如果不设置 Bias 属性，会按默认值 50% 的方式进行摆放，即默认值为 0.5

    对图1设置 layout_constraintHorizontal_bias (水平轴) 为 0.275 的效果如下

    <Button
        ...
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.275"
        app:layout_constraintStart_toStartOf="parent"
        ... />

注：Bias 属性在实际使用中有一个小小的注意点，在 Android ConstraintLayout 使用与适配（适配篇） 说明这个问题。

3.圆形定位

    圆形定位比较好理解，即以一个控件为圆心，让其他控件以此控件为中心点进行圆形摆放，相关属性有三个

        layout_constraintCircle ：引用圆心部件的ID
        layout_constraintCircleRadius ：到圆心部件中心的距离
        layout_constraintCircleAngle ：当前部件相对圆心部件的角度（以度为单位，从0到360）

    下面是 6 个 ImageView 以 Button 为圆心半径是 100dp 分别以 60 度为倍数摆放的代码与样式

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

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintCircle="@+id/button"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="@+id/button"
        app:srcCompat="@android:drawable/btn_star_big_on" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintCircle="@+id/button"
        app:layout_constraintCircleAngle="60"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="@+id/button"
        app:srcCompat="@android:drawable/btn_star_big_on" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintCircle="@+id/button"
        app:layout_constraintCircleAngle="120"
        app:la