如何根据android中的材料设计制作Cardview？答案

【问题标题】：How to make Cardview According to material design in android?如何根据android中的材料设计制作Cardview？
【发布时间】：2016-05-18 04:29:12
【问题描述】：

我看到了材料设计指南，但它有点混乱，而我设计的卡片左侧有图像，右侧有一些文字。但我不满意它是否符合指南...请检查并告诉。并且我希望我的虚拟文本段落是合理的。

这是我的代码：-

<android.support.v7.widget.CardView
style="@style/MyCardViewStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
>

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

    <ImageView
        android:id="@+id/appImage"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/video"
        android:scaleType="centerCrop"
        tools:ignore="ContentDescription"/>

    <TextView
        android:id="@+id/headingText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/appImage"
        android:paddingLeft="16sp"
        android:paddingRight="16dp"
        android:text="Title"
        android:textColor="#000"
        android:textSize="18sp"
        tools:ignore="RtlHardcoded"/>

    <TextView
        android:id="@+id/subHeaderText"
        style="@style/Base.TextAppearance.AppCompat.Subhead"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/headingText"
        android:layout_toRightOf="@+id/appImage"
        android:paddingLeft="16dp"
        android:text="SubTiltle"
        android:paddingRight="16dp"
        android:textColor="#000"
        android:textSize="15sp"/>

    <TextView
        android:id="@+id/subHeadingText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/subHeaderText"
        android:layout_toRightOf="@+id/appImage"
        android:gravity="left"
        android:lines="5"
        android:maxLines="5"
        android:paddingBottom="16dp"
        android:paddingLeft="16dp"
        android:paddingTop="16dp"
        android:text="@string/stories_detail"
        android:textColor="#737078"
        android:textSize="14sp"/>

    <Button
        android:id="@+id/getDealBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/subHeadingText"
        android:background="@drawable/get_deal_button"
        android:elevation="2dp"
        android:textAllCaps="true"
        android:textColor="#FFFF"
        android:textSize="14sp"
        android:textStyle="bold"/>

</RelativeLayout>

这是我的卡片视图：-

【问题讨论】：

你想怎么样？你能显示截图吗？
你把你的完整xml代码贴在这里了吗？？因为它看起来不完整，因为卡片视图标签最后没有关闭。即“”并且还包括“card_view:cardCornerRadius="4dp"
你需要以适当的方式使用卡片高度和一些圆角看起来像材料。

标签： android material-design android-cardview

【解决方案1】：

这是 link 到 GitHub 项目，其中 CardView 布局按照 Material Design 指南实施。

【讨论】：

【解决方案2】：

使用这个。

<android.support.v7.widget.CardView
    android:id="@+id/cardView"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    card_view:cardBackgroundColor="#fff"
    card_view:cardCornerRadius="5dp"
    card_view:cardElevation="4dp"

    card_view:cardUseCompatPadding="true"
    xmlns:tools="http://schemas.android.com/tools">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@color/white"

        >

        <ImageView
            android:id="@+id/appImage"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_marginLeft="16dp"
            android:background="@drawable/img_android"
            android:scaleType="centerCrop"
            tools:ignore="ContentDescription"/>

        <TextView
            android:id="@+id/headingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/appImage"
            android:paddingLeft="16sp"
            android:paddingRight="16dp"
            android:text="Title"
            android:textColor="#000"
            android:textSize="18sp"
            tools:ignore="RtlHardcoded"/>

        <TextView
            android:id="@+id/subHeaderText"
            style="@style/Base.TextAppearance.AppCompat.Subhead"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/headingText"
            android:layout_toRightOf="@+id/appImage"
            android:paddingLeft="16dp"
            android:text="SubTiltle"
            android:paddingRight="16dp"
            android:textColor="#000"
            android:textSize="15sp"/>

        <TextView
            android:id="@+id/subHeadingText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/subHeaderText"
            android:layout_toRightOf="@+id/appImage"
            android:gravity="left"
            android:lines="5"
            android:maxLines="5"
            android:paddingBottom="16dp"
            android:paddingLeft="16dp"
            android:paddingTop="16dp"
            android:text="stories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detail"
            android:textColor="#737078"
            android:textSize="14sp"/>

        <Button
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:id="@+id/getDealBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/subHeadingText"
            android:textColor="#FFFFFF"
            android:background="@color/clrDarkGreen"
            android:textSize="14sp"
            android:textStyle="bold"
            android:text="Button"/>

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

【讨论】：

【解决方案3】：

//根据需要添加样式

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/appImage"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_marginLeft="16dp"
            android:scaleType="centerCrop"
            tools:ignore="ContentDescription"
            android:layout_margin="10dp"/>

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

            <TextView
            android:id="@+id/headingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/appImage"
            android:paddingLeft="16sp"
            android:paddingRight="16dp" 
            android:text="Title"
            android:textColor="#000"
            android:textSize="18sp"
            tools:ignore="RtlHardcoded"/>

            <TextView
                android:id="@+id/subHeaderText"
                style="@style/Base.TextAppearance.AppCompat.Subhead"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/headingText"
                android:layout_toRightOf="@+id/appImage"
                android:paddingLeft="16dp"
                android:text="SubTiltle"
                android:paddingRight="16dp"
                android:textColor="#000"
                android:textSize="15sp"
                android:layout_marginTop="20dp"/>


            <TextView
                android:id="@+id/subHeadingText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:lines="5"
            android:maxLines="5"
            android:paddingBottom="16dp"
            android:paddingLeft="16dp"
            android:paddingTop="16dp"
            android:textColor="#737078"
            android:textSize="14sp"
            android:layout_marginTop="20dp"/>

        </LinearLayout>

    </LinearLayout>

    <Button
        android:id="@+id/getDealBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="2dp"
        android:textAllCaps="true"
        android:textColor="#FFFF"
        android:textSize="14sp"
        android:textStyle="bold"/>

</LinearLayout>

【讨论】：

【解决方案4】：

卡片视图 卡片容器是卡片中唯一需要的元素。此处显示的所有其他元素都是可选的。

卡片布局可以变化以支持它们包含的内容类型。以下元素在该品种中很常见。

1.容器 卡片容器包含所有卡片元素，它们的大小由这些元素占据的空间决定。卡片高度由容器表示。

2。缩略图 [可选] 卡片可以包含用于显示头像、徽标或图标的缩略图。

3.标题文本 [可选] 标题文本可以包含相册或文章的名称等内容。

4.副标题 [可选] 副标题文本可以包括文本元素，例如文章署名或标记位置。

5.媒体 [可选] 卡片可以包含各种媒体，包括照片和图形，例如天气图标。

6.支持文字[可选] 支持文本包括文章摘要或餐厅描述等文本。

7.按钮 [可选] 卡片可以包含操作按钮。

8.图标 [可选] 卡片可以包含操作图标。

代码：

<com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:clickable="true"
            android:focusable="true"
            android:minHeight="148dp">

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

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="16dp"
                    android:paddingBottom="8dp">

                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_marginEnd="8dp"
                        android:contentDescription="Card Logo"
                        app:srcCompat="@drawable/ic_components_24px"/>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1.0"
                        android:layout_marginStart="8dp"
                        android:orientation="vertical">
                        <TextView
                            style="?attr/textAppearanceHeadline6"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Title goes here"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="8dp"
                            android:ellipsize="end"
                            android:maxLines="1"
                            android:text="Secondary message card layouts can vary to support the types of content they contain. The following elements are commonly found among that variety."/>
                    </LinearLayout>
                </LinearLayout>

                <androidx.appcompat.widget.AppCompatImageView
                    android:layout_width="match_parent"
                    android:layout_height="194dp"
                    android:background="@android:color/transparent"
                    android:contentDescription="Card Image"
                    app:backgroundTint="@color/material_on_surface_emphasis_medium"
                    app:backgroundTintMode="add"

                    android:scaleType="centerCrop"
                    app:srcCompat="@drawable/sample2"
                   />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="16dp"
                    android:maxLines="2"
                    android:text="Lorem ipsum dolor sit amet, nec no nominavi scaevola. Per et sint sapientem, nobis perpetua salutandi mei te. Quo tamquam probatus reprehendunt in. Eos esse purto eruditi ea. Enim tation persius ut sea, eos ad consul populo.
Ne eum solet altera. Cibo eligendi et est, electram theophrastus te vel eu."/>


                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="8dp"
                    android:orientation="horizontal">

                    <com.google.android.material.button.MaterialButton
                        style="?attr/borderlessButtonStyle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="8dp"
                        android:text="Action 1"/>

                    <com.google.android.material.button.MaterialButton
                        style="?attr/borderlessButtonStyle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="8dp"
                        android:text="Action 2"/>

                </LinearLayout>

            </LinearLayout>

        </com.google.android.material.card.MaterialCardView>

【讨论】：