Android 设计-这个卡片视图效果如何实现？

Question

我正在创建一个天气应用程序。我如何获得此卡片效果？我如何在这样的卡片中获得 textView？

这是我的状态：

有人可以展示如何制作这个或至少类似的东西吗

Answer 1

首先将以下所有依赖项添加到您的 build.gradle

compile 'com.android.support:cardview-v7:24.2.1'

并且在xml中你可以写这段代码。它只是根据您的需要设计的样品...

这将解决你的问题...我如何获得这张卡的效果？我如何在这样的卡片中获得 textView？

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView android:id="@+id/card1"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    app:cardElevation="5dp"
    app:cardUseCompatPadding="true"
    app:cardCornerRadius="5dp"
    app:cardBackgroundColor="@android:color/white"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">
        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Detail"
            android:textSize="20dp"
            android:textColor="@color/colorPrimary"
            android:layout_alignParentTop="true"
            android:layout_marginRight="10dp"/>
        <TextView
            android:id="@+id/line"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorPrimary"
            android:layout_below="@id/text1"/>
        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TUE"
            android:textColor="@color/colorGrey"
            android:layout_marginTop="10dp"
            android:textSize="16dp"
            android:layout_below="@+id/text1"/>
        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="NOON"
            android:layout_marginTop="10dp"
            android:textSize="16dp"
            android:layout_toRightOf="@+id/text2"
            android:layout_marginLeft="10dp"
            android:layout_below="@+id/text1"
            android:textColor="@color/colorTextBlackLight"/>
        <TextView
            android:id="@+id/text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EVE"
            android:layout_marginTop="10dp"
            android:textSize="16dp"
            android:layout_toRightOf="@+id/text3"
            android:layout_marginLeft="30dp"
            android:layout_below="@+id/text1"
            android:textColor="@color/colorTextBlackLight"/>
        <TextView
            android:id="@+id/text5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="NIGHT"
            android:layout_marginTop="10dp"
            android:textSize="16dp"
            android:layout_toRightOf="@+id/text4"
            android:layout_marginLeft="30dp"
            android:layout_below="@+id/text1"
            android:textColor="@color/colorTextBlackLight"/>
        <TextView
            android:id="@+id/text6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="WED"
            android:layout_marginTop="10dp"
            android:textSize="16dp"
            android:layout_toRightOf="@+id/text5"
            android:layout_marginLeft="30dp"
            android:layout_below="@+id/text1"
            android:textColor="@color/colorGrey"/>
        <TextView
            android:id="@+id/text7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="WED"
            android:layout_marginTop="10dp"
            android:textSize="16dp"
            android:layout_toRightOf="@+id/text6"
            android:layout_marginLeft="5dp"
            android:layout_below="@+id/text1"
            android:textColor="@color/colorTextBlackLight"/>

        <TextView
            android:id="@+id/text8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="21"
            android:layout_marginTop="10dp"
            android:textSize="16dp"
            android:layout_marginLeft="5dp"
            android:layout_below="@+id/text2"
            android:textColor="@color/colorTextBlackLight"/>

        <ImageView
            android:id="@+id/img1"
            android:layout_width="30dp"
            android:layout_height="25dp"
            android:src="@drawable/ic_like_icon"
            android:scaleType="fitXY"
            android:layout_marginTop="10dp"
            android:layout_below="@+id/text3"
            android:layout_toRightOf="@+id/text8"/>

        <TextView
            android:id="@+id/textmore"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MORE"
            android:textSize="18dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:textColor="@color/colorTextBlackLight"/>

    </RelativeLayout>

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

您可以在 row.xml 中使用此 xml 在 recyclerview 中使用以创建多用途列表阅读教程：

http://www.androidhive.info/2016/05/android-working-with-card-view-and-recycler-view

希望对您有所帮助。如果有帮助，别忘了accept

Android 设计-这个卡片视图效果如何实现？

Android Design - How to get this card view effect?

android

android-cardview

android-recyclerview