使用width = wrap content将ConstraintLayout中的所有子项宽度匹配为最宽的子项宽度 [英] Match all children width to widest child width in ConstraintLayout with width = wrap content
问题描述
ConstraintLayout功能强大，但有时很棘手.
ConstraintLayout is powerful but tricky sometimes.
我想用ConstraintLayout实现布局，而使用LinearLayout可以轻松实现.
I want to implement a layout with the ConstraintLayout which can be easily achieved with the LinearLayout.
-
蓝色区域是父约束.红色部分是LinearLayout.我想通过保持以下条件将此LinearLayout转换为ConstraintLayout
The Blue area is parent constraintLayout. The red part is LinearLayout. I want to convert this LinearLayout to ConstraintLayout by maintaining the following conditions
- 所有子项(按钮)的宽度应与最宽的子项相匹配.
- 最大的孩子并没有固定.它将在运行时更改.
-
应该保留红色框以保持
wrap_content.
我尝试过使用障碍物，准则和约束布局的其他属性，但均未成功.
I have tried with doing with barrier, guidelines and other properties of constraint layout without success.
这是LinearLayout的代码:
<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"
android:background="#476dce"
android:padding="16dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#f5aaaa">
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
tools:text="Small" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
tools:text="Bigggggeer" />
<Button
android:id="@+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
tools:text="Even Bigggggggggeer" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
推荐答案
当前的1.1稳定版本允许基于屏障和单独背景的棘手解决方案.
The current 1.1 stable release allows a tricky solution based on Barriers and separate backgrounds.
<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>
我们可以将文本与按钮分开，并在每端设置两个障碍，以跟踪三个TextView之间最大的文本.
因此，现在，按钮仅充当背景和单击区域，并且它们被设置为匹配两个障碍之间的约束.
您可能需要注意与文本相关的高程，因为Button默认具有高程.
当然，如果您不喜欢Buttons的动画高程，请将其更改为视图.
最后，ConstraintLayout具有链功能，可以更灵活地模仿LinearLayout的行为.
We can separate texts from buttons, and set two barriers at each end to track the biggest text between the three TextViews.
So now, Buttons act only as a background and as click zones, and, they are set to match constraint between the two barriers.
You might want to be careful with elevation related to texts as Buttons have elevation by default.
Of course, if you are not into Buttons' animated elevation, change them to views.
Finally, ConstraintLayout has the chains feature to mimic LinearLayout's behavior in a more flexible way.
希望这会有所帮助！
这篇关于使用width = wrap content将ConstraintLayout中的所有子项宽度匹配为最宽的子项宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
