Question

我尝试使用ImageView垂直堆叠动态高度RelativeLayout（图像将被下载并显示，因此不知道高度），我需要一个结果如下图所示，其中蓝色矩形代表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>

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

Answer 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">

垂直堆叠动态高度ImageView与RelativeLayout

1 个答案: