web-dev-qa-db-ja.com

リストビューでGoogle +カードのUIを作成する方法

カードのlistViewを作成したいのですが、このブログ投稿 goolge-plus-layout を読んだ後、私はカードがあらゆるリストの実行可能なソリューションです。アニメーション部分は、40を超える要素を持つリストビューを同時に読み込むにはメモリ集約型のようです。

ListViewでカードUIを実現するより良い方法はありますか？

androidandroid-listviewandroid-cards
27
Hick

カスタムのドロアブルを作成し、それを各リストビュー要素に適用できます。

これを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" />
36
Booger

編集：Googleは CardView というNiceクラスを提供しています。私はそれをチェックしませんでしたが、有望に見えます。

これも以前の方法で、これも正常に機能します（編集前に書きました）：

Niceチュートリアル here とそのサンプルNice - 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>
7
android developer

多分あなたはこれを試すことができます cardPlusUI

私はこれを私のプロジェクトに使用しました

4
yozawiratama

カードの外観をシミュレートするListViewだけが必要な場合は、リストアイテムの背景として9パッチを使用して、カードのように見せることができます。あなたは9パッチといくつかのより多くのヒントと説明をここで見つけることができます： http://www.tiemenschut.com/simply-get-cards-ui-look/

2
TiemenSchut

Android https://github.com/gabrielemariotti/cardslib にUIカードの作成に役立つライブラリがあります

1
COLD ICE

「 Android developer 」の回答で簡単に言及されているように、「 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.+'
1
zpon

Listviewアイテムとパディングのディバイダーを追加します。

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

いくつかの希望するパディングを使用して、ListItemのLinearLayoutにRelativeLayoutを追加します。

<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 を使用します。なんとなくGoogleスタイルに近い

1
elcrion1090238