当前的1.1稳定版本允许基于屏障和独立背景的复杂解决方案。
<android.support.constraint.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">
<View
android:id="@+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#f5aaaa"
app:layout_constraintBottom_toBottomOf="@+id/button3_txt"
app:layout_constraintLeft_toLeftOf="@+id/left_barrier"
app:layout_constraintRight_toRightOf="@+id/right_barrier"
app:layout_constraintTop_toTopOf="@+id/button1_txt" />
<TextView
android:id="@+id/button1_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="8dp"
android:padding="16dp"
android:text="small"
app:layout_constraintBottom_toTopOf="@+id/button2_txt"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/button2_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="8dp"
android:padding="16dp"
android:text="Bigggggeer"
app:layout_constraintBottom_toTopOf="@+id/button3_txt"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button1_txt" />
<TextView
android:id="@+id/button3_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="8dp"
android:padding="16dp"
android:text="Even Bigggggggggeer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button2_txt" />
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@+id/button1_txt"
app:layout_constraintLeft_toLeftOf="@+id/left_barrier"
app:layout_constraintRight_toRightOf="@+id/right_barrier"
app:layout_constraintTop_toTopOf="@+id/button1_txt" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@+id/button2_txt"
app:layout_constraintLeft_toLeftOf="@+id/left_barrier"
app:layout_constraintRight_toRightOf="@+id/right_barrier"
app:layout_constraintTop_toTopOf="@+id/button2_txt" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@+id/button3_txt"
app:layout_constraintLeft_toLeftOf="@+id/left_barrier"
app:layout_constraintRight_toRightOf="@+id/right_barrier"
app:layout_constraintTop_toTopOf="@+id/button3_txt" />
<android.support.constraint.Barrier
android:id="@+id/right_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="button1_txt, button2_txt, button3_txt" />
<android.support.constraint.Barrier
android:id="@+id/left_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="button1_txt, button2_txt, button3_txt" />
</android.support.constraint.ConstraintLayout>
我们可以将文本与按钮分开,并在每一端设置两个屏障,以跟踪三个文本视图之间最大的文本。
所以现在,按钮只作为背景和单击区域,它们被设置为匹配两个屏障之间的约束。
您可能需要注意与文本相关的高程,因为默认情况下按钮具有高程。
当然,如果您不喜欢按钮的动画立面,请将其更改为视图。
最后,ConstraintLayout具有“链”功能,可以更灵活地模拟LinearLayout的行为。
希望这有帮助!