相对布局中的 Android layout_below答案

【问题标题】：Android layout_below in RelativeLayout相对布局中的 Android layout_below
【发布时间】：2016-04-25 07:04:00
【问题描述】：

我遇到了一个奇怪的问题，下面是我的布局：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
>

<ImageView
    android:src="@color/colorAccent"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>
<ImageView
    android:id="@+id/image"
    android:src="@mipmap/ic_launcher"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<TextView
    android:text="text"
    android:layout_below="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</RelativeLayout>

TextView 没有低于预期的ImageView，它低于ImageView 的原始位置。

如果我将RelativeLayout 的layout_height 设置为200dp 或match_parent，它工作正常。

我该如何解决？

【问题讨论】：

嗯，这是一个相对的布局。您需要指定每个元素相对于另一个元素的位置。要对齐行或列中的所有元素，请使用 LinearLayout
为什么要添加第一个图像视图？如果要更改布局的背景颜色，还有另一种方法。
使用 match_parent 而不是 wrap_content 到根布局。
不要对“PINK”颜色使用单独的图像视图，您可以使用 setBackground 属性将颜色设置为相对布局。你也使用 android:layout_centerInParent="true" 作为第二个 imageview .. 所以如果你想在 ImageView 下设置 TextView，请不要使用该属性。希望它会有所帮助:)

标签： android android-layout user-interface android-relativelayout

【解决方案1】：

您的简单解决方案是在您的根布局中使用android:layout_height="match_parent"。

如果您在根布局中使用wrap_content，android:layout_centerInParent 和android:layout_below 将无法正常工作。

使用高度作为match_parent 或静态。

选择 1：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp">

选择 2：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

选择 3：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text" />
</LinearLayout>

现在由您决定使用哪种解决方案。

【讨论】：

【解决方案2】：

如果您希望您的Relative Layout 到Wrap Content 和您的第二个Image view 申请layout_centerInParent，那么您需要将marginTop 给Text View。

试试下面的代码。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="?attr/colorPrimary" />

    <ImageView
        android:id="@+id/imageTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tvText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageTest"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="80dp"
        android:text="text"
        android:textSize="22sp" />


</RelativeLayout>

这是屏幕截图。

【讨论】：

感谢您的帮助。
@xujifa 如果对您有帮助，请点赞并接受答案。谢谢:)。

【解决方案3】：

感谢大家的回答。我终于有了解决办法。这不是一个很好的解决方案，但效果很好。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<ImageView
    android:id="@+id/background"
    android:src="@color/colorAccent"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>
<RelativeLayout
    android:layout_height="warp_content"
    android:layout_width="match_parent"
    android:layout_alignTop="@+id/background"
    android:layout_alignBottom="@+id/background">
    <ImageView
        android:id="@+id/image"
        android:src="@mipmap/ic_launcher"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:text="text"
        android:layout_below="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>
</RelativeLayout>

【讨论】：

【解决方案4】：

最佳答案实际上不一定是正确的。您不需要为元素提供顶部边距，使其位于图像视图下方。在我的情况下，我有一个带有 ImageView 和 ListView 的 RelativeLayout。我希望 ImageView 高于 ListView 但 ListView 覆盖 ImageView 下方的区域。我通过将layout_alignParentTop 设置为ImageView 并将layout_below 添加到ListView 来实现。

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context="io.menuloop.menuloopandroid.MainActivity">
    <ImageView android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/yourStory" android:src="@drawable/ic_face_black_24dp" />
    <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/yourStory"
            android:layout_centerHorizontal="true" android:id="@+id/listView" />
</RelativeLayout>

【讨论】：