一.ConstraintLayout简介
ConstraintLayout 是一个ViewGroup,它允许您以灵活的方式定位和大小小部件。ConstraintLayout可以作为一个支持库使用,可以在Android系统上使用API level 9 (Gingerbread)。
ConstraintLayout采用方向约束的方式对控件进行定位,至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置。
二.基础属性
1.常见属性
//本控件的左边在XX控件的左边&右边 可取值:parent&id
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
//本控件的右边在XX控件的左边&右边 可取值:parent&id
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
//本控件的上边在XX控件的上边&下边 可取值:parent&id
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
//本控件的下边在XX控件的上边&下边 可取值:parent&id
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
//本控件的开始在XX控件的结尾&开始 可取值:parent&id
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
//本控件的结尾在XX控件的开始&结尾 可取值:parent&id
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
//本控件的基线
layout_constraintBaseline_toBaselineOf
2.代码
<1> app:layout_constraintLeft_toLeftOf="parent" :控件的左边在父布局的左边。即 设置TextView1在父布局的左边。
<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="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="文字1"
android:textColor="#FFFFFF"
app:layout_constraintLeft_toLeftOf="parent"
tools:ignore="MissingConstraints">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
<2> app:layout_constraintLeft_toRightOf="@+id/activity_constraint_layout_TextView1" :控件的左边在TextView1的右边。即 设置TextView2在TextView1的右面。
<?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="60dp"
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="60dp"
android:layout_marginStart="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>
</androidx.constraintlayout.widget.ConstraintLayout>
<3> app:layout_constraintTop_toBottomOf="@+id/activity_constraint_layout_TextView1":控件的上边在TextView1的下面。即 设置TextView2在TextView1的下面。
<?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="60dp"
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="60dp"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="文字2"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="@+id/activity_constraint_layout_TextView1"
tools:ignore="MissingConstraints">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
<4> app:layout_constraintRight_toRightOf="parent":控件的右边在父布局的右边。即 设置TextView1在父布局的右边。
<?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="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="文字1"
android:textColor="#FFFFFF"
app:layout_constraintRight_toRightOf="parent"
tools:ignore="MissingConstraints">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
<5> app:layout_constraintStart_toEndOf="@id/activity_constraint_layout_TextView1":控件的开始在TextView1的结尾。即 设置TextView2在TextView1的右面。
<?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="60dp"
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="60dp"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="文字2"
android:textColor="#FFFFFF"
app:layout_constraintStart_toEndOf="@id/activity_constraint_layout_TextView1"
tools:ignore="MissingConstraints">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
其实app:layout_constraintStart_toEndOf也可以使用app:layout_constraintLeft_toRightOf,但是使用start和end来表示左和右是为了考虑别的国家的习惯,有的国家开始方向是右,所以使用start和end可以兼容这种情况。
<6> app:layout_constraintBaseline_toBaselineOf="@id/activity_constraint_layout_TextView1":控件的基线和TextView1的基线相同。即 设置TextView1和TextView2在同一个基线上。这种写法也很常见比如 2000¥。
<?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="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="2900"
android:textColor="@color/colorPrimary"
android:textSize="40sp"
tools:ignore="MissingConstraints">
</TextView>
<TextView
android:id="@+id/activity_constraint_layout_TextView2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:gravity="center|left"
android:text="¥"
android:textColor="@color/colorAccent"
android:textSize="26sp"
app:layout_constraintBaseline_toBaselineOf="@id/activity_constraint_layout_TextView1"
app:layout_constraintLeft_toRightOf="@id/activity_constraint_layout_TextView1"
tools:ignore="MissingConstraints">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
<7> 其他很多属性
详情请查看官网:
https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout#CenteringPositionin