Question

我看到了关于材料设计的指导但很少有混淆，而我设计的卡片左边是Image，右边是Image的一些文字。但是我不满足它是否符合引导线......请检查并告诉。而且我希望我的虚拟文本段落是合理的。

这是我的代码： -

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

这是我的cardview看起来像： -

Answer 1

这里是link到GitHub项目，其中CardView布局的实施符合Material Design准则。

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

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

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

了解更多：https://material.io/develop/android/components/cards

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

4 个答案: