ConstraintLayout实例讲解

「爱情、让人受尽委屈。」 2022-05-29 04:28 1261阅读 0赞

转载请注明链接：[http://blog.csdn.net/feather\_wch/article/details/79585647][http_blog.csdn.net_feather_wch_article_details_79585647]

# ConstraintLayout实例讲解 #

版本: 2019/3/22(8:10)

--------------------

### 文章目录 ###

*  ConstraintLayout实例讲解
 *   *  1-相对定位属性
     *   *  基线对齐: toBaselineOf
         *  两侧间隙比例: bias(偏向某一边)
         *   *  垂直约束力
             *  水平约束力
         *  链式风格: Chains
     *  2-边距(Margin)
     *   *  可见性问题
         *  Gone Margin(根据约束的目标的可见性决定本身的外边距)
     *  3-控件宽高属性: width/height
     *   *  宽高比例约束
         *  强制约束wrap\_content(1.1.x)
         *  0dp时占据父布局剩余空间的百分比(1.1.x)
     *  4-圆形定位(1.1.x)
     *  5-虚拟视图
     *   *  Guideline(辅助线)
         *  Barrier(屏障)
         *  Group(分组)
         *  Placeholder
         *  Constraints
         *  虚拟视图的原理
     *  6-动画
     *   *  ConstraintSet
         *  TransitionManager
         *  实战
     *  7-优化Optimizer(1.1.x)
     *  ConstraintLayout 2.0
     *  ConstraintHelper
     *  Linear Helper
     *  Flow
     *  Post Layout effects
     *   *  Layers
     *  Circular Reveal
     *  Decorators
     *  Bottom Panel Decorator
     *  ConstraintSet
     *  8-实战
     *   *  实例1-三个图片都是3:4比例、最左最右间隔为5dp、中间间隔为10dp
     *  知识扩展
     *   *  Android Transition Framework
     *  参考和学习资料

## 1-相对定位属性 ##

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
    
    #用于LTR、RTL布局
    #LTR布局为例
    app:layout_constraintStart_toStartOf //左侧与目标左侧对齐
    app:layout_constraintStart_toEndOf   //左侧与目标右侧对齐
    app:layout_constraintEnd_toStartOf   //右侧与目标左侧对齐
    app:layout_constraintEnd_toEndOf     //右侧与目标右侧对齐

### 基线对齐: toBaselineOf ###

2、基线对齐属性

> 与另一个`TextView`中的文本的基线`对齐`

### 两侧间隙比例: bias(偏向某一边) ###

3、通过bias控制约束力，能决定原本居中的控件距离哪边更近

> 分为水平、垂直两个方向

#### 垂直约束力 ####

4、垂直约束力的属性为`app:layout_constraintVertical_bias`

5、控件放置在底部

> 等效于`控件垂直方向上，上侧空隙和下侧空隙比例为 100%：0%`

app:layout_constraintVertical_bias="1"

6、控件 放置在从上到下大概4/5处。

> 等效于`控件垂直方向上，上侧空隙和下侧空隙比例为 80%：20%`

app:layout_constraintVertical_bias="0.8"

#### 水平约束力 ####

7、水平约束力的属性为`app:layout_constraintHorizontal_bias`

### 链式风格: Chains ###

![约束链式风格][700]

1、链式风格的属性

app:layout_constraintHorizontal_chainStyle="spread | spread_inside | packed"
    app:layout_constraintVertical_chainStyle=""
    
    #spread：不填充型平分---上图第一种风格
    #spread_inside：不填充型平分，只有中间有间隙---上图第二种风格
    # 填充型平分-宽度0dp即可
    # 填充型加权平分(weight)---上图第三种风格
    #packed：集中式---上图第四种风格
    # 集中式bias平分---上图第四种

> 权重

# 加权重。只要有一个有权重，其他不加权重的权重都为0
    
    app:layout_constraintHorizontal_weight
    app:layout_constraintVertical_weight

> bias

# 1. 必须用于链式的第一个控件
    # 2. 必须packed风格
    # 3. 表明整个链的左侧占据剩余空间的比例，0.3 = 左侧只占据30% = 左侧:右侧 = 3:7
    
    app:layout_constraintHorizontal_bias
    app:layout_constraintVertical_bias

2、不填充型平分(spread-图1)

> 1.  该例程在`水平方向`形成`链式效果(层层约束)`，通过`app:layout_constraintHorizontal_chainStyle="spread"`属性。
> 2.  `注意在水平方向上宽度为固定值或者wrap_content`

3、不填充型平分-且只在中间有间隔(spread\_inside-图2)

> `实例1`中更改为`app:layout_constraintHorizontal_chainStyle="spread_inside"`即可

4、填充型平分(任何风格，控件都用0dp)

> 将上面实例中的`水平方向上的宽度`更改为`0dp`即可

5、填充型加weight权重平分(图3)

> 1.  `宽度为0dp`
> 2.  `app:layout_constraintHorizontal_weight="3"`指明水平方向`权重`
> 3.  `垂直方向同理`
> 4.  不加权重的默认为0

6、集中式(packed-图4)

> 1.  `宽度为wrap_content或者固定值`
> 2.  `第一个控件的chainStyle`为`packed`

7、bias平分的链式效果

> 1.  `链式的第一个控件`的`app:layout_constraintHorizontal_bias="0.3"`属性才有效。
> 2.  需要是`packed`的风格。
> 3.  `app:layout_constraintHorizontal_bias="0.3"`表明`整个链`的`左侧和右侧`的`比例为3:7`

## 2-边距(Margin) ##

3、边距属性，距离参照物的距离

# margin不需要解释
    android:layout_marginStart
    android:layout_marginEnd
    android:layout_marginLeft
    android:layout_marginTop
    android:layout_marginRight
    android:layout_marginBottom

### 可见性问题 ###

4、目标可见性问题，目标如果为GONE会化为一个点，且该目标控件的Margin属性失效

> 1.  控件A、控件B从左向右顺序排列
> 2.  A的MarginLeft = 10dp, B的MarginLeft = 30dp
> 3.  A为GONE之后，B的MarginLeft距离父布局左侧为30dp

// 原效果
    -控件A---控件B
    
    // 控件A GONE
    ---控件B

### Gone Margin(根据约束的目标的可见性决定本身的外边距) ###

5、Gone Margin属性

> 如果goneMargin相同方向的约束目标，该目标变成不可见。就会在该方向所有属性生效之后的位置上，通过该marigin值进行偏移。

layout_goneMarginStart
    layout_goneMarginEnd
    layout_goneMarginLeft
    layout_goneMarginTop
    layout_goneMarginRight
    layout_goneMarginBottom

## 3-控件宽高属性: width/height ##

1、控件的宽高属性

# 宽高。wrap_content、0dp、具体dp
    android:layout_width
    android:layout_height
    
    # 最小/最大宽高。在layout_width/height属性为wrap_content时生效
    android:minWidth
    android:maxWidth
    android:minHeight
    android:maxHeight

### 宽高比例约束 ###

2、控件的宽高还可以通过比例设定

> 1.  至少有一个`宽高`为`0dp`

# 指定宽高比
    app:layout_constraintDimensionRatio="16:1"

<table> 
 <thead> 
  <tr> 
   <th>设定方式</th> 
   <th>解释</th> 
   <th>layout_constraintDimensionRatio=“xxx”</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>浮点数</td> 
   <td>宽高比</td> 
   <td>0.3</td> 
   <td>宽为0.3,高为1</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>3</td> 
   <td>宽为3,高为1</td> 
  </tr> 
  <tr> 
   <td>比例</td> 
   <td>宽度/高度</td> 
   <td>16:9</td> 
   <td>宽为16,高为9</td> 
  </tr> 
  <tr> 
   <td>指定分子</td> 
   <td></td> 
   <td>W, 16:9 == 16:9</td> 
   <td>W指明 W:H = 16:9</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>H, 16：9</td> 
   <td>H指明 H:W = 16:9</td> 
  </tr> 
 </tbody> 
</table>

### 强制约束wrap\_content(1.1.x) ###

1、view的宽高如果为wrap\_content，并且内容特别长的时候会出现问题

# 正常场景
    |AAA-BBB-|
    
    # 控件B的内容特别长, 出现奇怪的错误
    |AAA-----|
    |-BBBBBBB|
    
    # 理想效果
    |AAABBBBB|

> 宽度为wrap\_content的控件B，内容过长，导致约束效果不理想  
> 示例: 可以看效果

2、解决wrap\_content问题的强制约束属性

> true: 进行强制约束  
> false: 默认效果

app:layout_constrainedWidth="true | false"
    app:layout_constrainedHeight="true | false"

### 0dp时占据父布局剩余空间的百分比(1.1.x) ###

1、控件宽高采用0dp时会占据父布局剩余空间，通过百分比决定占据多少空间

# 宽高必须为0dp
    # 居中，且占据百分之多少的空间
    app:layout_constraintWidth_percent="0~1"
    app:layout_constraintHeight_percent="0~1"
    
    # 百分比的基础上，最低宽高
    app:layout_constraintWidth_min="100dp"
    app:layout_constraintHeight_min="100dp"
    
    # 百分比的基础上，最高宽高
    app:layout_constraintWidth_max="200dp"
    app:layout_constraintHeight_max="200dp"

2、控件只占据父容器剩余空间的40%

app:layout_constraintWidth_percent="0.4"

# 当前效果，居中，且只有40%
    |---AAAA---|
    
    # 原效果
    |AAAAAAAAAA|

2、`app:layout_constraintWidth_default`的作用

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>wrap</td> 
   <td>等效于<code>android:layout_width="wrap_content"</code>【让layout_constraintWidth_percent属性失效】</td> 
  </tr> 
  <tr> 
   <td>percent</td> 
   <td>百分比属性生效</td> 
  </tr> 
  <tr> 
   <td>spread</td> 
   <td>等效于<code>android:layout_width="match_parent"</code>【默认】【目前和percent效果一样】</td> 
  </tr> 
 </tbody> 
</table>

## 4-圆形定位(1.1.x) ##

1、ConstraintLayout提供圆形定位的功能：以目标为圆形，360度定位

> 提供三个属性

# 参照的控件ID
    app:layout_constraintCircle
    
    # 距离圆心的半径
    app:layout_constraintCircleRadius
    
    # 旋转的角度。0~360顺时针。举例-0:正上方 90:正右方 180:正下方 270:正左方
    app:layout_constraintCircleAngle

## 5-虚拟视图 ##

### Guideline(辅助线) ###

1、Guideline能创建水平/垂直方向的准线

> 属性如下:

<android.support.constraint.Guideline
    # 宽高随意
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    
    # 指明方向: vertical | horizontal
        android:orientation="vertical"
    
    # 分隔开的区域的比例
    # layout_constraintGuide_percent优先级大于begin/end
          vertical 左边区域：右边区域　８：２
          horizontal　上边区域：下边区域　８：２
        app:layout_constraintGuide_percent="0.8"
    
    # 距离左侧/顶部具体的数值
        app:layout_constraintGuide_begin="100dp"
    # 距离右侧/底部具体的数值，begin优先级更大
        app:layout_constraintGuide_end="200dp"/>

2、Guideline实例

> 1.  `android:orientation`决定线的方向
> 2.  `app:layout_constraintGuide_percent="0.8"`表示一条线所分隔开的两个区域的比例，如水平线时上面区域所占比例80%，下面区域只有20%
> 3.  `app:layout_constraintGuide_begin="100dp"`与比例类似，只不过是具体数值。且`end`的优先级比`begin`大，优先采用`end的数值`

<android.support.constraint.Guideline android:id="@+id/constraint_guideline_v" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.8"/>
    
    <android.support.constraint.Guideline android:id="@+id/constraint_guideline_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_begin="100dp" app:layout_constraintGuide_end="200dp"/>
    
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="hello" app:layout_constraintLeft_toRightOf="@id/constraint_guideline_v" app:layout_constraintTop_toBottomOf="@id/constraint_guideline_h"/>

### Barrier(屏障) ###

1、Barrier屏障的作用和具有的属性

> 1.  Barrier能根据多个View的约束状况，形成一个类似于Guideline的参照物

<android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" # 相当于给定View的位置 top | bottom | left | right | start | end app:barrierDirection="right" # 参考哪些View，不需要@id app:constraint_referenced_ids="a_txt,b_txt"/>

2、Barrier使用实例

> TextViewC在TexViewA和TextViewB的右侧，并且是两者的最宽的右侧

### Group(分组) ###

1、Group分组用于将View进行分组，用于控制一组View的显示与否

# 指明该组有哪些View，不需要@id
    app:constraint_referenced_ids="a_txt,b_txt"

> 1.  `不能用Group包裹View`，Group是一个`不执行onDraw()的View`
> 2.  不要将View重复放到多个Group中，可能会导致`隐藏失效，冲突`

2、Group将两个TextView一起隐藏

<android.support.constraint.Group android:id="@+id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="a_txt,b_txt" android:visibility="invisible"/>
    
    <TextView android:id="@+id/a_txt" xxx/>
    
    <TextView android:id="@+id/b_txt" xxx/>

### Placeholder ###

1、Placeholder的作用?

> 1.  一种占位的作用
> 2.  通过`Placeholder的setContentId(view.getId());`可以设置具体的控件
> 3.  `TransitionManager.beginDelayedTransition(mConstraintLayout);`启动平滑的动画效果

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.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:id="@+id/constraintLayout" android:layout_height="match_parent">
    
        <android.support.constraint.Placeholder android:id="@+id/placeholder" android:layout_width="100dp" android:layout_height="100dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/mail" />
    
        <ImageButton android:id="@+id/favorite" android:layout_width="48dp" android:layout_height="48dp" android:layout_marginTop="16dp" android:background="#00000000" android:tint="#E64A19" android:src="@drawable/ic_launcher_foreground" app:layout_constraintEnd_toStartOf="@id/mail" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
    
        <ImageButton android:tint="#512DA8" android:id="@+id/mail" android:layout_width="48dp" android:layout_height="48dp" android:layout_marginTop="16dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" app:layout_constraintEnd_toStartOf="@id/save" app:layout_constraintStart_toEndOf="@id/favorite" app:layout_constraintTop_toTopOf="parent" />
    
        <ImageButton android:tint="#D32F2F" android:id="@+id/save" android:layout_width="48dp" android:layout_height="48dp" android:layout_marginTop="16dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" app:layout_constraintEnd_toStartOf="@id/play" app:layout_constraintStart_toEndOf="@id/mail" app:layout_constraintTop_toTopOf="parent" />
    
        <ImageButton android:tint="#FFA000" android:id="@+id/play" android:layout_width="48dp" android:layout_height="48dp" android:layout_marginTop="16dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@id/save" app:layout_constraintTop_toTopOf="parent" />
    
    
    </android.support.constraint.ConstraintLayout>

public class ConstraintLayoutActivity extends AppCompatActivity { 
    
        Placeholder mPlaceholder;
        ConstraintLayout mConstraintLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_constraint_layout);
    
            findViewById(R.id.favorite).setOnClickListener(new onClick());
            findViewById(R.id.mail).setOnClickListener(new onClick());
            findViewById(R.id.save).setOnClickListener(new onClick());
            findViewById(R.id.play).setOnClickListener(new onClick());
            mConstraintLayout = findViewById(R.id.constraintLayout);
            mPlaceholder = findViewById(R.id.placeholder);
        }
    
        class onClick implements View.OnClickListener{ 
            @Override
            public void onClick(View v) { 
                // 1. 执行顺滑的动画效果
                TransitionManager.beginDelayedTransition(mConstraintLayout);
                // 2. 将点击的View放置到placeholder中
                mPlaceholder.setContentId(v.getId());
            }
        }
    }

### Constraints ###

### 虚拟视图的原理 ###

1、如上所有虚拟视图内部的原理是什么?

> 1.  都直接or间接继承自View
> 2.  构造方法中将自己置为`GONE`，`setVisibility()为空方法`，永远为GONE了
> 3.  `draw()方法是空方法`，不会绘制
> 4.  `onMeasure()方法`中将长宽设置为0

2、虚拟视图就是一种不可见、不测量、不绘制的View

> 几乎没有性能消耗

## 6-动画 ##

### ConstraintSet ###

1、ConstraintSet是什么?

> 能在代码中轻松地改变控件的位置大小，不再需要使用LayoutParams

2、ConstraintSet的方法

ConstraintSet constraintSet = new ConstraintSet();
    // 1. clone
    constraintSet.clone(ConstraintLayout constraintLayout);
    constraintSet.clone(ConstraintSet set);
    constraintSet.clone(Context context, int constraintLayoutId);
    constraintSet.clone(Constraints constraints);
    
    // 2. 设置flow1控件的顶边与flow2的底边对齐,且之间margin值是50px:
    constraintSet.connect(view1.getId(), ConstraintSet.TOP,    // 第一个控件的顶部
                          view2.getId(), ConstraintSet.BOTTOM, // 第二个控件的底部
                          50);        // 之间的margin
    
    // 3. 设置view2水平剧中于parent
    constraintSet.centerVertically(R.id.view2, ConstraintSet.PARENT_ID);
    //constraintSet.centerHorizontally(R.id.view2, ConstraintSet.PARENT_ID);
    
    // 4. 设置view1的高度为120px
    constraintSet.constrainHeight(R.id.view1, 300);
    
    // 5. apply使设置生效
    constraintSet.applyTo(binding.constraintLayout);

### TransitionManager ###

1、ConstraintSet和TransitionManager实现水平、垂直布局变化的效果

> 1-水平方向布局

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.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">
    
        <ImageButton android:id="@+id/favorite" android:layout_width="60dp" android:layout_height="60dp" android:background="#00000000" android:tint="#E64A19" android:src="@drawable/ic_launcher_foreground" app:layout_constraintEnd_toStartOf="@id/mail" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"/>
    
        <ImageButton android:tint="#512DA8" android:id="@+id/mail" android:layout_width="60dp" android:layout_height="60dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" app:layout_constraintEnd_toStartOf="@id/save" app:layout_constraintStart_toEndOf="@id/favorite" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"/>
    
        <ImageButton android:tint="#D32F2F" android:id="@+id/save" android:layout_width="60dp" android:layout_height="60dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" app:layout_constraintEnd_toStartOf="@id/play" app:layout_constraintStart_toEndOf="@id/mail" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"/>
    
        <ImageButton android:tint="#FFA000" android:id="@+id/play" android:layout_width="60dp" android:layout_height="60dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@id/save" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"/>
    
    
    </android.support.constraint.ConstraintLayout>

> 2-垂直方向布局，ID相同

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.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">
    
        <ImageButton android:id="@+id/favorite" android:layout_width="60dp" android:layout_height="60dp" android:layout_marginTop="72dp" android:layout_marginEnd="8dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" android:tint="#E64A19" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.51" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
    
        <ImageButton android:id="@+id/mail" android:layout_width="60dp" android:layout_height="60dp" android:layout_marginStart="8dp" android:layout_marginTop="112dp" android:layout_marginEnd="8dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" android:tint="#512DA8" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.498" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/favorite" />
    
        <ImageButton android:id="@+id/save" android:layout_width="60dp" android:layout_height="60dp" android:layout_marginStart="8dp" android:layout_marginTop="100dp" android:layout_marginEnd="8dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" android:tint="#D32F2F" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.498" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/mail" />
    
        <ImageButton android:id="@+id/play" android:layout_width="60dp" android:layout_height="60dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:background="#00000000" android:src="@drawable/ic_launcher_foreground" android:tint="#FFA000" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.486" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/save" app:layout_constraintVertical_bias="0.383" />
    
    </android.support.constraint.ConstraintLayout>

> 3-测试页面Activity的布局

> 4-Activity中动画切换

public class ConstraintLayoutActivity extends AppCompatActivity { 
    
        ConstraintLayout mConstraintLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_constraint_layout);
    
            mConstraintLayout = findViewById(R.id.constraintLayout);
    
            // 1. 转换为垂直的布局
            findViewById(R.id.vertical_btn).setOnClickListener(new View.OnClickListener() { 
                @Override
                public void onClick(View v) { 
                    ConstraintSet constraintSet = new ConstraintSet();
                    constraintSet.clone(ConstraintLayoutActivity.this, R.layout.constraint_vertical_layout);
                    TransitionManager.beginDelayedTransition(mConstraintLayout);
                    constraintSet.applyTo(mConstraintLayout);
                }
            });
            // 2. 转换为水平的布局
            findViewById(R.id.horizontal_btn).setOnClickListener(new View.OnClickListener() { 
                @Override
                public void onClick(View v) { 
                    ConstraintSet constraintSet = new ConstraintSet();
                    constraintSet.clone(ConstraintLayoutActivity.this, R.layout.constraint_horizontal_layout);
                    TransitionManager.beginDelayedTransition(mConstraintLayout);
                    constraintSet.applyTo(mConstraintLayout);
                }
            });
        }
    }

2、constraintSet.clone(activity,layout):的作用

> 将布局的定位信息，存储到constraintSet中

3、TransitionManager.beginDelayedTransition():的作用

> 通过新旧scene的变化，简单实现了动画效果

4、TransitionManager如何自定义动画效果

AutoTransition autoTransition = new AutoTransition();
    autoTransition.setDuration(1000);
    TransitionManager.beginDelayedTransition(mConstraintLayout, autoTransition);

### 实战 ###

1、ConstraintLayout动画的优势是什么？

> 1.  代码简洁，容易实现
> 2.  ConstriantLayout因为有Guildelide、Barrier、Chaines等特性，动画效果很强

2、使用两个几乎相同的布局是否导致了xml文件的重复?

> 1.  使用两个xml，能够改写除了id之外的很多属性，比如大小、TextSize、visibility等等
> 2.  如果不想重复，`可以代码中借助ConstraintSet动态调整控件的位置`

3、ConstraintLayout做动画效果的注意点！

>  *  CL只会在直接子View上做动画。
>     
>     1.  嵌套的子View需要代码手动处理
>     2.  使用ConstraintLayout作为嵌套的布局
>     3.  不要嵌套，一层搞定
>  *  CL只会做布局改变的动画,ConstraintSet会将布局/约束之外的改变丢弃掉
>  *  代码中动态改变View的属性，CL做动画时不会将这些考虑到内，只会在原始状态和新状态间变换

1、借助ConstraintSet和TransitionManager做出一个ImageView的上下变换

> 1-思路是两个内部控件一致的布局，但是位置不同。借助ConstraintSet和TransitionManager进行动画效果  
> 2-布局:activity\_constraint\_layout

> 3-布局2:activity\_veritical\_layout

> 4-动画

public class ConstraintLayoutActivity extends AppCompatActivity { 
        ConstraintLayout mConstraintLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_constraint_layout);
    
            mConstraintLayout = findViewById(R.id.constraintlayout);
    
            ConstraintSet constraintSet1 = new ConstraintSet();
            ConstraintSet constraintSet2 = new ConstraintSet();
            constraintSet1.clone(this, R.layout.activity_constraint_layout);
            constraintSet2.clone(this, R.layout.activity_veritical_layout);
    
            // 1. 转换为垂直的布局
            findViewById(R.id.vertical_btn).setOnClickListener(new View.OnClickListener() { 
                @Override
                public void onClick(View v) { 
                    TransitionManager.beginDelayedTransition(mConstraintLayout);
                    constraintSet2.applyTo(mConstraintLayout);
                }
            });
            // 2. 转换为水平的布局
            findViewById(R.id.horizontal_btn).setOnClickListener(new View.OnClickListener() { 
                @Override
                public void onClick(View v) { 
                    TransitionManager.beginDelayedTransition(mConstraintLayout);
                    constraintSet1.applyTo(mConstraintLayout);
                }
            });
        }
    }

## 7-优化Optimizer(1.1.x) ##

1、通过`app:layout_optimizationLevel`能开启优化，参数如下

> 1.  none: 不优化
> 2.  standard: 【默认】仅仅优化直接和障碍约束
> 3.  direct: 优化直接约束
> 4.  barrier: 优化障碍约束
> 5.  chain: 优化chains约束
> 6.  demensions: 优化维度测量，减少匹配约束元素的度量数量

## ConstraintLayout 2.0 ##

## ConstraintHelper ##

## Linear Helper ##

## Flow ##

## Post Layout effects ##

### Layers ###

## Circular Reveal ##

## Decorators ##

## Bottom Panel Decorator ##

## ConstraintSet ##

## 8-实战 ##

### 实例1-三个图片都是3:4比例、最左最右间隔为5dp、中间间隔为10dp ###

1、实例

> 1.  三个ImageView平分水平方向
> 2.  三个ImageView的间隔为10dp
> 3.  ImageView宽高比为3:4

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.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:paddingLeft="5dp" android:paddingRight="5dp">
    
        <android.support.constraint.ConstraintLayout android:id="@+id/cla" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:background="@color/colorAccent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/clb">
    
            <ImageView android:id="@+id/aaa" android:layout_width="0dp" android:layout_height="0dp" android:background="#2b8" app:layout_constraintDimensionRatio="3:4" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />
    
        </android.support.constraint.ConstraintLayout>
    
        <android.support.constraint.ConstraintLayout android:id="@+id/clb" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:background="@color/colorPrimary" app:layout_constraintLeft_toRightOf="@+id/cla" app:layout_constraintRight_toLeftOf="@+id/clc">
    
            <ImageView android:id="@+id/bbb" android:layout_width="0dp" android:layout_height="0dp" android:background="#3cf" app:layout_constraintDimensionRatio="3:4" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />
        </android.support.constraint.ConstraintLayout>
    
        <android.support.constraint.ConstraintLayout android:id="@+id/clc" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:background="@color/colorAccent" app:layout_constraintLeft_toRightOf="@+id/clb" app:layout_constraintRight_toRightOf="parent">
    
            <ImageView android:id="@+id/ccc" android:layout_width="0dp" android:layout_height="0dp" android:background="#2b8" app:layout_constraintDimensionRatio="3:4" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />
        </android.support.constraint.ConstraintLayout>
    
    </android.support.constraint.ConstraintLayout>

## 知识扩展 ##

1、ConstraintLayout的性能问题

> 1.  同样的页面布局，采用`ConstraintLayout的视图树`从`onMeasure()->onDraw()`的时间比`Relativelayout和linearlayout`少很多
> 2.  ConstraintLayout的性能体现在了`Android实现的Cassowary algorithm`算法上
> 3.  ConstraintLayout要避免嵌套了多层布局

### Android Transition Framework ###

1.  [Android Transition Framework详解—超炫的动画框架][Android Transition Framework]

## 参考和学习资料 ##

1.  [ConstraintLayout 完全解析 快来优化你的布局吧][ConstraintLayout _]
2.  [android ConstraintLayout使用详解][android ConstraintLayout]
3.  [官方: ConstraintLayout][ConstraintLayout]
4.  [解析ConstraintLayout的性能优势][ConstraintLayout 1]
5.  [Beautiful animations using Android ConstraintLayout][]
6.  [New Features in ConstraintLayout 2.0][]

[http_blog.csdn.net_feather_wch_article_details_79585647]: http://blog.csdn.net/feather_wch/article/details/79585647
[700]: /images/20220529/0c8781b3fc2144edb250f514b30b2a05.png
[Android Transition Framework]: https://www.jianshu.com/p/e497123652b5
[ConstraintLayout _]: https://blog.csdn.net/lmj623565791/article/details/78011599
[android ConstraintLayout]: https://www.jianshu.com/p/f86f800964d2
[ConstraintLayout]: https://codelabs.developers.google.com/codelabs/constraint-layout/index.html
[ConstraintLayout 1]: https://mp.weixin.qq.com/s/gGR2itbY7hh9fo61SxaMQQ
[Beautiful animations using Android ConstraintLayout]: https://robinhood.engineering/beautiful-animations-using-android-constraintlayout-eee5b72ecae3
[New Features in ConstraintLayout 2.0]: http://androidkt.com/new-features-in-constraintlayout-2-0/