优点:
ConstraintLayout之所以成为目前Android开发中主流的布局,除了官方建议使用ConstraintLayout外还有以下几个方面的优势:
- 功能强大,ConstraintLayout几乎能实现其他布局所有的功能
- 能减少布局层次的嵌套,有性能的优势
- 可视化操作的增强,大部分界面用ConstraintLayout都能通过可视化编辑区域完成
基本属性
这些属性既可以用于父布局与里面组件的约束,也可以是组件与组件之间的约束.
- app:layout_constraintBottom_toBottomOf="parent" 底部约束
- app:layout_constraintEnd_toEndOf="parent" 右边约束
- app:layout_constraintStart_toStartOf="parent" 左边约束
- app:layout_constraintTop_toTopOf="parent" 顶部约束
基本原理
这些属性的基本原理就是,一个组件的底部与指定约束组件对其,依次类推差不多就是这样.
- 上下约束需要使得两个组件水平需要对齐,如图
- 左右约束就需要使得两个组件垂直对其
Chains链
在LinearLayout布局中weight属性能够实现子控件讲父布局的控件按比例分配,在ConstraintLayout 中通过Chains链也能够实现相同的功能,而且Chains链的功能比LinearLayout布局中weight属性功能更加强大。
基本使用
Chains链的基本用法如下:选中多个控件,右键Chains->Create Horizontal Chains 即可将父布局的剩余空间进行均匀分布。
分类
Chains链对父控件的剩余空间有三种分配方式,即Spread、spread inside、packed,默认值是Spread也就是在链上的所有组件都平均分配空间.
链的第一个元素称为链头,可以通过设置layout_constraintHorizontal_chainStyle来控制链的分布形式.
spread
默认模式,分布样式如上图
spread_inside
如图,和spread的区别是没算两端的约束
packed
所有元素挤在中间,也可以配合使用bias来改变位置偏移,在链头设置bais
例子:
<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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"
app:layout_constraintEnd_toStartOf="@+id/button3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button1" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>
约束尺寸
大概就是通过设置控件的长度或者宽度为0,然后通过约束来控制宽高大小,下面是一个事例
<?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">
<TextView
android:id="@+id/textView4"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="@color/design_default_color_primary_variant"
android:text="底部banner"
android:gravity="center"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/design_default_color_secondary"
android:gravity="center"
android:text="顶部fragment"
app:layout_constraintBottom_toTopOf="@+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
大概就是顶部fragment通过底部与底部导航栏的顶部约束对齐,实现长度拉伸改变.
百分比布局
ConstraintLayout 还支持控件的尺寸按照父布局尺寸的百分比来设置,使用前提是修改宽高为0
- app:layout_constraintWidth_percent 宽度占父布局百分比比例
- app:layout_constraintHeight_percent 高度占父布局百分比比例
<?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">
<TextView
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/design_default_color_primary_variant"
android:textColor="#FFFFFF"
android:gravity="center"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Ratio(宽高比例)
给图片宽度设置match_parent,高度设置成约束尺寸0dp,然后再添加一个layout_constraintDimensionRatio属性,属性的值可以设置h,16:9 其中h表示高宽比的比值,也可以设置成将值设置w,9:16,w表示宽高比的比值。
示例:
<?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">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="w,9:16"
android:background="@drawable/ic_launcher_background"
tools:ignore="MissingConstraints"
android:contentDescription="@string/app_name" />
</androidx.constraintlayout.widget.ConstraintLayout>
圆形定位
概念
这个定位大概就相当于将一个控件放在另一个控件的中心,然后通过控制角度以及距离中心的距离来实现定位.
- ayout_constraintCircle:决定选择哪一个控件作为中心.
- layout_constraintCircleRadius:到另一个控件中心的距离。
- layout_constraintCircleAngle:控件的角度(顺时针,0 - 360 度)。
示例
<?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">
<Button
android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintCircle="@id/buttonA"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="150dp"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
Group
Group 可以对一组的控件同时设置其可见性的值Visible、Invisible或者Gone(不可见,占位置)(不可见,不占位置)。
其使用方法如下:在布局中右键添加Group,再将一组控件拖动到Group中,通过控制Group的属性来调节一组控件的可见性。
<?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:id="@+id/main"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Group
android:id="@+id/group4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/design_default_color_primary"
android:visibility="visible"
app:constraint_referenced_ids="buttonA,buttonB" />
<Button
android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintBottom_toBottomOf="@id/buttonA"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
偏移
也就是控件在水平和垂直在父布局中距离的百分比.
- layout_constraintHorizontal_bias 水平偏移取值0~1
- layout_constraintVertical_bias 竖直偏移取值0~1
案例
<?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:id="@+id/main"
tools:context=".MainActivity">
<Button
android:id="@+id/btnB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:textColor="@color/white"
android:textSize="33sp"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Guideline的使用
他是约束布局的一个工具类,是一种引导线,用于帮助我们进行早先的排版,并且我们可以使得控件的约束为这些引导先
基本属性
① 方向属性 : android:orientation=“horizontal” ; 取值 horizontal / vertical ;
② 开始尺寸定义 : app:layout_constraintGuide_begin=“22dp” ; 取值 dp 尺寸值 ; 距离 顶部 ( 水平 ) , 左侧 ( 垂直 ) 位置 ;
③ 结束尺寸定义 : app:layout_constraintGuide_end=“20dp” ; 取值 dp 尺寸值 ; 距离 底部 ( 水平 ) , 右侧 ( 垂直 ) 位置 ;
④ 百分比位置定义 : app:layout_constraintGuide_percent=“0.5” ; 取值 0 ~ 1.0 之间的小数 ;
基本使用
<?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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="227dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="312dp" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="60dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/guideline5"
app:layout_constraintEnd_toStartOf="@+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.477" />
</androidx.constraintlayout.widget.ConstraintLayout>
Barrier的使用
它的作用是将多个控件放进一个里面进行约束,并使得其他控件可以同时对放在里面的那一组控件进行共同约束,也就是说将多个控件放进一个集合里面,然后其他控件用那个集合进行约束,也就是相当于与多个控件进行同一种约束
基本属性
barrierDirection通过它设置barrier的约束方向.
简单使用
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="28dp"
android:text="TextView"
app:layout_constraintLeft_toRightOf="@+id/barrier7"
tools:layout_editor_absoluteY="64dp"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="button16,button17" />
<Button
android:id="@+id/button16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="1dp"
tools:layout_editor_absoluteY="16dp" />
<Button
android:id="@+id/button17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="1dp"
tools:layout_editor_absoluteY="78dp" />
结果:
之后不管你咋改变barrier的里面的属性,barrier外面的控件始终都会以barrier为约束.