使用 RelativeLayout 垂直堆叠动态高度 ImageView答案

【问题标题】：Vertically stacking a dynamic height ImageView with a RelativeLayout使用 RelativeLayout 垂直堆叠动态高度 ImageView
【发布时间】：2016-12-14 11:22:59
【问题描述】：

我正在尝试使用RelativeLayout 垂直堆叠动态高度ImageView（图像将被下载并显示，因此不知道高度），我需要一个类似于右侧图中的结果下图，其中蓝色矩形代表ImageView，红色代表其他RelativeLayout。

到目前为止，我在下面尝试过，它给了我左侧图的输出（布局重叠）。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="2dp"
    card_view:cardUseCompatPadding="true"
    card_view:overlay="@drawable/default_selector">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- ImageView represented by Blue rectangle -->
        <ImageView
            android:id="@+id/thumb_image_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitXY" />

        <!-- RelativeLayout represented by Red rectangle -->
        <RelativeLayout
            android:id="@+id/thumb_bottom_view"
            android:layout_width="match_parent"
            android:layout_height="@dimen/default_height"
            android:layout_alignParentBottom="true"
            android:animateLayoutChanges="true"
            android:gravity="center_vertical">

            <TextView
                android:id="@+id/thumb_text_resolution"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:paddingLeft="@dimen/default_gap"
                android:paddingRight="@dimen/default_gap"
                android:textColor="@color/Thumb.Text"
                android:textSize="14sp" />

            <ImageButton
                android:id="@+id/thumb_button_heart"
                android:layout_width="@dimen/default_press_size"
                android:layout_height="@dimen/default_press_size"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="?heartBackground"
                android:scaleType="centerInside"
                android:src="@drawable/ic_action_heart_empty" />

        </RelativeLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

为了让它看起来像右侧图，我应该改变什么？

【问题讨论】：

标签： android android-layout android-relativelayout

【解决方案1】：

通过删除 android:layout_alignParentEnd="true" 并改为添加 android:layout_below="@+id/thumb_image_view" 来修复它。

<RelativeLayout
    android:id="@+id/thumb_bottom_view"
    android:layout_width="match_parent"
    android:layout_height="@dimen/default_height"
    android:layout_below="@+id/thumb_image_view"
    android:animateLayoutChanges="true"
    android:gravity="center_vertical">

【讨论】：