多个功能使用方法
基线对齐
- xml
- 属性
layout_constraintBaseline_toBaselineOf 复制代码
- 效果
角度约束
- xml
- 属性
app:layout_constraintCircle="@id/iv_cycle_main" app:layout_constraintCircleAngle="45" app:layout_constraintCircleRadius="200dp" 复制代码
- 效果
百分百偏移
- xml
- 属性
app:layout_constraintVertical_bias="0.3" app:layout_constraintHorizontal_bias="0.2" 复制代码
- 效果
gone margin隐藏时的边距
- xml
- 属性
app:layout_goneMarginLeft="100dp" app:layout_goneMarginTop="200dp" 复制代码
- 效果
设置控件尺寸spread撑满水平剩余宽度
- xml
xml2. 属性
app:layout_constraintWidth_default="spread" app:layout_constraintHeight_default="spread" 复制代码
- 效果
控件百分百宽度
- xml
- 属性
app:layout_constraintWidth_percent="0.5" 复制代码
- 效果
根据宽高比设置控件尺寸
- xml
- 属性
app:layout_constraintDimensionRatio="1:2" 复制代码
- 效果
将多个控件链式布局
- xml
- 属性
app:layout_constraintHorizontal_chainStyle="spread" 复制代码
- 效果
GuideLine辅助线的使用
- xml
- 属性
<androidx.constraintlayout.widget.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.2" /> 复制代码
- 效果
控件分组后同步显示或隐藏
- xml
- 属性
<androidx.constraintlayout.widget.Group android:id="@+id/tv_group" app:constraint_referenced_ids="iv_group1,iv_group2,iv_group3" android:layout_width="wrap_content" android:visibility="visible" android:layout_height="wrap_content"/> 复制代码
- 效果
placeholder使用,点击图标展示效果
- xml
- 属性
<androidx.constraintlayout.widget.Placeholder android:id="@+id/place1" android:layout_width="200dp" android:layout_height="200dp" app:layout_constraintRight_toRightOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> 复制代码
- 效果
点击图标,机器人图标会从左上角移动到右下角的站位位置
flow_wrapMode实现链约束
- xml
- 属性
<androidx.constraintlayout.helper.widget.Flow android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="tvFlow1,tvFlow2,tvFlow3,tvFlow4,tvFlow5" app:layout_constraintLeft_toLeftOf="parent" app:flow_wrapMode="chain" app:layout_constraintTop_toTopOf="parent" /> 复制代码
- 效果
flow_wrapMode链约束中对每一行、第一行、最后一行设置链约束
- xml
- 属性
<androidx.constraintlayout.helper.widget.Flow android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="tvFlow1,tvFlow2,tvFlow3,tvFlow4,tvFlow5" app:layout_constraintLeft_toLeftOf="parent" android:orientation="horizontal" app:flow_horizontalGap="20dp" app:flow_wrapMode="chain" app:flow_horizontalStyle="spread_inside" app:flow_lastHorizontalStyle="packed" app:layout_constraintTop_toTopOf="parent" /> 复制代码
- 效果
流式布局中的对齐约束flow_verticalAlign、flow_horizontalAlign
- xml
- 属性
<androidx.constraintlayout.helper.widget.Flow android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="tvFlow1,tvFlow2,tvFlow3,tvFlow4,tvFlow5" app:layout_constraintLeft_toLeftOf="parent" app:flow_verticalAlign="top" app:flow_wrapMode="chain" app:layout_constraintTop_toTopOf="parent" /> 复制代码
- 效果
流式布局中的数量约束flow_maxElementsWrap
- xml
- 属性
<androidx.constraintlayout.helper.widget.Flow android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="tvFlow1,tvFlow2,tvFlow3,tvFlow4,tvFlow5" app:layout_constraintLeft_toLeftOf="parent" app:flow_wrapMode="chain" app:flow_maxElementsWrap="3" app:layout_constraintTop_toTopOf="parent" /> 复制代码
- 效果
使用Layer图层设置多个控件的组合背景
- xml
- 属性
<androidx.constraintlayout.helper.widget.Layer android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/shp_round" android:padding="10dp" app:constraint_referenced_ids="tv_head,tv_footer,tv_left,tv_right" tools:ignore="MissingConstraints" /> 复制代码
- 效果
图片处理器ImageFilterView
- xml
- 属性
app:altSrc="@drawable/shp_round" app:crossfade="0.5" app:roundPercent="1" 复制代码
- 效果
画出类似原型图的控件
- xml
- 属性
<androidx.constraintlayout.utils.widget.MockView android:id="@+id/mock_icon" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginLeft="14dp" /> 复制代码
- 效果
屏障(将屏障两侧的view分隔开布局)
- xml
- 属性
<androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" app:barrierDirection="end" app:constraint_referenced_ids="tv_access,tv_about" android:layout_height="wrap_content"/> 复制代码
- 效果