Premiers pas avec RecyclerView et CardView sur Android

Si vous souhaitez créer une application Android utilisant des listes pour afficher des données, Android Lollipop propose deux nouveaux widgets pour vous faciliter la vie, RecyclerView et CardView. À l’aide de ces widgets, il est très facile de donner à votre application une apparence conforme aux directives mentionnées dans les spécifications de conception matérielle de Google.

Un bon point de départ lors de la création d’une application est d’utiliser un Modèle d’application Android. Vous pouvez en trouver des centaines sur Envato Market, pour tout construire à partir d’un application de partage de musique à un amusement jeu d’évitement d’obstacles.

Ou tu peux essayer ça modèle d’application Android universel, ce qui vous donne une base solide pour créer presque tous les types d’applications.

Conditions préalables

Pour suivre, vous devez utiliser la dernière version d’Android Studio. Vous pouvez l’obtenir auprès du Site Web des développeurs Android.

1. Soutenir les anciennes versions

Au moment de la rédaction de cet article, moins de 2% des appareils Android exécutent Android Lollipop. Cependant, grâce à la Bibliothèque de support v7, vous pouvez utiliser le RecyclerView et CardView widgets sur les appareils exécutant des versions plus anciennes d’Android en ajoutant les lignes suivantes à la dépendances section dans votre projet build.grade fichier:

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

2. Créer un CardView

UNE CardView est un ViewGroup. Comme n’importe quel autre ViewGroup, il peut être ajouté à votre Activity ou Fragment à l’aide d’un fichier XML de mise en page.

Pour créer un vide CardView, vous devrez ajouter le code suivant à votre mise en page XML, comme indiqué dans l’extrait de code suivant:

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

</android.support.v7.widget.CardView>

À titre d’exemple plus réaliste, créons maintenant un LinearLayout et placez un CardView à l’intérieur. le CardView pourrait représenter, par exemple, une personne et contenir les éléments suivants:

• une TextView pour afficher le nom de la personne
• une TextView pour afficher l’âge de la personne
• un ImageView pour afficher la photo de la personne

Voici à quoi ressemblerait le XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:padding="16dp"
    >

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cv"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_photo"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="16dp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_name"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_alignParentTop="true"
                android:textSize="30sp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_age"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_below="@+id/person_name"
                />

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

Si ce XML est utilisé comme mise en page d’un Activity, avec le TextView et ImageView les champs sont définis sur des valeurs significatives, voici comment il s’afficherait sur un appareil Android:

3. Création d’un RecyclerView

Étape 1: le définir dans une mise en page

Utilisant un RecyclerView exemple est un peu plus compliqué. Cependant, le définir dans un fichier XML de mise en page est assez simple. Vous pouvez le définir dans une mise en page comme suit:

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rv"
    />

Pour obtenir une poignée dans votre Activity, utilisez l’extrait de code suivant:

RecyclerView rv = (RecyclerView)findViewById(R.id.rv);

Si vous êtes sûr que la taille du RecyclerView ne changera pas, vous pouvez ajouter les éléments suivants pour améliorer les performances:

rv.setHasFixedSize(true);

Étape 2: Utilisation d’un LayoutManager

Contrairement à un ListView, une RecyclerView a besoin d’une LayoutManager pour gérer le positionnement de ses articles. Vous pouvez définir le vôtre LayoutManager en étendant le RecyclerView.LayoutManager classe. Cependant, dans la plupart des cas, vous pouvez simplement utiliser l’un des paramètres prédéfinis LayoutManager sous-classes:

• LinearLayoutManager
• GridLayoutManager
• StaggeredGridLayoutManager

Dans ce tutoriel, je vais utiliser un LinearLayoutManager. Ce LayoutManager sous-classe, par défaut, rendra votre RecyclerView ressemble à un ListView.

LinearLayoutManager llm = new LinearLayoutManager(context);
rv.setLayoutManager(llm);

Étape 3: Définition des données

Tout comme un ListView, une RecyclerView a besoin d’un adaptateur pour accéder à ses données. Mais avant de créer un adaptateur, créons des données avec lesquelles nous pouvons travailler. Créez une classe simple pour représenter une personne, puis écrivez une méthode pour initialiser un List de Person objets:

class Person {
    String name;
    String age;
    int photoId;

    Person(String name, String age, int photoId) {
        this.name = name;
        this.age = age;
        this.photoId = photoId;
    }
}

private List<Person> persons;

// This method creates an ArrayList that has three Person objects
// Checkout the project associated with this tutorial on Github if
// you want to use the same images.
private void initializeData(){
    persons = new ArrayList<>();
    persons.add(new Person("Emma Wilson", "23 years old", R.drawable.emma));
    persons.add(new Person("Lavery Maiss", "25 years old", R.drawable.lavery));
    persons.add(new Person("Lillie Watts", "35 years old", R.drawable.lillie));
}

Étape 4: création d’un adaptateur

Pour créer un adaptateur qui RecyclerView peut utiliser, vous devez étendre RecyclerView.Adapter. Cet adaptateur suit le vue titulaire modèle de conception, ce qui signifie que vous devez définir une classe personnalisée qui étend RecyclerView.ViewHolder. Ce modèle minimise le nombre d’appels aux coûteux findViewById méthode.

Plus tôt dans ce tutoriel, nous avons déjà défini la mise en page XML pour un CardView qui représente une personne. Nous allons réutiliser cette mise en page maintenant. À l’intérieur du constructeur de notre coutume ViewHolder, initialisez les vues qui appartiennent aux éléments de notre RecyclerView.

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder>{

    public static class PersonViewHolder extends RecyclerView.ViewHolder {		
		CardView cv;
        TextView personName;
        TextView personAge;
        ImageView personPhoto;

        PersonViewHolder(View itemView) {
            super(itemView);
            cv = (CardView)itemView.findViewById(R.id.cv);
            personName = (TextView)itemView.findViewById(R.id.person_name);
            personAge = (TextView)itemView.findViewById(R.id.person_age);
            personPhoto = (ImageView)itemView.findViewById(R.id.person_photo);
        }
	}

}

Ensuite, ajoutez un constructeur à l’adaptateur personnalisé afin qu’il dispose d’un handle vers les données que le RecyclerView s’affiche. Comme nos données se présentent sous la forme d’un List de Person objets, utilisez le code suivant:

List<Person> persons;

RVAdapter(List<Person> persons){
    this.persons = persons;
}

RecyclerView.Adapter a trois méthodes abstraites que nous devons remplacer. Commençons par le getItemCount méthode. Cela devrait renvoyer le nombre d’éléments présents dans les données. Comme nos données se présentent sous la forme d’un List, il suffit d’appeler le size méthode sur le List objet:

@Override
public int getItemCount() {
    return persons.size();
}

Ensuite, remplacez le onCreateViewHolder méthode. Comme son nom l’indique, cette méthode est appelée lorsque la coutume ViewHolder doit être initialisé. Nous spécifions la disposition que chaque élément du RecyclerView devrait utiliser. Cela se fait en gonflant la mise en page en utilisant LayoutInflater, en passant la sortie au constructeur du custom ViewHolder.

@Override
public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false);
    PersonViewHolder pvh = new PersonViewHolder(v);
    return pvh;
}

Remplacer le onBindViewHolder pour spécifier le contenu de chaque élément du RecyclerView. Cette méthode est très similaire à la getView méthode d’un ListViewl’adaptateur de. Dans notre exemple, c’est ici que vous devez définir les valeurs des champs nom, âge et photo du CardView.

@Override
public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
    personViewHolder.personName.setText(persons.get(i).name);
    personViewHolder.personAge.setText(persons.get(i).age);
    personViewHolder.personPhoto.setImageResource(persons.get(i).photoId);
}

Enfin, vous devez remplacer le onAttachedToRecyclerView méthode. Pour l’instant, nous pouvons simplement utiliser l’implémentation de cette méthode par la superclasse comme indiqué ci-dessous.

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);
}

Étape 5: Utilisation de l’adaptateur

Maintenant que l’adaptateur est prêt, ajoutez le code suivant à votre Activity pour initialiser et utiliser l’adaptateur en appelant le constructeur de l’adaptateur et le RecyclerViewde setAdapter méthode:

RVAdapter adapter = new RVAdapter(persons);
rv.setAdapter(adapter);

Étape 6: Compilez et exécutez

Lorsque vous exécutez le RecyclerView exemple sur un appareil Android, vous devriez voir quelque chose de similaire au résultat suivant.

Conclusion

Dans ce didacticiel, vous avez appris à utiliser le CardView et RecyclerView widgets introduits dans Android Lollipop. Vous avez également vu des exemples d’utilisation de ces widgets dans les applications de conception de matériaux. Notez que même si un RecyclerView peut presque tout faire ListView peut, pour les petits ensembles de données, à l’aide d’un ListView est toujours préférable car il nécessite moins de lignes de code.

Vous pouvez consulter la référence des développeurs Android pour plus d’informations sur le CardView et RecyclerView Des classes.

Et si vous souhaitez accélérer le développement de votre application, n’oubliez pas de les consulter Modèles d’applications Android sur Envato Market.