Tous les articles

Créer une liste stylée avec un RecyclerView

Comment afficher des données dans une liste scrollable à l’écran ? Il suffit d’utiliser un RecyclerView 🙂

Même si tu as beaucoup de données à afficher ou que tu as besoin de mettre à jour de tes données fréquemment, le RecyclerView est parfaitement adapter !

La ligne à ajouter dans gradle :

implementation 'com.android.support:recyclerview-v7:26.1.0'

Le fichier MainActivity.Java

Spoiler

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private RecyclerView.LayoutManager layoutManager;
    private IngredientAdapter ingredientAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // On initialise notre liste de données
        List<Ingredient> listeCourse = new ArrayList<>();
        listeCourse.add(new Ingredient("Oranges", "4"));
        listeCourse.add(new Ingredient("Tomates", "2"));
        listeCourse.add(new Ingredient("Raisin", "Une grappe"));
        listeCourse.add(new Ingredient("Pain", "1/2"));
        listeCourse.add(new Ingredient("Banane", "2 ou 3"));
        listeCourse.add(new Ingredient("Kiwi", "2 ou 3"));
        listeCourse.add(new Ingredient("Pates", "500g"));
        listeCourse.add(new Ingredient("Raviolis", "Une boite"));
        listeCourse.add(new Ingredient("Fraises", "500g"));
        listeCourse.add(new Ingredient("Glace", "1L"));
        listeCourse.add(new Ingredient("Pizza", "1"));
        listeCourse.add(new Ingredient("Yaourts", "6"));
        listeCourse.add(new Ingredient("Riz", "1kg"));
        listeCourse.add(new Ingredient("Haricots", "500g"));

        // On récupère notre RecyclerView via son id
        recyclerView = findViewById(R.id.ingredient_recyclerview);

        // On veut un RecyclerView qui utilise un LinearLayoutManager
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);

        // On donne notre adapter à notre RecyclerView
        ingredientAdapter = new IngredientAdapter(listeCourse);
        recyclerView.setAdapter(ingredientAdapter);

        // On sépare chaque ligne de notre liste par un trait
        DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.VERTICAL);
        recyclerView.addItemDecoration(dividerItemDecoration);
    }
}

[collapse]

Le fichier activity_main.xml

Spoiler

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.formation.myrecyclerview.MainActivity">

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

</RelativeLayout>

[collapse]

IngredientAdapter.Java

Spoiler

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

public class IngredientAdapter extends RecyclerView.Adapter<IngredientAdapter.IngredientViewHolder>{

    List<Ingredient> listeIngredient;

    public static class IngredientViewHolder extends RecyclerView.ViewHolder{
        TextView nom;
        TextView quantite;
        public IngredientViewHolder(View itemView) {
            super(itemView);
            nom = itemView.findViewById(R.id.nom);
            quantite = itemView.findViewById(R.id.quantite);
        }
    }

    public IngredientAdapter(List<Ingredient> listeIngredient) {
        this.listeIngredient = listeIngredient;
    }

    @Override
    public IngredientViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_ingredient, parent, false);
        IngredientViewHolder ingredientViewHolder = new IngredientViewHolder(view);
        return ingredientViewHolder;
    }

    @Override
    public void onBindViewHolder(IngredientViewHolder holder, int position) {
        Ingredient ingredient = listeIngredient.get(position);
        holder.nom.setText(ingredient.getNom());
        holder.quantite.setText(ingredient.getQuantite());
    }

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

[collapse]

row_ingredient.xml

Spoiler

<?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="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/nom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nom"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/quantite"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Quantite"
        android:textSize="15sp" />

</LinearLayout>

[collapse]

Ingredient.Java

Spoiler

public class Ingredient {
    private String nom;
    private String quantite;

    public Ingredient(String nom, String quantite) {
        this.nom = nom;
        this.quantite = quantite;
    }

    public String getNom() {
        return nom;
    }

    public String getQuantite() {
        return quantite;
    }
}

[collapse]

2 réflexions au sujet de « Créer une liste stylée avec un RecyclerView »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *