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

【问题标题】：How to create Google + cards UI in a list view?如何在列表视图中创建 Google + 卡片 UI？
【发布时间】：2013-07-10 12:51:25
【问题描述】：

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

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

【问题讨论】：

我认为您应该再次查看 getView 方法。请分享您的实施细节。
有点偏离主题，但卡片不是用于任何列表的默认视觉模式。它们在 Google 应用中具有精确的用途，不应随意使用。
我不同意卡片不应该用于列表。这是快速出现的模式（您认为 G+ 使用什么来支持他们的时间线 UI - 它是一个带有自定义适配器的 ListView）。卡片 UI FTW！
这个链接对你有帮助：technotalkative.com/lazy-productive-android-developer-4
可以换卡吗？？

标签： android android-listview android-cards

【解决方案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" />

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

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

【讨论】：

我真的很好奇你用什么颜色。
我使用 #ff999999#ffffffff#8c666666 color>（注意这个颜色的透明度）
谢谢。这看起来真的很好。不过，我在我的应用程序中使用了您的布局，并且我将 second_grey 更改为 #ffeeeeee，它更轻（更谷歌，恕我直言） - 并将其移动到我的视图的背景，这样就减少了过度绘制。我希望我能弄清楚如何在不透支的情况下获得阴影……Google+ 以某种方式做到了……
不知何故我错过了一些东西。您能否解释一下可绘制对象如何应用于列表项布局？当我尝试您的方法时，big_card drawable 仅在按下列表项时显示。
我也是 Android 新手，但我读过一篇关于这种方式的说明（作为 CardView 实现的层列表）-'我不认为层列表是要走的路。实际上，它可以解决问题，但会导致过度绘制（在屏幕上绘制两次相同的像素），如果您是负责优化的开发人员，这不是一个好习惯。这是真的吗？有什么办法可以解决双画？

【解决方案2】：

编辑：Google 提供了一个很好的类，叫做CardView。我没有检查它，但它看起来很有希望。

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

有一个很好的教程here 和一个很好的示例here。

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

listView 定义：

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>

listView 项目：

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>

【讨论】：

【解决方案3】：

也许你可以试试这个 cardPlusUI

我已经在我的一些项目中使用了它

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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 为例。它在某种程度上接近谷歌风格

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

CardView 类需要v7 support library，记得将依赖项添加到你的 .gradle 文件中！

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

【讨论】：