如何在FlexboxLayout中使用权重将3个线性布局居中？

Question

我有一个 FlexboxLayout，里面有三个 LinearLayout，我想让它们具有相同的宽度和高度，并居中显示，但是它们的宽度不同。我该如何在 FlexboxLayout 中居中它们？

这是我的 XML 代码：

 <com.google.android.flexbox.FlexboxLayout
                                android:visibility="@{TextUtils.isEmpty(listing.phone) &amp;&amp; TextUtils.isEmpty(listing.email) &amp;&amp; TextUtils.isEmpty(listing.url) ? View.GONE : View.VISIBLE}"
                                android:layout_width="match_parent"
                                android:layout_height="100dp"
                                android:layout_weight=""
                                android:paddingBottom="16dp"
                                android:orientation="horizontal">

                                <LinearLayout
                                    android:visibility="@{TextUtils.isEmpty(listing.phone) ? View.GONE : View.VISIBLE}"
                                    tools:visibility="visible"
                                    app:layout_flexGrow="1"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:clickable="true"
                                    android:onClick="@{() -> handlers.onClickCall(listing.phone)}"
                                    android:gravity="center"
                                    android:orientation="vertical">

                                    <android.support.v7.widget.AppCompatImageView
                                        android:id="@+id/imageView2"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:background="@drawable/rounded"
                                        android:backgroundTint="@color/listing"
                                        app:backgroundTint="@color/listing"
                                        android:padding="16dp"
                                        app:srcCompat="@drawable/ic_call"
                                        android:tint="#fff" />

                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginTop="8dp"
                                        android:text="@string/call_us"
                                        android:textSize="12sp" />

                                </LinearLayout>

                                <LinearLayout
                                    android:id="@+id/buttonSendEmail"
                                    android:visibility="@{TextUtils.isEmpty(listing.email) ? View.GONE : View.VISIBLE}"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    app:layout_flexGrow="1"
                                    tools:visibility="gone"
                                    android:gravity="center"
                                    android:orientation="vertical">

                                    <android.support.v7.widget.AppCompatImageView
                                        android:id="@+id/buttonEmail"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:background="@drawable/rounded"
                                        android:backgroundTint="@color/listing"
                                        app:backgroundTint="@color/listing"
                                        android:padding="16dp"
                                        app:srcCompat="@drawable/ic_mail"
                                        android:tint="#fff" />

                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginTop="8dp"
                                        android:text="@string/send_email"
                                        android:textSize="12sp" />

                                </LinearLayout>

                                <LinearLayout
                                    android:visibility="@{TextUtils.isEmpty(listing.url) ? View.GONE : View.VISIBLE}"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    app:layout_flexGrow="1"
                                    tools:visibility="gone"
                                    android:gravity="center"
                                    android:clickable="true"
                                    android:onClick="@{() -> handlers.onClickWebsite(listing.url)}"
                                    android:orientation="vertical">

                                    <android.support.v7.widget.AppCompatImageView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:background="@drawable/rounded"
                                        android:backgroundTint="@color/listing"
                                        app:backgroundTint="@color/listing"
                                        android:padding="16dp"
                                        app:srcCompat="@drawable/ic_internet"
                                        android:tint="#fff" />

                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginTop="8dp"
                                        android:text="@string/visit_website"
                                        android:textSize="12sp" />

                                </LinearLayout>

                            </com.google.android.flexbox.FlexboxLayout>

- Luiz Fernando Salvaterra

---

你想把这三个LinearLayout分别放在三行中央，是吗？我说的对吗？ - Keivan Esbati

因为现在最后一个比其他的宽度更大，所以将翻译内容放在同一行，但保持相同的宽度。 - Luiz Fernando Salvaterra

展示，我给了一个加1的ae，然后在我的la manow kk上给了一个度数。恭喜！ - statosdotcom

很明显，哈哈哈，拥抱！ - Luiz Fernando Salvaterra

Answer 1

如果您计划使用FlexBox，则可以尝试将每个LinearLayout的layout_width设置为0dp，并使用app:layout_flexGrow="1"使所有LinearLayout等距扩展以适应所有剩余空间：

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_flexGrow="1"
    ...>

- Keivan Esbati

---

将你的答案中的宽度更改为0dp。 - Luiz Fernando Salvaterra

抱歉，计划添加代码片段但忘记编辑了 >< 顺便说一下，谢谢 ^^ - Keivan Esbati

很棒的解决方案！ - Luiz Fernando Salvaterra