Cómo crear Google + tarjetas de interfaz de usuario en una vista de lista?

Quiero crear una listView de tarjetas, pero después de leer este blog post goolge-plus-layout , soy tarjetas son una solución viable para una lista de cualquier cosa. La parte de animación parece demasiado intensiva de memoria para cargar, diga un listview con más de 40 elementos simultáneamente.

¿Hay una mejor manera de lograr una tarjeta de interfaz de usuario en listView?

Puede crear un dibujable personalizado y aplicarlo a cada uno de los elementos de listview.

Yo uso este para las tarjetas en mi interfaz de usuario. No creo que haya problemas de rendimiento significativos con este enfoque.

El código dibujable (en drawable \ big_card.xml) tiene este aspecto:

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

Aplicar el fondo a mis elementos listview como este:

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

Si desea añadir esto como un fondo a cualquier vista (no sólo una lista), sólo tiene que hacer la costumbre dibujable que ver elemento de fondo:

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

EDIT: Google proporciona una clase agradable llamada CardView . No lo comprobé, pero parece prometedor.

Esta es la manera anterior, que también funciona bien (eso es lo que escribí antes de la edición):

Hay un buen tutorial aquí y una buena muestra de ello aquí .

En resumen, estos son los archivos que puede crear:

ListView definición:

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

también esto:

 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 artículo:

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> 

Tal vez usted puede probar esta tarjetaPlusUI

He utilizado esto para algunos mi proyecto

Si todo lo que quieres es un ListView que simula las tarjetas, mira puedes usar un parche de 9 como fondo para tus listitems para que se parezcan a las tarjetas. Usted puede encontrar un parche 9 y algunos más consejos y explicaciones aquí: http://www.tiemenschut.com/simply-get-cards-ui-look/

Añadir divisor para el elemento Listview y relleno:

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

Agregue RelativeLayout en su LinearLayout para ListItem con el relleno deseado:

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

Agregar fondo al elemento de vista de lista, como:

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

Utilice https://github.com/elcrion/demo.cardlistview como ejemplo. Es de alguna manera cerca de google estilo

Hay una biblioteca que ayuda a crear tarjetas de interfaz de usuario en android https://github.com/gabrielemariotti/cardslib

Como " desarrollador android " menciona brevemente en su respuesta, la clase CardView se puede utilizar para crear fácilmente vistas de tarjeta.

Simplemente envuelva los widgets de interfaz de usuario en un elemento CardView y ya está listo. Vea la breve introducción al widget CardView en https://developer.android.com/training/material/lists-cards.html#CardView .

La clase CardView requiere una biblioteca de soporte v7 , recuerde agregar las dependencias a su archivo .gradle!

 compile 'com.android.support:cardview-v7:21.0.+' 
  • Animar elementos ListView en notifyDataSetChanged ()
  • Android: Actualizar ListView en la primera actividad al regresar de la segunda actividad
  • ¿Cómo puedo alinear verticalmente un elemento dentro de una lista usando el diseño relativo?
  • Android - ClassCastException - en LayoutParams de LinearLayout a AbsListView
  • Barra de progreso en el fondo del elemento de lista
  • ¿Cómo comprobar si mi ListView tiene número desplazable de artículos?
  • Cómo mostrar la imagen (matriz de bytes) de JSON en imageView ... Factory devuelve null
  • La vista de Android Web no muestra contenido HTML cargado en algún teléfono específicamente htc una x
  • ListView no muestra los valores correctos después de desplazarse
  • Filtrado de la vista de lista y obtención del elemento onclick correcto
  • Using notifyItemRemoved o notifyDataSetChanged con RecyclerView en Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.