ConstraintLayout常用方法示例

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">
   
   
       <!-- linear效果 -->
       <!-- bias[0-1]偏移 -->
       <!-- chainStyle:默认spread完全均分|spread_inside顶到两端中间均分|packed挤在中间两端空出 -->
       <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/cl_linear"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:visibility="visible"
           app:layout_constraintTop_toTopOf="parent">
   
           <!-- 第一行 -->
           <Button
               android:id="@+id/bta_first"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="first"
               app:layout_constraintEnd_toStartOf="@+id/bta_second"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toTopOf="parent" />
   
           <Button
               android:id="@+id/bta_second"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="second"
               app:layout_constraintEnd_toStartOf="@+id/bta_third"
               app:layout_constraintStart_toEndOf="@+id/bta_first"
               app:layout_constraintTop_toTopOf="@+id/bta_first" />
   
           <Button
               android:id="@+id/bta_third"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="third"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toEndOf="@+id/bta_second"
               app:layout_constraintTop_toTopOf="@+id/bta_first" />
   
   
           <!-- 第二行 -->
           <Button
               android:id="@+id/btb_first"
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:layout_marginTop="8dp"
               android:text="first"
               app:layout_constraintEnd_toStartOf="@+id/btb_second"
               app:layout_constraintHorizontal_weight="1"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toBottomOf="@+id/bta_first" />
   
           <Button
               android:id="@+id/btb_second"
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:text="second"
               app:layout_constraintEnd_toStartOf="@+id/btb_third"
               app:layout_constraintHorizontal_weight="2"
               app:layout_constraintStart_toEndOf="@+id/btb_first"
               app:layout_constraintTop_toTopOf="@+id/btb_first" />
   
           <Button
               android:id="@+id/btb_third"
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:text="third"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintHorizontal_weight="3"
               app:layout_constraintStart_toEndOf="@+id/btb_second"
               app:layout_constraintTop_toTopOf="@+id/btb_first" />
   
   
           <!-- 第三行chainStyle=spread_inside -->
           <Button
               android:id="@+id/btc_first"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="first"
               app:layout_constraintEnd_toStartOf="@+id/btc_second"
               app:layout_constraintHorizontal_chainStyle="spread_inside"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toBottomOf="@+id/btb_first" />
   
           <Button
               android:id="@+id/btc_second"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="second"
               app:layout_constraintEnd_toStartOf="@+id/btc_third"
               app:layout_constraintStart_toEndOf="@+id/btc_first"
               app:layout_constraintTop_toTopOf="@+id/btc_first" />
   
           <Button
               android:id="@+id/btc_third"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="third"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toEndOf="@+id/btc_second"
               app:layout_constraintTop_toTopOf="@+id/btc_first" />
   
   
           <!-- 第四行chainStyle=packed -->
           <Button
               android:id="@+id/btd_first"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="first"
               app:layout_constraintEnd_toStartOf="@+id/btd_second"
               app:layout_constraintHorizontal_chainStyle="packed"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toBottomOf="@+id/btc_first" />
   
           <Button
               android:id="@+id/btd_second"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="second"
               app:layout_constraintEnd_toStartOf="@+id/btd_third"
               app:layout_constraintStart_toEndOf="@+id/btd_first"
               app:layout_constraintTop_toTopOf="@+id/btd_first" />
   
           <Button
               android:id="@+id/btd_third"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="third"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toEndOf="@+id/btd_second"
               app:layout_constraintTop_toTopOf="@+id/btd_first" />
   
   
           <!-- 第五行chainStyle=packed & layout_constraintHorizontal_bias -->
           <Button
               android:id="@+id/bte_first"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="first"
               app:layout_constraintEnd_toStartOf="@+id/bte_second"
               app:layout_constraintHorizontal_bias="0.8"
               app:layout_constraintHorizontal_chainStyle="packed"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toBottomOf="@+id/btd_first" />
   
           <Button
               android:id="@+id/bte_second"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="second"
               app:layout_constraintEnd_toStartOf="@+id/bte_third"
               app:layout_constraintStart_toEndOf="@+id/bte_first"
               app:layout_constraintTop_toTopOf="@+id/bte_first" />
   
           <Button
               android:id="@+id/bte_third"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="third"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toEndOf="@+id/bte_second"
               app:layout_constraintTop_toTopOf="@+id/bte_first" />
       </androidx.constraintlayout.widget.ConstraintLayout>
   
   
       <!-- Guideline链line -->
       <!-- layout_constraintGuide_begin距离左边或顶部 -->
       <!-- layout_constraintGuide_end距离右边或底部 -->
       <!-- layout_constraintGuide_percent相对parent的位置百分比 -->
       <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/cl_guide_line"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:visibility="visible"
           app:layout_constraintTop_toBottomOf="@+id/cl_linear">
   
           <androidx.constraintlayout.widget.Guideline
               android:id="@+id/g_vertical"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:orientation="vertical"
               app:layout_constraintGuide_begin="40dp" />
   
           <androidx.constraintlayout.widget.Guideline
               android:id="@+id/g_horizontal"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:orientation="horizontal"
               app:layout_constraintGuide_begin="40dp" />
   
           <Button
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginStart="8dp"
               android:layout_marginTop="8dp"
               android:text="button"
               app:layout_constraintStart_toEndOf="@+id/g_vertical"
               app:layout_constraintTop_toBottomOf="@+id/g_horizontal" />
   
   
           <!-- layout_constraintGuide_percent占屏幕的百分比(同时有begin和percent以percent为准) -->
           <androidx.constraintlayout.widget.Guideline
               android:id="@+id/g_horizontal_percent"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:orientation="horizontal"
               app:layout_constraintGuide_begin="20dp"
               app:layout_constraintGuide_percent="0.5" />
   
           <androidx.constraintlayout.widget.Guideline
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:orientation="vertical"
               app:layout_constraintGuide_begin="20dp"
               app:layout_constraintGuide_percent="0.5" />
   
       </androidx.constraintlayout.widget.ConstraintLayout>
   
   
       <!-- Barrier&Group -->
       <!-- barrierDirection约束方向 -->
       <!-- constraint_referenced_ids约束参考id -->
       <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/cl_barrier"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           app:layout_constraintTop_toBottomOf="@+id/cl_guide_line">
   
           <TextView
               android:id="@+id/tvb1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="tv1 ashe"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toTopOf="parent" />
   
           <TextView
               android:id="@+id/tvb2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginTop="20dp"
               android:text="tv2 akali\ntv2 alistar"
               app:layout_constraintStart_toStartOf="@+id/tvb1"
               app:layout_constraintTop_toBottomOf="@+id/tvb1" />
   
           <androidx.constraintlayout.widget.Barrier
               android:id="@+id/bEnd"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               app:barrierDirection="end"
               app:constraint_referenced_ids="tvb1,tvb2" />
   
           <androidx.constraintlayout.widget.Barrier
               android:id="@+id/bBottom"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               app:barrierDirection="bottom"
               app:constraint_referenced_ids="tvb1,tvb2" />
   
           <TextView
               android:id="@+id/tv3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginStart="20dp"
               android:layout_marginTop="20dp"
               android:text="tv3 haohaoxuexi"
               app:layout_constraintStart_toEndOf="@+id/bEnd"
               app:layout_constraintTop_toBottomOf="@+id/bBottom" />
   
   
           <!-- Group控制多个控件的可见性 -->
           <androidx.constraintlayout.widget.Group
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:visibility="visible"
               app:constraint_referenced_ids="tvb1,tvb2,tv3" />
   
       </androidx.constraintlayout.widget.ConstraintLayout>
   
   
       <!-- layout_constraintBaseline_toBaselineOf基线对其 -->
       <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/clBaseline"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           app:layout_constraintTop_toBottomOf="@id/cl_barrier">
   
           <TextView
               android:id="@+id/tvBaseline"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="参考文字1"
               android:textSize="20sp"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toTopOf="parent" />
   
           <TextView
               android:id="@+id/tvBaseline1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="对比文字1"
               app:layout_constraintBottom_toBottomOf="@+id/tvBaseline"
               app:layout_constraintStart_toEndOf="@+id/tvBaseline"
               app:layout_constraintTop_toTopOf="@+id/tvBaseline" />
   
           <TextView
               android:id="@+id/tvBaseline2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="对比文字2"
               app:layout_constraintBaseline_toBaselineOf="@+id/tvBaseline"
               app:layout_constraintStart_toEndOf="@+id/tvBaseline1" />
   
           <TextView
               android:id="@+id/tvBaseline3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="对比文字3"
               app:layout_constraintBottom_toBottomOf="@+id/tvBaseline"
               app:layout_constraintStart_toEndOf="@+id/tvBaseline2" />
   
       </androidx.constraintlayout.widget.ConstraintLayout>
   
   
       <!-- 圆形定位 -->
       <!-- layout_constraintCircle参考控件id -->
       <!-- layout_constraintCircleRadius半径 -->
       <!-- layout_constraintCircleAngle角度[0-360] -->
       <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/clCircle"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           app:layout_constraintTop_toBottomOf="@+id/clBaseline">
   
           <Button
               android:id="@+id/btCircleRef"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:minWidth="0dp"
               android:minHeight="0dp"
               android:text="ref"
               android:textAllCaps="false"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toTopOf="parent" />
   
           <Button
               android:id="@+id/btCircle1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:minWidth="0dp"
               android:minHeight="0dp"
               android:text="bt1"
               android:textAllCaps="false"
               app:layout_constraintCircle="@id/btCircleRef"
               app:layout_constraintCircleAngle="100"
               app:layout_constraintCircleRadius="80dp"
               tools:ignore="MissingConstraints" />
   
           <Button
               android:id="@+id/btCircle2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:minWidth="0dp"
               android:minHeight="0dp"
               android:text="bt2"
               android:textAllCaps="false"
               app:layout_constraintCircle="@id/btCircleRef"
               app:layout_constraintCircleAngle="150"
               app:layout_constraintCircleRadius="80dp"
               tools:ignore="MissingConstraints" />
   
       </androidx.constraintlayout.widget.ConstraintLayout>
   
   
       <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/clConstraintMatch"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           app:layout_constraintTop_toBottomOf="@+id/clCircle">
   
           <!-- width==0dp时可以使用layout_constraintWidth_min(优先级高)或者layout_constraintWidth_percent[0-1]设置宽度 -->
           <TextView
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:text="ppppppppppppppppppppppppppppppppppppppppppppppppp"
               android:textSize="30sp"
               app:layout_constrainedWidth="true"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toTopOf="parent"
               app:layout_constraintWidth_default="percent"
               app:layout_constraintWidth_min="650dp"
               app:layout_constraintWidth_percent="0.5" />
   
       </androidx.constraintlayout.widget.ConstraintLayout>
   
   
       <!-- layout_constraintDimensionRatio控制控件宽高比 -->
       <androidx.constraintlayout.widget.ConstraintLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           app:layout_constraintTop_toBottomOf="@+id/clConstraintMatch">
   
           <!-- 控件width==0时1:1 -->
           <Button
               android:id="@+id/btRatioA"
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:text="A"
               app:layout_constraintDimensionRatio="1:1"
               app:layout_constraintLeft_toLeftOf="parent"
               app:layout_constraintTop_toTopOf="parent" />
   
           <!-- 控件height==0时1:1 -->
           <Button
               android:id="@+id/btRatioB"
               android:layout_width="wrap_content"
               android:layout_height="0dp"
               android:text="B"
               app:layout_constraintDimensionRatio="1:1"
               app:layout_constraintStart_toEndOf="@id/btRatioA"
               app:layout_constraintTop_toTopOf="@+id/btRatioA" />
   
           <!-- 控件height==0&width==60dp时1.5:1 -->
           <Button
               android:id="@+id/btRatioC"
               android:layout_width="60dp"
               android:layout_height="0dp"
               android:text="C"
               app:layout_constraintDimensionRatio="1.5:1"
               app:layout_constraintStart_toEndOf="@id/btRatioB"
               app:layout_constraintTop_toTopOf="@+id/btRatioA" />
   
       </androidx.constraintlayout.widget.ConstraintLayout>
   
   </androidx.constraintlayout.widget.ConstraintLayout>
   

2. 效果