Android 如何创建谷歌&x2B；列表视图中的卡片用户界面？

我想创建一个卡片列表视图，但读完这篇博文后，我认为卡片是一个可行的解决方案。动画部分似乎内存太大，无法同时加载包含40多个元素的listview

---

是否有更好的方法在listView中实现卡片UI

您可以创建一个自定义的可绘制文件，并将其应用于每个listview元素

我在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" />

我将背景应用于我的listview元素，如下所示：

<?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" />

---

为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"
...

有一个库可以帮助在android中创建UI卡
如果您只需要一个模拟卡片外观的ListView，您可以使用一个9补丁作为listitems的背景，使它们看起来像卡片。你可以在这里找到一个9补丁和一些更多的提示和解释：
编辑：谷歌提供了一个很好的类，名为。我没有检查，但看起来很有希望

这是前面的方法，也很好（这是我在编辑之前写的）：

有一个很好的教程和一个很好的例子

简而言之，您可以创建以下文件：

列表视图定义：

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\u card\u 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>

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



列表视图项目：

res/layout/list\u item\u 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\u card\u background\u 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\u card\u 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>

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


也许你可以试试这个

我已经在我的一些项目中使用了它
正如“”在他的回答中简要提到的，这个类可以用来轻松创建卡片视图

只需将UI小部件包装在CardView元素中，就可以开始了。请参阅上的CardView小部件简介

CardView类需要，请记住将依赖项添加到.gradle文件中

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

我认为您应该再次检查getView方法。请分享您的实现细节。有点不太合适，但卡片不是任何列表使用的默认视觉模式。它们在谷歌应用程序中有精确的用途，不应该随意使用。我不同意卡片不应该用于列表。这是一种快速出现的模式（你认为G+使用什么来支持他们的时间线UI？这是一个带有定制适配器的ListView）。卡UI FTW！这个链接将帮助你：是否可以交换卡片？我真的很好奇你使用什么颜色。我使用的是#ff999999#ffffffffᛋ8c666666（注意此颜色的透明度）谢谢。这看起来真不错。不过，我在我的应用程序中使用了你的布局，我将second_grey改为#ffeeeeee，这要轻得多（更谷歌，imho）-并将其移到我视图的背景中，这样就不会太透支了。我希望我能想出如何在不透支的情况下得到阴影。。谷歌+不知怎的做到了……不知怎的，我错过了一些东西。请您解释一下如何将绘图应用于列表项布局？当我尝试你的方法时，只有在按下列表项时才会显示big_card drawable。我也是Android新手，但我读过一条关于这种方式的说明（层列表作为CardView实现）——“我不认为层列表是可行的。事实上，它确实起到了作用，但它会导致过度绘制（在屏幕上绘制两倍相同的像素），如果你是一名负责优化的开发人员，这不是一个好的做法。这是真的吗？有什么方法可以解决Double drawing？虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效。