在 imageview 下方显示 textview 而不是在父级下方显示

Question

我正在开发一个 Android 应用程序，但我遇到了如何在视图中显示图像的问题。我的问题是我想在我的 imageView 下方显示一个图像和两个 textView，而不将它们的底部与父级对齐。请参阅下面的线框。

我的问题是，当 imageView 占据了 relativeLayout 的所有高度时，我的 textViews 隐藏在父视图下方。

我尝试了很多东西，但没有什么是令人满意的...... 我试图将我的 imageview 放在一个 linearLayout 中并对其施加重量，但如果我的 imageView 较小，我在 imageView 和 textView 之间会有一个空白。

这很复杂，因为我加载的每个图像都可以有不同的大小，因此我无法为其修复默认大小。 此外，我的布局在 viewPager 中，当我想在适配器上实例化它时获得视图的高度时，它返回 0。所以我无法计算视图中元素的大小。

你知道我该如何做我的布局吗？

也许在 coordinatorLayout 中有循环依赖（但我不知道如何实现）？

这里是我想用我的视图做什么的线框图：image

这里是我的布局代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/layout_photo_detail"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/relative_photo_detail_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/relative_photo_detail_bottom_infos">

        <ImageView
            android:id="@+id/photo_detail_full_size"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/placeholder"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"/>

        <TextView
            android:id="@+id/photo_detail_owner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/photo_detail_full_size"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:textColor="@color/grey"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relative_photo_detail_bottom_infos"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/relative_photo_detail_image"
        android:padding="10dp">

        <ImageView
            android:id="@+id/photo_detail_delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:src="@drawable/delete"/>
    </RelativeLayout>
</RelativeLayout>

Answer 1

尝试将您的代码放在滚动视图中

Answer 2

如下更新你的布局结构：

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

    <!-- TextView 2 -->
    <TextView
        android:id="@+id/photo_detail_owner_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="8dp"
        android:padding="8dp"
        android:gravity="center"
        android:textSize="16sp"
        android:textColor="@android:color/holo_red_dark"
        android:text="This is TextView Two"/>

    <!-- TextView 1 -->
    <TextView
        android:id="@+id/photo_detail_owner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/photo_detail_owner_description"
        android:layout_marginTop="8dp"
        android:padding="8dp"
        android:gravity="center"
        android:textSize="18sp"
        android:textColor="@android:color/black"
        android:text="This is TextView One"/>

    <RelativeLayout
        android:id="@+id/relative_photo_detail_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/photo_detail_owner"
        android:background="@android:color/black">

        <!-- Image -->
        <ImageView
            android:id="@+id/photo_detail_full_size"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/dummy"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"/>

        <!-- Delete Icon -->
        <ImageView
            android:id="@+id/photo_detail_delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="16dp"
            android:src="@drawable/delete"/>
    </RelativeLayout>
</RelativeLayout>

输出：

希望对你有帮助~

Answer 3

像这样的

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    android:layout_gravity="center_horizontal" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Large Text"
    android:id="@+id/textView2"
    android:textAlignment="center" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Large Text"
    android:id="@+id/textView3"
    android:textAlignment="center" />

</LinearLayout>