- 布局
<?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>
- 效果
