约束性布局

布局类型1：

约束性布局1.PNG

<?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">

   <TextView
       android:id="@+id/textView"
       android:layout_width="match_parent"
       android:layout_height="45dp"
       android:background="#FD7070"
       android:gravity="center"
       android:text="TextView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <ImageView
       android:id="@+id/imageView"
       android:layout_width="match_parent"
       android:layout_height="196dp"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/textView"
       android:background="@mipmap/back"
       />

   <ImageView
       android:id="@+id/imageView2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:layout_constraintBottom_toBottomOf="@+id/imageView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/imageView"
       tools:srcCompat="@tools:sample/avatars" />
</androidx.constraintlayout.widget.ConstraintLayout>

布局类型2：

约束性布局2.PNG

<?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">

   <TextView
       android:id="@+id/a"
       android:layout_width="0dp"
       android:layout_height="60dp"
       android:background="#F44336"
       android:gravity="center"
       android:text="A"
       app:layout_constraintHorizontal_weight="1"
       app:layout_constraintEnd_toStartOf="@id/b"
       app:layout_constraintStart_toStartOf="parent"

       />

   <TextView
       android:id="@+id/b"
       android:layout_width="0dp"
       android:layout_height="60dp"
       android:background="#673AB7"
       android:text="B"
       android:gravity="center"
       app:layout_constraintHorizontal_weight="1"
       app:layout_constraintStart_toEndOf="@+id/a"
       app:layout_constraintEnd_toStartOf="@id/c"
       />

   <TextView
       android:id="@+id/c"
       android:layout_width="0dp"
       android:layout_height="60dp"
       android:background="#00BCD4"
       android:gravity="center"
       android:text="C"
       app:layout_constraintHorizontal_weight="1"
       app:layout_constraintStart_toEndOf="@+id/b"
       app:layout_constraintEnd_toEndOf="parent"
       />


</androidx.constraintlayout.widget.ConstraintLayout>

布局类型3：

约束性布局3.PNG

<?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">

   <TextView
       android:id="@+id/a"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textColor="#F10635"
       android:textSize="120dp"
       android:gravity="center"
       android:text="88"
       app:layout_constraintStart_toStartOf="parent"
       />

   <TextView
       android:id="@+id/b"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textColor="#FF5722"
       android:textSize="60dp"
       android:gravity="center"
       android:text="%"
       app:layout_constraintBaseline_toBaselineOf="@id/a"
       app:layout_constraintStart_toEndOf="@id/a"
       />

</androidx.constraintlayout.widget.ConstraintLayout>

布局类型3：

约束性布局4.PNG

<?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">

   <TextView
       android:id="@+id/a"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textColor="#CDDC39"
       android:textSize="120dp"
       android:background="#FF5722"
       android:gravity="center"
       android:text="sun"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       />

   <TextView
       android:id="@+id/b"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textColor="#FF5722"
       android:textSize="60dp"
       android:gravity="center"
       android:text="earth"
       app:layout_constraintCircle="@id/a"
       app:layout_constraintCircleAngle="35"
       app:layout_constraintCircleRadius="200dp"
       />

</androidx.constraintlayout.widget.ConstraintLayout>