老路子先看效果圖

1.先畫7個小球會全部重疊在一起

?

<?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"android:layout_width="match_parent"android:layout_height="80dp"><CheckBoxandroid:id="@+id/tv1"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="S"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv2"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="M"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv3"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="T"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv4"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="W"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv5"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="T"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv6"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="F"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv7"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="S"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>

2.然后將7個小球一個挨著一個如下圖:

<?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"android:layout_width="match_parent"android:layout_height="80dp"><CheckBoxandroid:id="@+id/tv1"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="S"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv2"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="M"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@+id/tv1"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv3"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="T"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@+id/tv2"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv4"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="W"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@+id/tv3"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv5"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="T"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@+id/tv4"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv6"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="F"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@+id/tv5"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv7"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="S"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@+id/tv6"app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>

然后再使用chains引用鏈功能如下圖

步驟=>先選中7個按鈕，然后右鍵選擇Chains->Create Horizontal 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"android:layout_width="match_parent"android:layout_height="80dp"><CheckBoxandroid:id="@+id/tv1"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="S"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/tv2"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv2"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="M"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/tv3"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv1"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv3"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="T"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/tv4"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv2"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv4"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="W"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/tv5"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv3"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv5"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="T"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/tv6"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv4"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv6"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="F"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/tv7"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv5"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv7"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="S"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv6"app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>

布局中缺失的部分check_box_bg.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_checked="false"><shape><solid android:color="@color/wyze_color_CED6DE" /><corners android:radius="50dp" /></shape></item><item android:state_checked="true"><shape><solid android:color="@color/wyze_color_00D0B9" /><corners android:radius="50dp" /></shape></item> </selector>

顏色缺失check_box_text_color.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="@color/black" android:state_checked="false" /><item android:color="@color/white" android:state_checked="true" /> </selector>

看下方法二

同上操作

方法二xml代碼如下

<?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"android:layout_width="match_parent"android:layout_height="80dp"><CheckBoxandroid:id="@+id/tv1"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="S"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/tv2"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><CheckBoxandroid:id="@+id/tv2"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="M"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="@+id/tv1"app:layout_constraintEnd_toStartOf="@+id/tv3"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv1"app:layout_constraintTop_toTopOf="@+id/tv1" /><CheckBoxandroid:id="@+id/tv3"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="T"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="@+id/tv2"app:layout_constraintEnd_toStartOf="@+id/tv4"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv2"app:layout_constraintTop_toTopOf="@+id/tv2" /><CheckBoxandroid:id="@+id/tv4"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="W"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="@+id/tv3"app:layout_constraintEnd_toStartOf="@+id/tv5"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv3"app:layout_constraintTop_toTopOf="@+id/tv3" /><CheckBoxandroid:id="@+id/tv5"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="T"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="@+id/tv4"app:layout_constraintEnd_toStartOf="@+id/tv6"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv4"app:layout_constraintTop_toTopOf="@+id/tv4" /><CheckBoxandroid:id="@+id/tv6"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="F"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="@+id/tv5"app:layout_constraintEnd_toStartOf="@+id/tv7"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv5"app:layout_constraintTop_toTopOf="@+id/tv5" /><CheckBoxandroid:id="@+id/tv7"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/check_box_bg"android:button="@null"android:gravity="center"android:text="S"android:textAllCaps="true"android:textColor="@color/check_box_text_color"app:layout_constraintBottom_toBottomOf="@+id/tv6"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/tv6"app:layout_constraintTop_toTopOf="@+id/tv6" /> </androidx.constraintlayout.widget.ConstraintLayout>

GitHub源碼查看：源碼查看

約束布局Google官方API：官方文檔ConstraintLayout

Google官方微信技術博客：約束布局性能介紹

Google官方文檔說明：文檔直達

總結

以上是生活随笔為你收集整理的Android开发之约束布局平均分布|ConstraintLayout平均分布|约束布局均匀分布|ConstraintLayout均匀分布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。