ConstraintLayout为我们提供了很多的辅助类,本章节讲述几个常用的辅助类。
一.辅助类之Group
1.作用
Group的作用就是可以对一组控件同时隐藏或显示。
2.属性
app:constraint_referenced_ids="控件View1的id,控件View2的id"
3.代码
<?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=".ConstraintLayoutActivity">
<TextView
android:id="@+id/activity_constraint_layout_TextView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="文字1"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/activity_constraint_layout_TextView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="文字2"
android:textColor="#FFFFFF"
app:layout_constraintLeft_toRightOf="@id/activity_constraint_layout_TextView1"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/activity_constraint_layout_TextView3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="文字3"
android:textColor="#FFFFFF"
app:layout_constraintLeft_toRightOf="@id/activity_constraint_layout_TextView2"
tools:ignore="MissingConstraints">
</TextView>
<androidx.constraintlayout.widget.Group
android:id="@+id/activity_constraint_layout_Group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="activity_constraint_layout_TextView1,activity_constraint_layout_TextView2,activity_constraint_layout_TextView3">
</androidx.constraintlayout.widget.Group>
</androidx.constraintlayout.widget.ConstraintLayout>
Group:android:visibility="gone" :三个View都不显示。
Group:android:visibility="visible":三个View都显示。
也可以通过Java代码动态设置
Group group = findViewById(R.id.activity_constraint_layout_Group);
group.setVisibility(View.VISIBLE);
二.辅助类之Placeholder
1.作用
Placeholder的作用就是占位,它可以在布局中占好位置,通过app:content=""属性,或者动态调用setContent()设置内容,来让某个控件移动到此占位符中。
2.代码
<?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=".ConstraintLayoutActivity">
<TextView
android:id="@+id/activity_constraint_layout_TextView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="文字1文字1文字1文字1"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<androidx.constraintlayout.widget.Placeholder
android:id="@+id/activity_constraint_layout_Placeholder"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintRight_toRightOf="parent"
tools:ignore="MissingConstraints">
</androidx.constraintlayout.widget.Placeholder>
</androidx.constraintlayout.widget.ConstraintLayout>
Placeholder placeholder = findViewById(R.id.activity_constraint_layout_Placeholder);
placeholder.setContentId(R.id.activity_constraint_layout_TextView1);
三.辅助类之Flow
1.作用
Flow是ConstraintLayout为我们提供的流布局。
2.属性
//两个view在水平方向的间距
app:flow_horizontalGap="10dp"
//两个view在垂直方向的间隔
app:flow_verticalGap="10dp"
//流布局属性 三个取值 none chain aligned
app:flow_wrapMode="aligned"
none:默认 View水平排排 超出屏幕不显示
chain:View水平排排 超出屏幕换行 换行后的View平分下一行
aligned:View水平排排 超出屏幕换行 换行后的View 挨着显示
三者区别 看下面的效果
3.代码
<?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=".ConstraintLayoutActivity">
<TextView
android:id="@+id/TextView1"
android:layout_width="120dp"
android:layout_height="80dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="文字1"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView2"
android:layout_width="120dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="文字2"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView3"
android:layout_width="120dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="文字3"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView4"
android:layout_width="120dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="文字4"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView5"
android:layout_width="120dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="文字5"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<androidx.constraintlayout.helper.widget.Flow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="TextView1,TextView2,TextView3,TextView4,TextView5"
app:flow_horizontalGap="10dp"
app:flow_verticalGap="10dp"
app:flow_wrapMode="aligned"
tools:ignore="MissingConstraints">
</androidx.constraintlayout.helper.widget.Flow>
</androidx.constraintlayout.widget.ConstraintLayout>
<1> app:flow_wrapMode="none"
<2> app:flow_wrapMode="aligned"
<3> app:flow_wrapMode="chain"
4.Flow的对齐约束
水平方向
<1> 属性
//水平方向 属性取值:top bottom center baseline
app:flow_verticalAlign="top"
top:上面对齐
bottom:下面对齐
center:中间对齐
baseline:基线对齐
注意:Flow View排排方向是vertical 且每个View宽高不一样
<2> 代码
<?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=".ConstraintLayoutActivity">
<TextView
android:id="@+id/TextView1"
android:layout_width="120dp"
android:layout_height="80dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="文字1"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView2"
android:layout_width="120dp"
android:layout_height="180dp"
android:layout_marginLeft="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="文字2"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView3"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginLeft="10dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="文字3"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView4"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="文字4"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView5"
android:layout_width="120dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="文字5"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<androidx.constraintlayout.helper.widget.Flow
android:id="@+id/Flow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="TextView1,TextView2,TextView3,TextView4,TextView5"
app:flow_horizontalGap="10dp"
app:flow_verticalGap="10dp"
app:flow_wrapMode="chain"
app:flow_verticalAlign="top"
tools:ignore="MissingConstraints">
</androidx.constraintlayout.helper.widget.Flow>
</androidx.constraintlayout.widget.ConstraintLayout>
app:flow_verticalAlign="top"
app:flow_verticalAlign="bottom"
app:flow_verticalAlign="center"
app:flow_verticalAlign="baseline"
垂直方向
<1> 属性
//垂直方向 属性取值:start end center
app:flow_horizontalAlign="start"
start:左边对齐
end:右边对齐
center:中间对齐
注意:Flow View排排方向是horizontal 且每个View宽高不一样
<2> 代码
略
5.Flow的数量约束
<1> 属性
//app:flow_wrapMode 为aligned或者chian时 指定个数
app:flow_maxElementsWrap="2"
<2> 代码
<?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=".ConstraintLayoutActivity">
<TextView
android:id="@+id/TextView1"
android:layout_width="120dp"
android:layout_height="80dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="文字1"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView2"
android:layout_width="120dp"
android:layout_height="180dp"
android:layout_marginLeft="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="文字2"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView3"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginLeft="10dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="文字3"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView4"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="文字4"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/TextView5"
android:layout_width="120dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="文字5"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
<androidx.constraintlayout.helper.widget.Flow
android:id="@+id/Flow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="TextView1,TextView2,TextView3,TextView4,TextView5"
app:flow_horizontalGap="10dp"
app:flow_verticalGap="10dp"
app:flow_wrapMode="chain"
app:flow_maxElementsWrap="2"
tools:ignore="MissingConstraints">
</androidx.constraintlayout.helper.widget.Flow>
</androidx.constraintlayout.widget.ConstraintLayout>
app:flow_maxElementsWrap="2"
app:flow_maxElementsWrap="3"
四.辅助类之Layer
1.简介
Layer继承自ConstraintHelper,是一个约束助手,常用来增加背景,或者共同动画,使用时需要格外注意Layer要放在上面。详情看代码。
2.代码
<?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=".ConstraintLayoutActivity">
<androidx.constraintlayout.helper.widget.Layer
android:layout_width="160dp"
android:layout_height="160dp"
android:background="#FF0000"
android:padding="10dp"
tools:ignore="MissingConstraints"
app:constraint_referenced_ids="ImageView1,TextView1">
</androidx.constraintlayout.helper.widget.Layer>
<ImageView
android:id="@+id/ImageView1"
android:layout_width="150dp"
android:layout_height="150dp"
tools:ignore="MissingConstraints"
android:background="@color/colorAccent">
</ImageView>
<TextView
android:id="@+id/TextView1"
android:layout_width="150dp"
android:layout_height="40dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="文字1"
app:layout_constraintTop_toBottomOf="@+id/ImageView1"
android:textColor="#FFFFFF"
tools:ignore="MissingConstraints">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
五.辅助类之ImageFilterView&ImageFilterButton
1.简介
ImageFilterView是ConstraintLayout一个控件。可以理解为ImageView。
ImageFilterButton是ConstraintLayout一个控件。可以理解为ImageButton。
ImageFilterView和ImageFilterButton的关系。可以理解为ImageView和ImageButton。
属性
//引用的另一种资源
app:altSrc="@color/colorPrimaryDark"
//altSrc所引用的资源不可见 [0,1] 0:不可见 即显示src内容 1:可见 即心事altSrc内容
app:crossfade="0.8"
app:overlay="false":定义alt图像是否在原始图像的顶部淡出,或者是否与原始图像交叉淡出。默认是正确的。对于半透明的对象设置为false
代码
<?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=".ConstraintLayoutActivity">
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/imageFilterView"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="fitXY"
android:src="@drawable/apptop"
app:altSrc="#FF0000"
app:crossfade="0.4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.utils.widget.ImageFilterButton
android:id="@+id/imageFilterButton"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:scaleType="fitXY"
android:src="@drawable/apptop"
app:altSrc="#FF0000"
app:crossfade="0.8"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/imageFilterView"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
属性
//设置了圆角 [0,1] 0:原图 1:圆 根据数值的大小会使图片在方形和圆形之间按比例过度,round=可以设置具体圆角的大小
app:roundPercent="0.2" 小数 就代表不是圆形 然后圆角的大小由app:round字段决定
app:round="30dp"
//设置调节色温 [0,1] 1:原图 0:色温最大
app:warmth="0.5"
//调节亮度 [0,1] 1:亮度最大 0:亮度最小
app:brightness="1"
//调节饱和度 [0,1] 1:饱和度最大 0:饱和度最小
app:saturation="1"
//调节对比度 [0,1] 1:原图 0:全黑
app:contrast="0.5"
代码
<?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=".ConstraintLayoutActivity">
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/imageFilterView"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/kan"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:roundPercent="1"
app:warmth="0"
app:brightness="1"
app:saturation="0"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
效果
运行后看效果,浏览布局无效果。注意:根布局是其他布局也可以出现同样的效果,不一定非要ConstraintLayout布局。
六.辅助类之Guideline
1.简介
Guideline是一条参考线,可以帮助开发者进行辅助定位,并且实际上它并不会真正显示在布局中。主要用来确定View的位置,Guideline也可以用来做一些百分比分割之类的需求,有着很好的屏幕适配效果,Guideline有水平和垂直方向之分,位置可以使用针对父级的百分比或者针对父级位置的距离。
其实,就是画一条看不到的参考线,确定其位置。然后其他的View都按照它为依据测试位置。
2.属性
//辅助线的对齐方式 vertical&horizontal
android:orientation="horizontal"
//距离父布局宽度或高度的百分比 [0,1]
app:layout_constraintGuide_percent="0.5"
//距离父布局起始位置的距离 xxdp
app:layout_constraintGuide_begin="20dp"
//距离父布局结束位置的距离 xxdp
app:layout_constraintGuide_end="20dp"
3.代码
<?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=".ConstraintLayoutActivity">
<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.3" />
<TextView
android:id="@+id/TextView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="文字1"
android:textColor="#FFFFFF"
app:layout_constraintLeft_toRightOf="@id/Guideline"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
4.说明
这里确定了一个 垂直的参考线 父布局30% 然后定义了一个TextView 在父布局的上面 距离上面60dp 在参考线的右边 距离参考线30dp。
七.辅助类之Barrier
1.简介
Barrier和Guideline一样,也不会实际出现在布局中,它的作用如同其名,形成一个屏障、障碍。
2.属性
//控制Barrier相对于给定的View的位置
app:barrierDirection="end"
取值 left right top bottom start end
//取值是要依赖的控件的id
app:constraint_referenced_ids
3.代码
<?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=".ConstraintLayoutActivity">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@color/colorPrimary"
android:text="TextView1"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@color/colorAccent"
android:text="TextView2TextView2"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/textView1" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView1,textView2" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:padding="10dp"
android:text="@string/content"
app:layout_constraintLeft_toRightOf="@id/barrier"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
八.辅助类之MockView
1.简介
MockView类似于 产品的画原型图。
2.代码
<?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=".ConstraintLayoutActivity">
<androidx.constraintlayout.utils.widget.MockView
android:id="@+id/Name"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="80dp"
android:layout_marginTop="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.utils.widget.MockView
android:id="@+id/Age"
android:layout_width="100dp"
android:layout_height="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/Name"
app:layout_constraintTop_toTopOf="@id/Name" />
<androidx.constraintlayout.utils.widget.MockView
android:id="@+id/Sex"
android:layout_width="100dp"
android:layout_height="30dp"
app:layout_constraintBottom_toBottomOf="@id/Name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/Name" />
</androidx.constraintlayout.widget.ConstraintLayout>