带有 2 张图像的 Android 布局在底部留下空白答案

【问题标题】：Android layout with 2 images leaving whitespace at the bottom带有 2 张图像的 Android 布局在底部留下空白
【发布时间】：2014-02-02 03:57:59
【问题描述】：

我正在尝试创建一个始终显示 2 个图像的布局，将屏幕长度平均分成两半，屏幕上不留空白（即使图像被中心裁剪）。

到目前为止，我有以下代码，但这会在屏幕底部留下很多空白区域。我在“LinearLayout”中使用“RelativeLayout”的原因是因为我希望我的 text1 视图位于图像 1 的下部（与图像 1 重叠）。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="230dp"
    android:layout_marginBottom="3dp" >

    <ImageView
        android:id="@+id/img1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:contentDescription="@string/picture"
        android:scaleType="centerCrop" />

   <TextView
        android:id="@+id/text1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:padding="5dp"
        android:textColor="#fff" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="230dp"
    android:layout_marginBottom="3dp" >

    <ImageView
        android:id="@+id/img2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:contentDescription="@string/picture"
        android:scaleType="centerCrop" /> 

</RelativeLayout>

【问题讨论】：

标签： android css android-layout

【解决方案1】：

您将每个可能导致问题的布局的高度硬编码为 230dp。在线性布局中，您应该使用权重来平均分配屏幕区域。

在两个相对布局中使用 android:layout_weight="1"

【讨论】：

【解决方案2】：

您描述的布局是一个简单的加权LinearLayout。只需将以下属性添加到您的LinearLayout：

android:weightSum="2"

然后对于每个RelativeLayout，将高度属性更改为：

android:layout_height="0px"

并将以下属性添加到相同的RelativeLayouts：

android:layout_weight="1"

【讨论】：

谢谢！这行得通，但是根据我对 weightSum 的理解，我们并不需要指定它，只要它是孩子的权重之和即可。

【解决方案3】：

如果您想在图像视图上重叠文本视图并在框架布局上使用布局权重，请尝试使用框架布局

布局xml的示例代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="3dp"
    android:layout_weight="0.5" >

    <ImageView
        android:id="@+id/img1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Test"
        android:gravity="center"
        android:layout_gravity="center_vertical|bottom"
        android:padding="5dp"
        android:textColor="@android:color/black" />
</FrameLayout>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="3dp"
    android:layout_weight="0.5" >

    <ImageView
        android:id="@+id/img2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:scaleType="centerCrop" />
</FrameLayout>

【讨论】：