如何在 FlexboxLayout 中使用权重使 3 个线性布局居中?
How to use weight in FlexboxLayout to center 3 linear layouts?
我有一个 FlexboxLayout
,里面有 3 个 LinearLayout's
,我想以相同的宽度和高度居中,但它们的宽度不同。我怎样才能让它们在 FlexboxLayout
中居中?
这是我的 XML 代码:
<com.google.android.flexbox.FlexboxLayout
android:visibility="@{TextUtils.isEmpty(listing.phone) && TextUtils.isEmpty(listing.email) && 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>
如果您打算使用 FlexBox
,您可以尝试将每个 LinearLayout
的 layout_width
设置为 0dp
,并且 app:layout_flexGrow="1"
所有 LinearLayout 都将展开平均容纳所有 space 剩下的:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_flexGrow="1"
...>
我有一个 FlexboxLayout
,里面有 3 个 LinearLayout's
,我想以相同的宽度和高度居中,但它们的宽度不同。我怎样才能让它们在 FlexboxLayout
中居中?
这是我的 XML 代码:
<com.google.android.flexbox.FlexboxLayout
android:visibility="@{TextUtils.isEmpty(listing.phone) && TextUtils.isEmpty(listing.email) && 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>
如果您打算使用 FlexBox
,您可以尝试将每个 LinearLayout
的 layout_width
设置为 0dp
,并且 app:layout_flexGrow="1"
所有 LinearLayout 都将展开平均容纳所有 space 剩下的:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_flexGrow="1"
...>