Android RecyclerView et CardView Tutoriel – Exemple Simple

La nouvelle bibliothèque dans Android L a introduit deux nouveaux widgets d’interface: RecyclerView et CardView. Le RecyclerView est une version plus avancée et plus flexible de listView.

Ce nouveau composant est un grand pas, parce que le ListView est l’un des widgets d’interface les plus utilisés par les programmeurs d’android. Le widget CardView, d’autre part, est un nouveau composant qui est une « mise à niveau » d’un composant existant.

Dans ce tutoriel, je vais vous expliquer comment utiliser ces deux widgets et montrer comment nous pouvons les mélanger. Commençons par plonger dans le RecyclerView.

RecyclerView : Intro

Comme je l’ai mentionné, RecyclerView est plus flexible que ListView, même si elle introduit certaines complexités. Nous savons tous comment utiliser ListView dans notre application et nous savons si nous voulons augmenter les performances ListView, nous pouvons utiliser un modèle appelé ViewHolder.

Ce modèle se compose d’une classe simple qui contient les références aux composants d’interface tridespour chaque ligne dans le ListView. Ce modèle évite de rechercher les composants d’interface uI tout le temps que le système affiche une ligne dans la liste. Même si ce modèle introduit certains avantages, nous pouvons implémenter le ListView sans l’utiliser du tout.

RecyclerView nous oblige à utiliser le modèle ViewHolder. Pour montrer comment nous pouvons utiliser le RecyclerView, nous pouvons supposer que nous voulons créer une application simple qui affiche une cardList de contact.

La première chose que nous devrions faire est de créer la mise en page principale.

RecyclerView est très similaire à la ListView et nous pouvons les utiliser de la même manière:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:paddingLeft="@dimen/activity_horizontal_margin"
          android:paddingRight="@dimen/activity_horizontal_margin"
          android:paddingTop="@dimen/activity_vertical_margin"
          android:paddingBottom="@dimen/activity_vertical_margin"
          tools:context=".MyActivity">
          <android.support.v7.widget.RecyclerView
                 android:id="@+id/cardList"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
           />    
    </RelativeLayout>

Comme vous le remarquerez à partir de la mise en page ci-dessus, le RecyclerView est disponible dans la bibliothèque de support Android, nous devons donc modifier build.gradle pour inclure cette dépendance:

dependencies {
           ...    
           compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
     }

Maintenant, dans la méthode onCreate nous pouvons obtenir la référence à notre RecyclerView et le configurer:

@Override
    protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_my);
          RecyclerView recList = (RecyclerView) findViewById(R.id.cardList);
          recList.setHasFixedSize(true);
          LinearLayoutManager llm = new LinearLayoutManager(this);
          llm.setOrientation(LinearLayoutManager.VERTICAL);
          recList.setLayoutManager(llm);
    }

Si vous regardez le code ci-dessus, vous remarquerez certaines différences entre le RecyclerView et ListView. RecyclerView nécessite un gestionnaire de mise en page. Ce composant positionne les vues d’élément à l’intérieur de la ligne et détermine quand il est temps de recycler les vues. La bibliothèque fournit un gestionnaire de mise en page par défaut appelé LinearLayoutManager.

CardView

The CardView UI component shows information inside cards. We can customise its corners, the elevation and so on. We want to use this component to show contact information. These cards will be the rows of RecyclerView and we will see later how to integrate these two components. By now, we can define our card layout:

Le composant d’interface CardView affiche les informations à l’intérieur des cartes. Nous pouvons personnaliser ses coins, l’élévation et ainsi de suite. Nous voulons utiliser ce composant pour afficher les coordonnées. Ces cartes seront les lignes de RecyclerView et nous verrons plus tard comment intégrer ces deux composants. À l’heure actuelle, nous pouvons définir notre mise en page de la carte :

<android.support.v7.widget.CardView
          xmlns:card_view="http://schemas.android.com/apk/res-auto"
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/card_view"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          card_view:cardCornerRadius="4dp"
          android:layout_margin="5dp">
     
      <RelativeLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">
     
         <TextView
             android:id="@+id/title"
             android:layout_width="match_parent"
             android:layout_height="20dp"
             android:background="@color/bkg_card"
             android:text="contact det"
             android:gravity="center_vertical"
             android:textColor="@android:color/white"
             android:textSize="14dp"/>
     
        <TextView
            android:id="@+id/txtName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name"
            android:gravity="center_vertical"
            android:textSize="10dp"
            android:layout_below="@id/title"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="5dp"/>
     
        <TextView
            android:id="@+id/txtSurname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Surname"
            android:gravity="center_vertical"
            android:textSize="10dp"
            android:layout_below="@id/txtName"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="5dp"/>
     
        <TextView
            android:id="@+id/txtEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Email"
            android:textSize="10dp"
            android:layout_marginTop="10dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="150dp"
            android:layout_alignBaseline="@id/txtName"/>
     
    </RelativeLayout>

Comme vous pouvez le voir, le CardView est très simple à utiliser. Ce composant est disponible dans une autre bibliothèque de support Android donc nous devons ajouter cette dépendance aussi:

dependencies {
            compile 'com.android.support:cardview-v7:21.0.0-rc1'
            compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
}

RecyclerView: Adaptateur

L’adaptateur est un composant qui se situe entre le modèle de données que nous voulons afficher dans notre interface interface qualité-service et le composant d’interface interface qui rend ces informations. En d’autres termes, un adaptateur guide la façon dont les informations sont affichées dans l’interface uI. Donc, si nous voulons afficher nos contacts, nous avons besoin d’un adaptateur pour le RecyclerView. Cet adaptateur doit prolonger une classe appelée RecyclerView.Adapter passant notre classe qui implémente le modèle ViewHolder :

public class MyAdapter extends RecyclerView.Adapter<MyHolder> { ..... }

Nous devons maintenant remplacer deux méthodes pour pouvoir implémenter notre logique :

onCreateViewHolderest appelé chaque fois qu’une nouvelle instance de notre classe ViewHolder est créé, et onBindViewHolder est appelé lorsque le SO lie la vue avec les données – ou, dans d’autres termes, les données sont affichées dans l’interface UI .

Dans ce cas, l’adaptateur nous aide à combiner le RecyclerView et CardView. La mise en page que nous avons définie précédemment pour les cartes sera la disposition de ligne de notre liste de contacts dans le RecyclerView. Avant de le faire, nous devons définir notre modèle de données qui se trouve à la base de notre interface service d’interface (c.-à-d. quelles informations nous voulons montrer). À cette fin, nous pouvons définir une classe simple :

public class ContactInfo {
          protected String name;
          protected String surname;
          protected String email;
          protected static final String NAME_PREFIX = "Name_";
          protected static final String SURNAME_PREFIX = "Surname_";
          protected static final String EMAIL_PREFIX = "email_";
}

Et enfin, nous sommes prêts à créer notre adaptateur. Si vous vous souvenez de ce que nous avons dit avant sur le modèle Viewholder, nous devons coder notre classe qui l’implémente:

public static class ContactViewHolder extends RecyclerView.ViewHolder {
         protected TextView vName;
         protected TextView vSurname;
         protected TextView vEmail;
         protected TextView vTitle;
     
         public ContactViewHolder(View v) {
              super(v);
              vName =  (TextView) v.findViewById(R.id.txtName);
              vSurname = (TextView)  v.findViewById(R.id.txtSurname);
              vEmail = (TextView)  v.findViewById(R.id.txtEmail);
              vTitle = (TextView) v.findViewById(R.id.title);
          }
}

Regardez le code, dans le constructeur de classe, nous obtenons la référence aux vues que nous avons définies dans notre mise en page de carte. Maintenant, il est temps de coder notre adaptateur:

public class ContactAdapter extends RecyclerView.Adapter<ContactAdapter.ContactViewHolder> {
     
        private List<ContactInfo> contactList;
     
        public ContactAdapter(List<ContactInfo> contactList) {
                this.contactList = contactList;
        }
     
        @Override
        public int getItemCount() {
              return contactList.size();
        }
     
        @Override
        public void onBindViewHolder(ContactViewHolder contactViewHolder, int i) {
            ContactInfo ci = contactList.get(i);
            contactViewHolder.vName.setText(ci.name);
            contactViewHolder.vSurname.setText(ci.surname);
            contactViewHolder.vEmail.setText(ci.email);
            contactViewHolder.vTitle.setText(ci.name + " " + ci.surname);
       }
     
       @Override
       public ContactViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
            View itemView = LayoutInflater.
                        from(viewGroup.getContext()).
                        inflate(R.layout.card_layout, viewGroup, false);
     
            return new ContactViewHolder(itemView);
       }
     
      public static class ContactViewHolder extends RecyclerView.ViewHolder {
          ...
      }
    }

Dans notre implémentation, nous remplaçons onBindViewHolder où nous lions les données (nos informations de contact) aux vues. Notez que nous ne recherchons pas les composants de l’interface utilisateur, mais utilisons simplement les références stockées dans notre ContactViewHolder. Dans onCreateViewHolder, nous renvoyons notre ContactViewHolder en gonflant la disposition des lignes (le CardView dans notre cas).

Exécutez l’application et vous obtiendrez les résultats ci-dessous: