web-dev-qa-db-fra.com

Comment créer une interface utilisateur de cartes Google + dans une vue liste?

Je veux créer une liste de cartes, mais après avoir lu cet article de blog goolge-plus-layout , les cartes que je suis sont une solution viable pour une liste de tout. La partie animation semble être trop gourmande en mémoire pour charger une liste avec plus de 40 éléments simultanément. 

Existe-t-il un meilleur moyen de réaliser une interface utilisateur de cartes dans listView? 

androidandroid-listviewandroid-cards
27
Hick

Vous pouvez créer un dessin personnalisable et l'appliquer à chacun de vos éléments listview. 

J'utilise celui-ci pour les cartes dans mon interface utilisateur. Je ne pense pas que cette approche pose des problèmes de performances significatifs.

Le code extractible (dans drawable\big_card.xml) ressemble à ceci:

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

J'applique l'arrière-plan à mes éléments listview comme ceci:

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

Si vous souhaitez ajouter ceci en tant qu'arrière-plan à une vue (pas seulement une liste), vous devez simplement rendre l'élément de fond de cette vue pouvant être dessiné:

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

EDIT: Google fournit une classe Nice appelée CardView . Je n'ai pas vérifié, mais ça a l'air prometteur.

Voici la méthode précédente, qui fonctionne aussi très bien (c'est ce que j'ai écrit avant le montage):

Il y a un tutoriel Nice here et un bel échantillon de celui-ci here .

en bref, ce sont les fichiers que vous pouvez créer:

listView définition:

Android:divider="@null"
Android:dividerHeight="10dp"
Android:listSelector="@Android:color/transparent" 
Android:cacheColorHint="@Android:color/transparent"
Android:headerDividersEnabled="true"
Android:footerDividersEnabled="true"

aussi ceci:

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>

élément 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

peut-être pourriez-vous essayer ceci cardPlusUI

J'ai utilisé cela pour certains mon projet

4
yozawiratama

Si tout ce que vous voulez, c'est un ListView qui simule l'apparence des cartes, vous pouvez utiliser un 9-patch comme arrière-plan pour vos éléments de liste afin de leur donner l'aspect d'une carte. Vous pouvez trouver un correctif de 9 et quelques conseils et explications ici: http://www.tiemenschut.com/simply-get-cards-ui-look/

2
TiemenSchut

Il existe une bibliothèque qui aide à créer des cartes d'interface utilisateur sous Android https://github.com/gabrielemariotti/cardslib

1
COLD ICE

Comme " développeur Android " mentionne brièvement dans sa réponse, la classe CardView peut être utilisée pour créer facilement des vues de carte. 

Emballez simplement vos widgets d'interface utilisateur dans un élément CardView et vous êtes prêt à commencer. Voir la brève introduction au widget CardView à l’adresse https://developer.Android.com/training/material/lists-cards.html#CardView .

La classe CardView nécessite un v7 support library , n'oubliez pas d'ajouter les dépendances à votre fichier .gradle!

compile 'com.Android.support:cardview-v7:21.0.+'
1
zpon

Ajouter un séparateur pour l'élément de liste et le remplissage: 

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

Ajoutez RelativeLayout à votre LinearLayout for ListItem avec le remplissage souhaité:

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

Ajouter un fond à l'élément listview, comme ceci: 

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

Utilisez https://github.com/elcrion/demo.cardlistview comme exemple. C'est en quelque sorte proche du style google

1
elcrion1090238