Créer des listes dynamiques avec RecyclerView Inclus dans Android Jetpack.

Essayer Compose

Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser les mises en page dans Compose.

<ph type="x-smartling-placeholder"></ph> Listes et grilles différées →

RecyclerView permet d'afficher facilement et efficacement de grands ensembles de données. Vous fournissez les données et définir l'apparence de chaque élément, ainsi que la bibliothèque RecyclerView crée dynamiquement les éléments quand ils sont nécessaires.

Comme son nom l'indique, RecyclerView recycle ces éléments individuels. Lorsqu'un l'élément défile de l'écran, RecyclerView ne détruit pas sa vue. À la place, RecyclerView réutilise la vue pour les nouveaux éléments qui ont fait défiler l'écran. RecyclerView améliore les performances et la réactivité de votre application, réduit la consommation d'énergie.

Classes de clé

Plusieurs classes fonctionnent ensemble pour créer votre liste dynamique.

• RecyclerView est le ViewGroup qui contient les vues correspondant à vos données. Comme il s'agit d'une vue, vous devez ajouter RecyclerView à votre mise en page comme vous le feriez pour ajouter n'importe quel autre élément d'interface utilisateur.

• Chaque élément de la liste est défini par un objet conteneur de vues. Quand ? le conteneur de la vue est créé, aucune donnée ne lui est associée. Après le conteneur de vues est créé, RecyclerView le lie à ses données. Toi définissez le conteneur de vues en étendant RecyclerView.ViewHolder

• Le RecyclerView demande des vues et les lie à leurs données. en appelant des méthodes dans l'adaptateur. Vous définissez l'adaptateur en étendant RecyclerView.Adapter

• Le gestionnaire de mise en page organise les différents éléments de votre liste. Vous pouvez utilisez l'un des gestionnaires de mise en page fournis par la bibliothèque RecyclerView définir les vôtres. Les gestionnaires de mise en page sont tous basés sur l'état LayoutManager une classe abstraite.

Vous pouvez voir comment tous les éléments s'assemblent dans l'application exemple RecyclerView. (Kotlin) ou application exemple RecyclerView (Java).

Étapes d'implémentation de votre RecyclerView

Si vous souhaitez utiliser RecyclerView, vous devez suivre quelques étapes. Elles sont expliquées en détail dans les sections suivantes.

1. Décidez de l'apparence de la liste ou de la grille. Normalement, vous pouvez utiliser l'un des gestionnaires de mises en page standards de la bibliothèque RecyclerView ;

2. Concevez l'apparence et le comportement de chaque élément de la liste. Basés sur cette conception, étendez la classe ViewHolder. Votre version de ViewHolder fournit toutes les fonctionnalités pour vos éléments de liste. Votre conteneur de vues est un wrapper autour d'un View, et cette vue est gérée par RecyclerView.

3. Définissez le Adapter qui associe vos données aux vues ViewHolder.

Il existe aussi des options de personnalisation avancées d'assistance qui vous permettent d'adapter RecyclerView selon vos besoins exacts.

Planifier la mise en page

Les éléments de votre RecyclerView sont organisés par LayoutManager . La bibliothèque RecyclerView fournit trois gestionnaires de mise en page, qui gèrent situations les plus courantes de mise en page:

• LinearLayoutManager organise les éléments dans une liste unidimensionnelle.
• GridLayoutManager Dispose les éléments dans une grille à deux dimensions: <ph type="x-smartling-placeholder">
  </ph>
  • Si la grille est disposée verticalement, GridLayoutManager tente de tout rendre les éléments de chaque ligne ont la même largeur et la même hauteur, mais des lignes différentes peuvent avoir différentes hauteurs.
  • Si la grille est disposée horizontalement, GridLayoutManager tente de tout rendre les éléments de chaque colonne ont la même largeur et la même hauteur, mais différents les colonnes peuvent avoir des largeurs différentes.
• StaggeredGridLayoutManager est semblable à GridLayoutManager, mais il n'est pas nécessaire que les éléments d'une ligne ont la même hauteur (pour les grilles verticales) ou les éléments d'une même colonne avoir la même largeur (pour les grilles horizontales) ; Par conséquent, les éléments d'une ligne ou d'une colonne peuvent finir par être décalés les uns par rapport aux autres.

Vous devez également concevoir la mise en page des éléments individuels. Vous en avez besoin lorsque vous concevez le conteneur de vue, comme décrit dans la section suivante.

Implémenter votre adaptateur et votre conteneur de vue

Une fois que vous avez déterminé votre mise en page, vous devez implémenter votre Adapter et ViewHolder Ces deux classes fonctionnent ensemble pour définir la façon dont vos données affiché. Le ViewHolder est un wrapper autour d'un View qui contient le la mise en page pour un élément individuel de la liste. Le Adapter crée ViewHolder. objets selon les besoins et définit également les données pour ces vues. Le processus de associer des vues à leurs données s'appelle la liaison.

Lorsque vous définissez votre adaptateur, vous remplacez trois méthodes clés:

• onCreateViewHolder(): RecyclerView appelle cette méthode chaque fois qu'elle doit créer un nouveau ViewHolder. Cette méthode crée et initialise ViewHolder et le View associé, mais ne remplit pas la fonction contenus : le ViewHolder n'a pas encore été lié à des données spécifiques.

• onBindViewHolder(): RecyclerView appelle cette méthode pour associer un ViewHolder à des données. La récupère les données appropriées et les utilise pour remplir la vue la mise en page du conteneur. Par exemple, si RecyclerView affiche une liste de noms, la méthode peut trouver le nom approprié dans la liste et remplir la vue widget TextView du titulaire.

• getItemCount(): RecyclerView appelle cette méthode pour obtenir la taille de l'ensemble de données. Par exemple : dans une application de carnet d'adresses, il peut s'agir du nombre total d'adresses. RecyclerView l'utilise pour déterminer quand il n'y a plus d'éléments pouvant être affiché.

Voici un exemple typique d'adaptateur simple avec un élément ViewHolder imbriqué qui affiche une liste de données. Dans ce cas, le RecyclerView affiche une simple liste d'éléments de texte. L'adaptateur reçoit un tableau de chaînes contenant le texte pour les éléments ViewHolder.

class CustomAdapter(private val dataSet: Array<String>) :
        RecyclerView.Adapter<CustomAdapter.ViewHolder>() {

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView

        init {
            // Define click listener for the ViewHolder's View
            textView = view.findViewById(R.id.textView)
        }
    }

    // Create new views (invoked by the layout manager)
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        // Create a new view, which defines the UI of the list item
        val view = LayoutInflater.from(viewGroup.context)
                .inflate(R.layout.text_row_item, viewGroup, false)

        return ViewHolder(view)
    }

    // Replace the contents of a view (invoked by the layout manager)
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.textView.text = dataSet[position]
    }

    // Return the size of your dataset (invoked by the layout manager)
    override fun getItemCount() = dataSet.size

}

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> {

    private String[] localDataSet;

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    public static class ViewHolder extends RecyclerView.ViewHolder {
        private final TextView textView;

        public ViewHolder(View view) {
            super(view);
            // Define click listener for the ViewHolder's View

            textView = (TextView) view.findViewById(R.id.textView);
        }

        public TextView getTextView() {
            return textView;
        }
    }

    /**
     * Initialize the dataset of the Adapter
     *
     * @param dataSet String[] containing the data to populate views to be used
     * by RecyclerView
     */
    public CustomAdapter(String[] dataSet) {
        localDataSet = dataSet;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        // Create a new view, which defines the UI of the list item
        View view = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.text_row_item, viewGroup, false);

        return new ViewHolder(view);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, final int position) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.getTextView().setText(localDataSet[position]);
    }

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

La mise en page de chaque élément de la vue est définie dans un fichier de mise en page XML, comme d'habitude. Dans ce cas, l'application dispose d'un fichier text_row_item.xml comme celui-ci:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/list_item_height"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_marginRight="@dimen/margin_medium"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/element_text"/>
</FrameLayout>

Étapes suivantes

L'extrait de code suivant montre comment utiliser RecyclerView.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val dataset = arrayOf("January", "February", "March")
        val customAdapter = CustomAdapter(dataset)

        val recyclerView: RecyclerView = findViewById(R.id.recycler_view)
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = customAdapter

    }

}

RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.layoutManager = new LinearLayoutManager(this)
recyclerView.setAdapter(customAdapter);

La bibliothèque propose également de nombreuses façons de personnaliser votre implémentation. Pour plus d'informations, consultez la section Examen avancé de RecyclerView la personnalisation.

Ressources supplémentaires

Pour en savoir plus sur les tests sur Android, consultez les ressources suivantes.

Applications exemples

• Application exemple RecyclerView (Kotlin)

• Application exemple RecyclerView (Java)

• Application de démonstration de Sunflower