约束布局使用

优点:

ConstraintLayout之所以成为目前Android开发中主流的布局，除了官方建议使用ConstraintLayout外还有以下几个方面的优势:

• 功能强大，ConstraintLayout几乎能实现其他布局所有的功能
• 能减少布局层次的嵌套，有性能的优势
• 可视化操作的增强，大部分界面用ConstraintLayout都能通过可视化编辑区域完成

基本属性

这些属性既可以用于父布局与里面组件的约束,也可以是组件与组件之间的约束.

• app:layout_constraintBottom_toBottomOf="parent" 底部约束
• app:layout_constraintEnd_toEndOf="parent" 右边约束
• app:layout_constraintStart_toStartOf="parent" 左边约束
• app:layout_constraintTop_toTopOf="parent" 顶部约束

基本原理

这些属性的基本原理就是,一个组件的底部与指定约束组件对其,依次类推差不多就是这样.

• 上下约束需要使得两个组件水平需要对齐,如图

• 左右约束就需要使得两个组件垂直对其

Chains链

在LinearLayout布局中weight属性能够实现子控件讲父布局的控件按比例分配，在ConstraintLayout 中通过Chains链也能够实现相同的功能，而且Chains链的功能比LinearLayout布局中weight属性功能更加强大。

基本使用

Chains链的基本用法如下：选中多个控件，右键Chains->Create Horizontal Chains 即可将父布局的剩余空间进行均匀分布。

分类

Chains链对父控件的剩余空间有三种分配方式，即Spread、spread inside、packed，默认值是Spread也就是在链上的所有组件都平均分配空间.

链的第一个元素称为链头，可以通过设置layout_constraintHorizontal_chainStyle来控制链的分布形式.

spread

默认模式,分布样式如上图

spread_inside

如图，和spread的区别是没算两端的约束

packed

所有元素挤在中间,也可以配合使用bias来改变位置偏移，在链头设置bais

例子:

<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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button2" />


</androidx.constraintlayout.widget.ConstraintLayout>

约束尺寸

大概就是通过设置控件的长度或者宽度为0,然后通过约束来控制宽高大小,下面是一个事例

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

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@color/design_default_color_primary_variant"
        android:text="底部banner"
        android:gravity="center"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="顶部fragment"
        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

大概就是顶部fragment通过底部与底部导航栏的顶部约束对齐,实现长度拉伸改变.

百分比布局

ConstraintLayout 还支持控件的尺寸按照父布局尺寸的百分比来设置,使用前提是修改宽高为0

• app:layout_constraintWidth_percent 宽度占父布局百分比比例
• app:layout_constraintHeight_percent 高度占父布局百分比比例

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


    <TextView
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/design_default_color_primary_variant"
        android:textColor="#FFFFFF"
        android:gravity="center"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Ratio(宽高比例)

给图片宽度设置match_parent,高度设置成约束尺寸0dp，然后再添加一个layout_constraintDimensionRatio属性，属性的值可以设置h,16:9 其中h表示高宽比的比值，也可以设置成将值设置w,9:16，w表示宽高比的比值。

示例:

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


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="w,9:16"
        android:background="@drawable/ic_launcher_background"
        tools:ignore="MissingConstraints"
        android:contentDescription="@string/app_name" />
</androidx.constraintlayout.widget.ConstraintLayout>

圆形定位

概念

这个定位大概就相当于将一个控件放在另一个控件的中心,然后通过控制角度以及距离中心的距离来实现定位.

• ayout_constraintCircle：决定选择哪一个控件作为中心.
• layout_constraintCircleRadius：到另一个控件中心的距离。
• layout_constraintCircleAngle：控件的角度（顺时针，0 - 360 度）。

示例

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintCircle="@id/buttonA"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="150dp"
        tools:ignore="MissingConstraints" />



</androidx.constraintlayout.widget.ConstraintLayout>

Group

Group 可以对一组的控件同时设置其可见性的值Visible、Invisible或者Gone(不可见,占位置)(不可见,不占位置)。
其使用方法如下：在布局中右键添加Group,再将一组控件拖动到Group中，通过控制Group的属性来调节一组控件的可见性。

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main"
    tools:context=".MainActivity">


    <androidx.constraintlayout.widget.Group
        android:id="@+id/group4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/design_default_color_primary"
        android:visibility="visible"
        app:constraint_referenced_ids="buttonA,buttonB" />

    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintBottom_toBottomOf="@id/buttonA"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

偏移

也就是控件在水平和垂直在父布局中距离的百分比.

• layout_constraintHorizontal_bias 水平偏移取值0~1
• layout_constraintVertical_bias 竖直偏移取值0~1

案例

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/btnB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        android:textColor="@color/white"
        android:textSize="33sp"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintVertical_bias="0.2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Guideline的使用

他是约束布局的一个工具类,是一种引导线,用于帮助我们进行早先的排版,并且我们可以使得控件的约束为这些引导先

基本属性

① 方向属性 : android:orientation=“horizontal” ; 取值 horizontal / vertical ;

② 开始尺寸定义 : app:layout_constraintGuide_begin=“22dp” ; 取值 dp 尺寸值 ; 距离 顶部 ( 水平 ) , 左侧 ( 垂直 ) 位置 ;

③ 结束尺寸定义 : app:layout_constraintGuide_end=“20dp” ; 取值 dp 尺寸值 ; 距离 底部 ( 水平 ) , 右侧 ( 垂直 ) 位置 ;

④ 百分比位置定义 : app:layout_constraintGuide_percent=“0.5” ; 取值 0 ~ 1.0 之间的小数 ;

基本使用

<?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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="227dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="312dp" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="60dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/guideline5"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.477" />
</androidx.constraintlayout.widget.ConstraintLayout>

Barrier的使用

它的作用是将多个控件放进一个里面进行约束,并使得其他控件可以同时对放在里面的那一组控件进行共同约束,也就是说将多个控件放进一个集合里面,然后其他控件用那个集合进行约束,也就是相当于与多个控件进行同一种约束

基本属性

barrierDirection通过它设置barrier的约束方向.

简单使用

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="28dp"
    android:text="TextView"
    app:layout_constraintLeft_toRightOf="@+id/barrier7"
    tools:layout_editor_absoluteY="64dp"
    tools:ignore="MissingConstraints" />

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="right"
    app:constraint_referenced_ids="button16,button17" />

<Button
    android:id="@+id/button16"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteX="1dp"
    tools:layout_editor_absoluteY="16dp" />

<Button
    android:id="@+id/button17"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteX="1dp"
    tools:layout_editor_absoluteY="78dp" />

结果:

之后不管你咋改变barrier的里面的属性,barrier外面的控件始终都会以barrier为约束.