android ConstraintLayout 约束布局笔记这一篇就够了

1、基本属性

• 文字基线对齐属性

  • app: layout_constraintBaseline_toBaselineOf=“@id/username”
  • 文字对齐文字的基线，视觉上看起来好一些

• 偏移

  • 约束横向偏移量 0 - 1.0之间的小数
    • app:layout_constraintVertical_bias=“0” 垂直时候的偏移
    • app:layout_constraintHorizontal_bias=“1” 横向时候的偏移
  • 当一个控件两边给了约束之后，就居中了，但是可以用这个属性进行偏移
  • 情况1：都经过了两边AB的约束
  • 情况2：AB控件1:1大小的时候
  • 情况3：都经过了两边AB的约束，但是bias的控件非常长的时候
  • 情况4：当bias控件左边约束到底下更大的父控件的右边，bias控件右边约束到底下更大的父控件的左边时候，默认是居中的
  • 当bias控件左右或者上下都引用了同一个约束锚点的时候，bias是无效的
  • 

• 约束布局的margin要设置到有约束的那条边上，如果设置到没约束的那条边上是没有效果的

  • 

• 约束的控件不可见时，还想要margin

  • app: layout_goneMarginLeft=“30dp”
  • 当左边这个控件设置为gone不可见的时候起作用

• 只设置一边的宽或者高，让控件按照比例缩放

  • app:layout_constraintDimensionRatio=“1:1”

123

2、把一个控件浮动在另一个控件上

把悬浮控件的Top和Button全部附着在父控件的下边上

<?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/tv_Banner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="Banner"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_min="100dp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/cardview_shadow_start_color"
        android:gravity="center"

        android:text="按钮"
        app:layout_constraintBottom_toBottomOf="@id/tv_Banner"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="@id/tv_Banner"
        app:layout_constraintStart_toStartOf="@id/tv_Banner"
        app:layout_constraintTop_toBottomOf="@id/tv_Banner" />


</androidx.constraintlayout.widget.ConstraintLayout>

123

app:layout_constraintDimensionRatio=“1:1”

只设置一边的宽或者高，让控件按照比例缩放

3、辅助控件

3.1 Guideline 分割线

一种方便屏幕区域划分、辅助控件约束定位的看不见的线，当控件文字过长的时候，会把文字挤出去

1. Guideline作用
   • 控件可以定位到Guideline上面，用来辅助定位；
   • 可以把屏幕分成很多个区域，方便控件进行约束；
   • Guideline是不可见的（draw方法中没有写任何内容），方便给整体布局进行分区定位约束；
   • 把屏幕分成几份可以实现百分比效果
2. Guideline宽高设置是没有用的
3. Guideline最重要的四个属性，后三个只可以使用一个
   • 朝向orientation；
   • app:layout_constraintGuide_begin 从开始位置往后多少dp；
   • app:layout_constraintGuide_end 从结束为止往前多少dp；
   • app:layout_constraintGuide_percent 百分比；
   • 
4. Guideline应用场景
   • 登陆页面的快速登录图标布局
   • 登录页面的划分多少份后可以实现百分比效果
5. Guideline使用app:layout_constraintGuide_percent 百分比属性完全可以作为百分比布局使用

3.2 Barrier 可变长分割线

一种方便屏幕区域划分、辅助控件约束定位的看不见的线，相对于Guideline优点是当控件文字过长的时候，使用Barrier的会自动变大，不会把文字挤出去

适用于多语言版本的app

1. Barrier的作用
   • 辅助控件定位
   • 不会把控件文字顶出去
   • 会随着控件的变大而变大
2. 宽和高属性设置是没有用的
3. 三个重要属性
   • 朝向orientation；
   • app: barrierDirection=“start 或者 end” 选择推着哪一部分的控件
   • app:constraint_referenced_ids=“控件1的id, 控件2的id” 引用的控件id们；
   • 
4. 应用场景
   • 多语言版本的app

3.3 Placeholder 占位符（不常用）

给未来预留的控件占位置的

• Placeholder重要属性
  • app: content=“@+id/控件id”
  • 这个控件id为引入incloud的布局中同样的控件id
  • 当Placeholder的content里面的控件id和incloud之后的布局的id一致时候，默认就把incloud里面的id的控件替换到placeholder里面去
  • 不太好用

3.4 Group 分组

1. 作用
   • 将控件分组，统一控制一些visibility之类的属性变化
2. 重要属性
   • app: constraint_referenced_ids=“控件1的id，控件2的id，控件3的id”
   • 

4、chainStyle 链：模拟线性布局

4.1 四种属性的链模式

• spread 居中分布
  • 
  • 
• spread_inside 两边对齐
  • 
  • 
• packed 挤在一起
  • 
  • 
• spread+weight=“1” 占满分布
  • 
  • 
  • app: layout_constraintHorizontal_weight=“1” 给每一个链的view都设置
  • app: layout_constraintHorizontal_chainStyle=“spread” 给链的头部view设置

4.2 链的前提

ABC三个TextView控件横向排列，A的左边约束到parent的左边，A的右边约束到B的左边，B的左边约束的A的右边，以此类推连接成一个链。

5、Circle 圆：圆形定位

5.1 圆形定位的三个必要属性

• app:layout_constraintCircle=“@id/圆心控件的id”
  • 设置圆心控件
• app:layout_constraintCircleAngle=“30” 旋转角度
  • 设置旋转角度
• app:layout_constraintCircleRadius=“50dp” 半径
  • 设置距离圆心的半径

5.2 使用方式

<TextView 
  style="@style/constraint_text"
	android:text="1" 
	app:layout_constraintCircle="@id/text0"
	app:layout_constraintCircleAngle="30" 
	app:layout_constraintCircleRadius="50dp"
	app:layout_constraintDimensionRatio="1:1" 
	app:layout_constraintStart_tostartof="parent"
	app:layout_constraintTop_toTopof="parent" />

6、Flow 流：模拟表格布局

• 要流动的控件们的ids
  • app:constraint_referenced_ids=“控件1的id, 控件2的id” 引用的控件id们；
• 最大元素个数
  • app:flow_maxElementsWrap=“3”
  • 如果控件宽度放不下就达不到每行设置的最大元素
• 对齐的模式
  • app:flow_wrapMode=“aligned”
    • aligned 一条线，不够了就换行
      • 
    • chain 适应对齐
      • 设置最大4个的时候
      • 
      • 设置最大5个的时候
      • 
    • none 不设置，默认一条线不换行
      • 
• 2
  • app: flow_verticalGap=“5dp”
• 3
  • app:flow_horizontalGap=“5dp”
• 4
  • app:flow_verticalStyle=“packed”

7、约束布局大小尺寸的控制

7.1 约束布局中的包裹内容的特性

当TextView控件左右约束了后，TextView宽度设置为wrap_content 的时候如果内容没超出便会居中，如果超出了，会往两边挤出去，如果不需要挤出去就需要添加**app: layout_constrainedwidth=“true”**属性

7.2 约束0dp的三个属性

• 当TextView的layout_width设置为0dp后，内容不超出控件，默认的是app:layout_constraintwidth_default="spread”的效果 上图第二种spread效果
  • 
• 当TextView的layout_width设置为0dp后，内容超出了控件，使用了app:layout_constraintwidth_default="wrap"属性后，就会把内容包裹住，不会挤压出去，就是上图第三种效果
  • 
• 如果想要TextView包裹就要设置为app: layout_constraintwidth_default="wrap"设置为warp就会出现上图第一种效果
  • 
• 还可以使用百分比app:layout_constraintwidth_percent=“0.9”，就是上图第四种效果
  • 

8、按照比例进行布局

给一个控件添加app:layout_constraintDimensionRatio="1:1"他就是个正方形

app:layout_constraintDimensionRatio="16:9"就是一个16比9的长方形

9、最大最小宽高的两种设置属性

分为两种 一种是 android下面的，另一种是app下面的

android下面的对普通控件生效，不对自定义view生效

app下面的对自定义view生效

• andrdid: minWidth=“100dp”

  • 设置最小宽度
  • 自定义控件不管用

• android: maxWidth="200dp

  • 设置最大宽度

• app:layout_constraintWidth_min=“300dp” 并且 layout_width=“0dp”

  • 自定义控件适用 最小宽度为 300
  • 前提是layout_width为0dp
  • 也要设置app:layout_constraintwidth_default=“wrap”

• app:layout_constraintwidth_default="spread"的时候 或者 设置app:layout_constraintwidth_percent百分比的时候

  • 设置android: maxWidth 是无效的
  • 只有使用app下面的app:layout_constraintWidth_min 才有效果

10、约束布局2.0新效果

开放了ConstraintHelper约束帮助，可以自己编辑了，类似于Guideline同类

可以自己继承这个类实现动画然后引入到xml约束布局中

layer的讲解

http://www.zyiz.net/tech/detail-141054.html

https://juejin.cn/post/6844904199004618765

MotionLayout

https://www.jianshu.com/p/f5514bf4b410

https://www.bilibili.com/video/BV1nV411k7B5?spm_id_from=333.337.search-card.all.click

矢量绘图教程

https://www.bilibili.com/video/BV1Mz4y1X7XU?spm_id_from=333.999.0.0