android - 如何在列表视图中创建 Google + 卡片 UI？

Question

我想创建一个卡片列表视图，但是在阅读了这篇博文 goolge-plus-layout之后，我认为卡片是任何内容列表的可行解决方案。动画部分似乎太占用内存，无法同时加载一个包含 40 多个元素的列表视图。

有没有更好的方法在 listView 中实现卡片 UI？

Answer 1

您可以创建自定义可绘制对象，并将其应用于每个列表视图元素。

我在我的 UI 中将这个用于卡片。我不认为这种方法存在重大的性能问题。

可绘制代码（在 drawable\big_card.xml 中）如下所示：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/second_grey" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle" >
            <corners android:radius="3dp" />

            <solid android:color="@color/card_shadow" />
        </shape>
    </item>
    <item
        android:bottom="12dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle" >
            <corners android:radius="3dp" />

            <solid android:color="@color/card_white" />
        </shape>
    </item>


</layer-list>

我将背景应用于我的列表视图元素，如下所示：

<ListView
    android:id="@+id/apps_fragment_list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:listSelector="@drawable/big_card" />

如果您想将此作为背景添加到任何视图（不仅仅是列表），您只需将视图的背景元素设为自定义可绘制对象：

<TextView
        android:id="@+id/any_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/big_card" />

Answer 2

编辑：谷歌提供了一个名为CardView的好类。我没有检查它，但它看起来很有希望。

这是以前的方式，也可以正常工作（这是我在编辑之前写的）：

这里有一个很好的教程，这里有一个很好的示例。

简而言之，这些是您可以创建的文件：

列表视图定义：

android:divider="@null"
android:dividerHeight="10dp"
android:listSelector="@android:color/transparent" 
android:cacheColorHint="@android:color/transparent"
android:headerDividersEnabled="true"
android:footerDividersEnabled="true"

还有这个：

m_list.addHeaderView(new View(this));
m_list.addFooterView(new View(this));

res/drawable/selector_card_background.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item
      android:state_pressed="true"
      android:drawable="@drawable/layer_card_background_selected" />

   <item android:drawable="@drawable/layer_card_background" />
</selector>

列表视图项：

res/layout/list_item_card.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:paddingLeft="15dp"
   android:paddingRight="15dp"
   android:descendantFocusability="beforeDescendants">

   <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:paddingLeft="15dp"
      android:paddingTop="15dp"
      android:paddingBottom="15dp"
      android:paddingRight="15dp"
      android:background="@drawable/selector_card_background"
      android:descendantFocusability="afterDescendants">

      <TextView
         android:id="@+id/text1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"/>

      <TextView
         android:id="@+id/text2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"/>

      <TextView
         android:id="@+id/text3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"/>
   </LinearLayout>
</FrameLayout>

res/drawable/layer_card_background_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#CCCCCC"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

res/drawable/layer_card_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

Answer 3

也许你可以试试这张 cardPlusUI

我已经将它用于我的一些项目

Answer 4

如果您想要的只是一个模拟卡片外观的 ListView，您可以使用 9-patch 作为列表项的背景，使它们看起来像卡片。您可以在此处找到 9 补丁以及更多提示和说明：http: //www.tiemenschut.com/simply-get-cards-ui-look/

Answer 5

为 Listview 项和填充添加分隔符：

 android:divider="@android:color/transparent"
    android:dividerHeight="1dip"

使用一些所需的填充将 RelativeLayout 添加到 ListItem 的 LinearLayout 中：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="100dp"
    android:orientation="vertical"
    android:padding="3dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:background="@drawable/rowshadow" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
...

将背景添加到列表视图项，例如：

<?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item >
        <shape 
          android:shape="rectangle">
              <solid android:color="@android:color/darker_gray" />
              <corners android:radius="0dp"/>
        </shape>
     </item>
     <item android:right="1dp" android:left="1dp" android:bottom="2dp">
        <shape 
          android:shape="rectangle">
              <solid android:color="@android:color/white"/>
              <corners android:radius="0dp"/>
        </shape>
     </item>
   </layer-list>

以 https://github.com/elcrion/demo.cardlistview为例。它在某种程度上接近谷歌风格

Answer 6

正如“ android 开发者”在他的回答中简要提到的，CardView类可用于轻松创建卡片视图。

只需将 UI 小部件包装在 CardView 元素中，即可开始使用。请参阅https://developer.android.com/training/material/lists-cards.html#CardView上对 CardView 小部件的简短介绍。

CardView 类需要v7 支持库，记得将依赖项添加到您的 .gradle 文件中！

compile 'com.android.support:cardview-v7:21.0.+'

Answer 7

有一个库可以帮助在 android https://github.com/gabrielemariotti/cardslib中创建 UI 卡