Skip to content

Most visited

Recently visited

navigation

Crear listas y tarjetas

En esta lección, aprenderás a realizar lo siguiente:

  1. Crear listas
  2. Crear tarjetas
  3. Agregar dependencias

También debes leer:

Para crear listas completas y tarjetas con estilos de Material Design en tus apps, puedes usar los widgets RecyclerView y CardView.

Crear listas

El widget RecyclerView es una versión más flexible y avanzada de ListView. Este widget es un contenedor para mostrar grandes conjuntos de datos que se pueden desplazar de manera muy eficiente al mantener una cantidad limitada de vistas. Usa el widget RecyclerView cuando tengas conjuntos de datos cuyos elementos cambien en tiempo de ejecución sobre la base de la acción del usuario o los eventos de la red.

La clase RecyclerView simplifica la pantalla y la manipulación de grandes conjuntos de datos al proporcionar lo siguiente:

También tienes la flexibilidad para definir administradores de diseño personalizados y animaciones para los widgets RecyclerView.

Figura 1: Widget de RecyclerView.

Para usar el widget RecyclerView, tienes que especificar un adaptador y un administrador de diseño. Para crear un adaptador, extiende la clase RecyclerView.Adapter. Los detalles de la implementación dependen de las especificaciones de tu conjunto de datos y los tipos de vistas. Para más información, consulta los ejemplos que figuran a continuación.

Figura 2. Listas con RecyclerView.

Un administrador de diseño posiciona las vistas de artículos dentro de un RecyclerView y determina el momento en que se reutilizan las vistas de elementos que ya no son visibles para el usuario. Para reutilizar (o reciclar) una vista, un administrador de diseño puede solicitarle al adaptador que reemplace el contenido de la vista con un elemento diferente del conjunto de datos. De esta manera, cuando se reciclan las vistas se mejora el rendimiento al evitar la creación de vistas innecesarias o realizar búsquedas costosas de findViewById().

RecyclerView te proporciona estos administradores de diseño incorporados:

Para crear un administrador de diseño personalizado, extiende la clase RecyclerView.LayoutManager.

Animaciones

Las animaciones para agregar o eliminar elementos están permitidas en forma predeterminada en RecyclerView. Para personalizar estas animaciones, extiende la clase RecyclerView.ItemAnimator y usa el método RecyclerView.setItemAnimator().

Ejemplos

El siguiente ejemplo de códigos demuestra cómo agregar el widget RecyclerView a un diseño:

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Una vez que hayas agregado un widget RecyclerView a tu diseño, obtén un identificador para el objeto, conéctalo a un administrador de diseño y adjunta un adaptador para los datos que se van a mostrar:

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // use this setting to improve performance if you know that changes
        // in content do not change the layout size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);

        // use a linear layout manager
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // specify an adapter (see also next example)
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

El adaptador proporciona acceso a los elementos en tu conjunto de datos, crea vistas para los elementos y reemplaza el contenido de algunas de las vistas con estos elementos de datos nuevos cuando el elemento original ya no está visible. El siguiente ejemplo de código muestra una implementación simple para un conjunto de datos que consta de una matriz de strings mostradas mediante el uso de widgets TextView:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;

    // Provide a reference to the views for each data item
    // Complex data items may need more than one view per item, and
    // you provide access to all the views for a data item in a view holder
    public static class ViewHolder extends RecyclerView.ViewHolder {
        // each data item is just a string in this case
        public TextView mTextView;
        public ViewHolder(TextView v) {
            super(v);
            mTextView = v;
        }
    }

    // Provide a suitable constructor (depends on the kind of dataset)
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.my_text_view, parent, false);
        // set the view's size, margins, paddings and layout parameters
        ...
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - get element from your dataset at this position
        // - replace the contents of the view with that element
        holder.mTextView.setText(mDataset[position]);

    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

Figura 3: Ejemplos de tarjetas.

Crear tarjetas

CardView extiende la clase FrameLayout y te permite mostrar información dentro de tarjetas que tienen una apariencia uniforme en la plataforma. Los widgets de CardView pueden tener sombras y esquinas redondeadas.

Para crear una tarjeta con una sombra, usa el atributo card_view:cardElevation. CardView usa elevación real y sombras dinámicas en Android 5.0 (nivel de API 21) y versiones posteriores, y regresa a una implementación de sombras programáticas en versiones anteriores. Para más información, consulta Mantener la compatibilidad.

Usa estas propiedades para personalizar la apariencia del widget CardView:

El siguiente ejemplo de código muestra cómo incluir un widget CardView en tu diseño:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>
</LinearLayout>

Para más información, consulta la referencia de la API para CardView.

Agregar dependencias

Los widgets RecyclerView y CardView son parte de las Bibliotecas de soporte v7. Para usar estos widgets en tu proyecto, agrega estas Dependencias de Gradle al módulo de tu app:

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'
}
This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)