android - 如何正确地将布局放入 CardView 中？

Question

背景

很长一段时间，我有一个假的 CardView，里面有一个基本的布局。

问题

现在我想使用官方的 CardView，但我发现在将布局放入其中时存在一些问题。

基本上，布局包括的是:

++++2
+444+ 
1444+
+444+
++++3

1. 左侧垂直居中的 imageView。
2. 右上(角)imageView
3. #2 下方的右下(角)imageView。有时可能会消失。
4. #1 和#2 & #3 之间的两个 TextView，使用 LinearLayout 垂直居中，并尽可能多地宽度

布局应采用全宽，但只需要达到所需的高度，并指定最小高度。

问题是，按原来的布局放置是行不通的，它不断获得比需要更多的空间，甚至不居中 View 。

我尝试过的

这是我想放入 CardView 的原始布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="?attr/listPreferredItemHeightSmall"
    tools:context=".activities.app_list_activity.AppListActivity" >

    <ImageView
        android:id="@+id/iconImageView"
        android:layout_width="@dimen/app_icon_size"
        android:layout_height="@dimen/app_icon_size"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
        android:src="@android:drawable/sym_def_app_icon"
        tools:ignore="ContentDescription"/>

    <LinearLayout
        android:id="@+id/detailsContainer"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/iconImageView"
        android:layout_toLeftOf="@+id/overflowView"
        android:layout_toRightOf="@+id/iconImageView"
        android:layout_toStartOf="@+id/overflowView"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/labelTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:text="label"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute" />

        <TextView
            android:id="@+id/descriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:minLines="3"
            android:text="description\ndescription\ndescription"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute" />
    </LinearLayout>

    <ImageView
        android:id="@+id/overflowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:clickable="true"
        android:padding="10dp"
        android:src="@drawable/selector_card_overflow_button"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/indicatorImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/overflowView"
        android:layout_alignLeft="@+id/overflowView"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/overflowView"
        android:layout_alignStart="@+id/overflowView"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:src="@android:drawable/ic_dialog_alert"
        tools:ignore="ContentDescription"/>

</RelativeLayout>

当我把它放入 CardView 时，我得到了这个:

屏幕截图中的错误是左侧图标和文本未垂直居中，并且“!”图标不在底部

这就是我所说的:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="200dp"
    app:cardCornerRadius="@dimen/card_radius"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true"
    app:contentPadding="10dp">

    <include layout="@layout/..."/>

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

我已经尝试将布局更改为 GridLayout，但它也没有帮助:

<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:columnCount="3"
    app:rowCount="3">

    <ImageView
        android:id="@+id/iconImageView"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
        android:src="@android:drawable/sym_def_app_icon"
        app:layout_column="0"
        app:layout_gravity="center_vertical"
        app:layout_rowSpan="3"
        app:layout_rowWeight="1"
        tools:ignore="ContentDescription"/>

    <LinearLayout
        android:id="@+id/detailsContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_column="1"
        app:layout_columnWeight="1"
        app:layout_gravity="center_vertical"
        app:layout_rowSpan="3">

        <TextView
            android:id="@+id/labelTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:text="label"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>

        <TextView
            android:id="@+id/descriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:minLines="3"
            android:text="description\ndescription\ndescription"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>
    </LinearLayout>


    <ImageView
        android:id="@+id/overflowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:clickable="true"
        android:padding="10dp"
        android:src="@drawable/selector_card_overflow_button"
        app:layout_column="2"
        app:layout_row="0"
        tools:ignore="ContentDescription"/>

    <android.support.v7.widget.Space
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_column="2"
        app:layout_row="1"
        app:layout_rowWeight="1"/>

    <ImageView
        android:id="@+id/indicatorImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:src="@android:drawable/ic_dialog_alert"
        app:layout_column="2"
        app:layout_gravity="bottom"
        app:layout_row="2"
        tools:ignore="ContentDescription"/>

</android.support.v7.widget.GridLayout>

问题

这是怎么回事？为什么当我将布局放入 CardView 时，它的行为会有所不同？如何保留 CardView 内的布局？

Answer 1

您可以使用线性布局解决您的问题:

<LinearLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView #2
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:grivity="right"/>
        <Linearlayout android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravitiy="center_vertical">
            <ImageView #1 />
            <LinearLayout android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_margin_right="20dp">
                            <Texview/>
                            <Texview/>
                            </LinearLayout>
        </LinearLayout>
        <ImageView #3
            android:grivity="right"
            android:layout_width="20dp"
            android:layout_height="20dp"/>
</Linearlayout>

请勿使用此 xml 1:1，因为我尚未对其进行测试。基本上你创建了 3 个垂直行:顶部和底部包含一个图像:#2 & #3。中心行包含一个带有 ImageView #1 的线性布局(这次是水平的)和一个用于您的 TextView 的垂直对齐的线性布局(右边距为 20dp)。