什么是ConstraintLayout

ConstraintLayout又称约束布局,是当前Google主推的布局,支持RelativeLayout的所有特性,功能上更加强大.其最大好处是大幅减少布局嵌套层次,提升界面绘制速度.但须知道,事物都有两面性,强大的另外一面是复杂.

基础样例

1. 单控件相对于父控件定位

效果图

代码

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="居中文本"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

• 代码说明:

1. app:layout_constraintBottom_toBottomOf,设置当前控件底部和目标控件底部对齐.
2. app:layout_constraintLeft_toLeftOf,设置当前控件左侧和目标控件左侧对齐.
3. app:layout_constraintRight_toRightOf,设置当前控件右侧和目标控件右侧对齐.
4. app:layout_constraintTop_toTopOf,设置当前控件顶部和目标控件顶部对齐.

• 布局界面预览图
  
  
  上图中的每一个实心圆点及圆点上连接的弹簧对应上面每一个属性:
  左侧对应: app:layout_constraintLeft_toLeftOf;
  右侧对应: app:layout_constraintRight_toRightOf;
  上面对应: app:layout_constraintTop_toTopOf
  下面对应: app:layout_constraintBottom_toBottomOf

2. 相对同级兄弟控件对齐

设置本控件的一侧和目标控件(同级兄弟控件)的同侧对齐,如左侧对齐、右侧对齐.

效果图

代码

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/centerButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="居中按钮"
        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="左侧按钮"
        app:layout_constraintBottom_toBottomOf="@id/centerButton"
        app:layout_constraintRight_toLeftOf="@id/centerButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧按钮"
        app:layout_constraintBottom_toBottomOf="@id/centerButton"
        app:layout_constraintLeft_toRightOf="@id/centerButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上面按钮"
        app:layout_constraintBottom_toTopOf="@id/centerButton"
        app:layout_constraintLeft_toLeftOf="@id/centerButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="下面按钮"
        app:layout_constraintLeft_toLeftOf="@id/centerButton"
        app:layout_constraintTop_toBottomOf="@id/centerButton" />
</androidx.constraintlayout.widget.ConstraintLayout>

• 代码说明:

1. app:layout_constraintRight_toLeftOf,设置当前控件右侧和目标控件左侧对齐(parent表示父控件).
2. app:layout_constraintLeft_toRightOf,设置当前控件左侧和目标控件右侧对齐.
3. app:layout_constraintBottom_toTopOf,设置当前控件底部和目标控件顶部对齐.
4. app:layout_constraintTop_toBottomOf,设置当前控件顶部和目标控件底部对齐.

• 布局界面预览图

  
  
  
  
  
  
  
  
  
  

  每个控件上的两个实心圆点对应控件里设置的两个constraint属性.

基础样例完整源代码

https://gitee.com/cxyzy1/ConstraintLayoutDemo

常用属性说明

更多属性及实际效果,可以在开发工具里自行体验.

安卓开发入门教程系列汇总

开发语言学习

Kotlin语言基础

UI控件学习系列

UI控件_TextView
UI控件_EditText
UI控件_Button
UI控件_ImageView
UI控件_RadioButton
UI控件_CheckBox
UI控件_ProgressBar

关注头条号,第一时间获取最新文章: