ConstraintLayout的基本用法
1、基线对齐——Baseline
有时候我们需要这样一个场景:
app:layout_constraintBaseline_toBaselineOf="@id/30"
2、链——Chains
用于将多个控件形成一条链,可以用于平分空间。
<?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=".MainActivity"><TextViewandroid:id="@+id/A"android:layout_width="80dp"android:layout_height="80dp"android:gravity="center"android:text="A"android:textSize="25sp"app:layout_constraintEnd_toStartOf="@+id/B"app:layout_constraintHorizontal_chainStyle="spread_inside"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/B"android:layout_width="80dp"android:layout_height="80dp"android:gravity="center"android:text="B"android:textSize="25sp"app:layout_constraintEnd_toStartOf="@+id/C"app:layout_constraintStart_toEndOf="@+id/A"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/C"android:layout_width="80dp"android:layout_height="80dp"android:gravity="center"android:text="C"android:textSize="25sp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@+id/B"app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
app:layout_constraintHorizontal_chainStyle
有三个参数分别是:
- spread(默认):均分剩余空间
- spread_inside:两侧的控件贴近两边,剩余的控件均分剩余空间
- packed:所有控件贴紧居中
3、Guideline——参考线
Guideline
是一条参考线,可以帮助开发者进行辅助定位,并且实际上它并不会真正显示在布局中,像是数学几何中的辅助线一样,使用起来十分方便,出场率很高,Guideline
也可以用来做一些百分比分割之类的需求,有着很好的屏幕适配效果,Guideline
有水平和垂直方向之分,位置可以使用针对父级的百分比或者针对父级位置的距离
<androidx.constraintlayout.widget.Guidelineandroid:id="@+id/Guideline"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_percent="0.10" />
在这里设置了一个垂直方向10%的Guideline,控件A依赖于这个Guideline因此不论布局如何变化,A始终在Guideline下方。
4、Barrier——屏障
这个
Barrier
和Guideline
一样,也不会实际出现在布局中,它的作用如同其名,形成一个屏障、障碍,使用也非常多。
创建一个障碍,来确保视图不会重叠,无论内容有多长。
<androidx.constraintlayout.widget.Barrierandroid:id="@+id/barrier"android:layout_width="wrap_content"android:layout_height="wrap_content"app:constraint_referenced_ids="textView2,textView1"app:barrierDirection="end"/>
barrierDirection:
表示障碍的位置
constraint_referenced_ids:
表示在什么视图部分创建障碍
如图不管文字如何变化始终都是不会重叠显示,灰色显示部分就是障碍(Barrier)
5、Group——组
工作当中常常会有很多个控件同时隐藏或者显示的场景,传统做法要么是进行嵌套,对父布局进行隐藏或显示,要么就是一个一个设置,这显然都不是很好的办法,
ConstraintLayout
中的Group
就是来解决这个问题的。Group
的作用就是可以对一组控件同时隐藏或显示,没有其他的作用,它的属性如下:
<androidx.constraintlayout.widget.Groupandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:visibility="visible"app:constraint_referenced_ids="A,B,C" />
app:constraint_referenced_ids="id,id"
加入组的控件id
使用:invisible
、visible
、gone
进行设置视图的可见与不可见。
6、Placeholder——占位符
Placeholder
的作用就是占位,它可以在布局中占好位置,通过app:content=""
属性,或者动态调用setContent()
设置内容,来让某个控件移动到此占位符中
<?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"android:background="#DAF3FE"tools:context=".MainActivity"tools:ignore="HardcodedText"><TextViewandroid:id="@+id/A"android:layout_width="100dp"android:layout_height="60dp"android:gravity="center"android:text="A"android:textColor="@color/black"android:textSize="25sp"android:textStyle="bold"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><androidx.constraintlayout.widget.Placeholderandroid:layout_width="100dp"android:layout_height="60dp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>
当我们设置
app:content="@+id/A"
或者调用setContent()
时,控件A就会被移动到Placeholder
中,当然在布局中使用app:content=""
显然就失去了它的作用。