本文详细介绍了ConstraintLayout中的关键属性使用，包括最大尺寸、百分比、定位偏差、权重链、辅助工具（Guideline、Barrier、Group和Placeholder）以及与ScrollView的交互，以及如何实现view的圆角效果。
ConstraintLayout-使用
一、基本使用
1 属性介绍：
1.1、app:layout_constraintWidth_max和app:layout_constraintHeight_max：表示的是最大宽度或最大高度，如果使用固定值则对应的layout_width或layout_height使用wrap_content，和android:maxWidth属性类似。可如果和app:layout_constraintWidth_percent或app:layout_constraintHeight_percent结合使用就需要注意了，请看下方。
1.2、app:layout_constraintWidth_percent或app:layout_constraintHeight_percent：表示占用父View的宽度或高度的百分比，0-1取值，1代表铺满。可单独使用也可和app:layout_constraintWidth_max或app:layout_constraintHeight_max结合使用，则需要max里面值为wrap，对应的layout_width或layout_height使用0dp，表示最大宽度或高度占用多少父View的多少，宽度或高度变化增加到最大宽度后不再增加。
1.3、app:layout_constrainedWidth：表示当前宽度受目标约束控件的宽影响，比如A宽度是100dp，B使用layout_constraintStart_toStartOf和layout_constraintEnd_toEndOf和A对齐，如果B的宽度是wrap_content，则B的宽度随内容变化，但是不会超过A的100dp宽度，也就是从另一个层次限制了最大宽度，如果B是0dp，则直接是一直保持和A的同等宽度。
1.4、app:layout_constraintHorizontal_weight：表示水平比重，和LinearLayout一样，但是前提是这几个控件相互约束，比如需要有一下约束：A和父左部，A右部和B左部，B左部和A右部，B右部和C左部，C左部和B右部，C右部和父右部，才会有效果。 1.5、app:layout_constraintHorizontal_bias：表示水平方向便宜，如需使用该属性需同时指定对应轴向的两条边才会生效，例如使用app:layout_constraintHorizontal_bias="0.5"属性时需要同时指定当前控件的start边和end约束才能生效。该值默认为0.5居中位置，取值范围在0~1之间。
2.3 定位和偏差
Bias
layout_constraintHorizontal_bias : 水平方向偏移 layout_constraintVertical_bias : 垂直方向偏移
下面将使左侧有 30% 的偏差而不是默认的 50%，这样左侧会更短，小部件更向左侧倾斜
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</>圆形定位
layout_constraintCircle 引用另一个小部件 ID layout_constraintCircleRadius 到另一个小部件中心的距离 layout_constraintCircleAngle 小部件应该处于哪个角度（以度为单位，从 0 到 360）
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />2.4 约束
2.4.2 使用 0dp (MATCH_CONSTRAINT)
官方不推荐在ConstraintLayout中使用match_parent，可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent，
<TextView
android:id="@+id/TextView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:visibility="visible" />2.4.3 宽高比约束
当宽或高至少有一个尺寸被设置为0dp时，可以通过属性layout_constraintDimensionRatio设置宽高比
app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3 app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>2.4.4 百分比约束
layout_constraintHeight_percent：高度百分比，占父类高度的百分比 layout_constraintWidth_percent：宽度百分比，占父类宽度的百分比
app:layout_constraintWidth_max="wrap" ------ 最大宽度 自适应
app:layout_constraintWidth_percent="0.7" ------ 最大宽度70%
android:layout_width="0dp" ----------------- match_parent
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
android:text="constraintHeight"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/view_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:text="1111111111111111111111111111111111111111"
app:layout_constraintEnd_toStartOf="@id/view_two"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintWidth_percent="0.7"
app:layout_constraintWidth_max="wrap"
/>
<TextView
android:id="@+id/view_two"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@id/view_one"
android:text="2222222222222222222222222222222222222222222222222222222222222"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintWidth_max="wrap"
/>
</androidx.constraintlayout.widget.ConstraintLayout>三、链
spread ----------展开元素 (默认)；
spread_inside ----------展开元素，但链的两端贴近parent；
packet ----------链的元素将被打包在一起。
app:layout_constraintHorizontal_chainStyle="spread_inside"
3.1 权重链
如果我们把宽度都设为0dp，这个时候可以在每个TextView中设置横向权layout_constraintHorizontal_weight(constraintVertical为纵向)来创建一个权重链
<TextView
android:id="@+id/TextView4"
android:background="@color/design_default_color_primary"
android:text="444"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/TextView2"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintTop_toBottomOf ="@id/TextView1"/>四、辅助工具
4.1、Guideline - 引导线
像辅助线一样，在预览的时候帮助你完成布局
android:orientation 垂直vertical，水平horizontal layout_constraintGuide_begin 开始位置 layout_constraintGuide_end 结束位置 layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)
<android.support.constraint.Guideline
android:id="@+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="50dp" />
<android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />4.2、Barrier - 屏障组
假设有3个控件ABC，C在AB的右边，但是AB的宽是不固定的，这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障，
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/TextView1" />
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="TextView1,TextView2" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/barrier" />app:barrierDirection 为屏障所在的位置，可设置的值有：bottom、end、left、right、start、top app:constraint_referenced_ids为屏障引用的控件，可设置多个(用“,”隔开)
4.3 Group - 组
Group可以把多个控件归为一组，方便隐藏或显示一组控件，现在有3个并排的TextView，用Group把TextView1和TextView3归为一组，再设置这组控件的可见性，
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@id/TextView2" />
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:constraint_referenced_ids="TextView1,TextView3" />4.4 Placeholder -占位符
Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置
<android.support.constraint.Placeholder
android:id="@+id/placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:content="@+id/textview"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cccccc"
android:padding="16dp"
android:text="TextView"
android:textColor="#000000"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content=“@+id/textview”，这时TextView会跑到屏幕的左上角
五、嵌套ScrollView相关
4.1、内容线性布局 + 跟随滚动的底部按钮
android:fillViewport="true" 使子view占满父布局
<ScrollView
android:id="@+id/scroll"
android:fillViewport="true"
android:layout_height="match_parent"
android:layout_width="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout
android:id="@+id/view_head_layout"
android:gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"></LinearLayout>
<LinearLayout
android:id="@+id/view_content_detail_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="@+id/view_bottom_btn_layout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view_head_layout"
app:layout_constraintVertical_chainStyle="spread_inside"></LinearLayout>
<LinearLayout
android:id="@+id/view_bottom_btn_layout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view_content_detail_layout"></LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>六、view剪切圆角
mBinding.viewRv.setClipToOutline(true);
mBinding.viewRv.setOutlineProvider(new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
int radius = 20;
outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), radius);
}
});
扫一扫
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
