studio - programacion android pdf 2018

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

Question

Quiero crear una lista de tarjetas de vista, pero después de leer esta publicación de blog goolge-plus-layout , las tarjetas I''m son una solución viable para una lista de cualquier cosa. La parte de animación parece demasiado intensiva en memoria para cargar, por ejemplo, una vista de lista con más de 40 elementos simultáneamente.

¿Hay una mejor manera de lograr una IU de tarjetas en ListView?

Answer 1

Agregue divisor para el elemento ListView y el relleno:

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

Agrega RelativeLayout en 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 la 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>

Use https://github.com/elcrion/demo.cardlistview como ejemplo. De alguna manera está cerca del estilo de google

Answer 2

Como " desarrollador de Android " menciona brevemente en su respuesta, la clase CardView se puede usar para crear fácilmente vistas de cartas.

Simplemente envuelva sus widgets UI en un elemento CardView y ya está listo para comenzar. Consulte 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 , ¡recuerda agregar las dependencias a tu archivo .gradle!

compile ''com.android.support:cardview-v7:21.0.+''

Answer 3

EDITAR: Google ofrece una buena clase llamada CardView . No lo revisé pero parece prometedor.

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

Aquí hay un buen tutorial y una buena muestra de ello.

en resumen, estos son los archivos que puedes 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>

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

Answer 4

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

Answer 5

Puede crear un dibujable personalizado y aplicarlo a cada uno de sus elementos de vista de lista.

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

El código dibujable (en drawable / big_card.xml) se ve así:

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

Aplico el fondo a mis elementos de lista de lista 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 agregar esto como fondo a cualquier Vista (no solo a una lista), solo debe hacer que el elemento de fondo de esa vista pueda dibujarse a medida:

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

Answer 6

Si todo lo que quiere es un ListView que simule las tarjetas, busque puede usar un parche de 9 como fondo para sus elementos de lista para que se vean como cartas. Puede encontrar un parche de 9 y algunos más consejos y explicaciones aquí: http://www.tiemenschut.com/simply-get-cards-ui-look/

Answer 7

tal vez puedas probar esta cardPlusUI

He usado esto para algunos mi proyecto