如何正确地将布局放入 CardView？答案

【问题标题】：How to properly put a layout into a CardView?如何正确地将布局放入 CardView？
【发布时间】：2015-11-20 08:24:05
【问题描述】：

背景

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

问题

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

基本上布局包括的内容是：

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

在左侧垂直居中的 imageView。
右上角（角）图像视图
#2 下方的右下角（角）图像视图。有时可能会出现 GONE 可见性。
#1 和 #2 & #3 之间的两个 TextView，使用 LinearLayout 垂直居中，并尽可能多地占用宽度

布局应采用全宽，但高度与需要相同，并指定最小高度。

问题是，将布局保持原来的样子是行不通的，并且它不断获得比所需更多的空间，甚至不是中心视图。

我尝试过的

这是我想要放入 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 内的布局？

【问题讨论】：

你能告诉我们你使用“假”cardview的结果是什么吗？所以我们可以确切地知道你想要什么样的布局。
@NikoYuwono 是的，看看我制作的应用程序：play.google.com/store/apps/details?id=com.lb.app_manager。帖子中真正的cardView的问题是左侧图标和文本没有垂直居中，并且“！”图标不在底部。
刚刚在我的设备中尝试了您的代码，它运行良好。你是否以编程方式膨胀这个？或者您可以发布一些用于显示卡片视图的代码吗？谢谢
@NikoYuwono 奇怪。现在我已经测试过了，它工作正常。会改变问题，因为它似乎没问题。
@NikoYuwono 现在我又遇到了这个问题...... cardView 占据了整个空间，而不是我告诉它的空间。我不知道发生了什么......这是项目：files.fm/u/ichqdgc。请检查一下。代码也有可选择和可检查的卡片视图，所以如果我愿意，点击它们也应该能够切换它们。

标签： android android-layout android-cardview

【解决方案1】：

您可以使用 Linearlayouts 解决您的问题：

<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。中间行包含一个带有图像视图 #1 的 Linearlayout（这次是水平的）和一个用于 TextViews 的垂直对齐的 Linearlayout（右边距为 20dp）。

【讨论】：

很确定你混淆了布局的方向。这没有意义。请尝试我所做的，并将其放入 CardView 中，看看你是否得到了我想要完成的事情..