如何在列表視圖中創建Google +卡UI？

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

如果您想將此作為背景添加到任何視圖（不僅僅是列表），您只需將自定義可繪制視圖的背景元素：

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

Answer 2

編輯：谷歌提供了一個很好的類叫做CardView 。 我沒有檢查它，但看起來很有希望。

這是以前的方式，也可以正常工作（這是我在編輯之前寫的）：

有一個很好的教程在這里和它的一個很好的樣本在這里 。

簡而言之，這些是您可以創建的文件：

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項和填充添加分隔符：

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

向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="@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

正如“ 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.+'