Android ConstraintLayout详细教程

多个功能使用方法 基线对齐

1. xml

基线对齐xml

2. 属性

layout_constraintbaseline_tobaselineOf

3. 效果
   

角度约束

1. xml

角度约束xml

2. 属性

 app:layout_constraintCircle="@id/iv_cycle_main"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="200dp"

3. 效果

百分百偏移

1. xml

百分比偏移

2. 属性

 app:layout_constraintVertical_bias="0.3"
        app:layout_constraintHorizontal_bias="0.2"

3. 效果

gone margin隐藏时的边距

1. xml

xml

2. 属性

  app:layout_goneMarginLeft="100dp"
        app:layout_goneMarginTop="200dp"

3. 效果

设置控件尺寸spread撑满水平剩余宽度

1. xml
   xml
2. 属性

app:layout_constraintWidth_default="spread"
        app:layout_constraintHeight_default="spread"

3. 效果

控件百分百宽度

1. xml

xml

2. 属性

app:layout_constraintWidth_percent="0.5"

3. 效果

根据宽高比设置控件尺寸

1. xml

xml

2. 属性

app:layout_constraintDimensionRatio="1:2"

3. 效果

将多个控件链式布局

1. xml

xml

2. 属性

app:layout_constraintHorizontal_chainStyle="spread"

3. 效果

GuideLine辅助线的使用

1. xml

xml

2. 属性

3. 效果

控件分组后同步显示或隐藏

1. xml

xml

2. 属性

3. 效果

placeholder使用,点击图标展示效果

1. xml

xml

2. 属性

3. 效果
   点击图标，机器人图标会从左上角移动到右下角的站位位置
   

flow_wrapMode实现链约束

1. xml

xml

2. 属性

3. 效果

flow_wrapMode链约束中对每一行、第一行、最后一行设置链约束

1. xml

xml

2. 属性

3. 效果

流式布局中的对齐约束flow_verticalAlign、flow_horizontalAlign

1. xml

xml

2. 属性

3. 效果

流式布局中的数量约束flow_maxElementsWrap

1. xml

xml

2. 属性

3. 效果

使用Layer图层设置多个控件的组合背景

1. xml

xml

2. 属性

3. 效果

图片处理器ImageFilterView

1. xml

xml

2. 属性

app:altSrc="@drawable/shp_round"
        app:crossfade="0.5"
        app:roundPercent="1"

3. 效果

画出类似原型图的控件

1. xml

xml

2. 属性

3. 效果

屏障（将屏障两侧的view分隔开布局）

1. xml

xml

2. 属性

3. 效果