Question

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

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

Answer 1

您可以创建自定义drawable，并将其应用于每个listview元素。

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

drawable代码（在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元素，如下所示：

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

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

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

Answer 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 /抽拉/ 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 /布局/ 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 /抽拉/ 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 /抽拉/ 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补丁作为列表项目的背景，使它们看起来像卡片。您可以在此处找到9补丁以及更多提示和解释：http://www.tiemenschut.com/simply-get-cards-ui-look/

Answer 5

为Listview项和padding添加divider：

 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中创建UI卡 https://github.com/gabrielemariotti/cardslib

Answer 7

As＆＃34; android developer＆＃34;在他的回答中简要提到，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.+'

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

7 个答案: