introduction

Lors de l'affichage d'une liste de vues réutilisables sur Android, un widget appelé RecyclerView est le grand public. Mais au début, plusieurs parties sont sorties et je n'étais pas sûr, donc je vais faire un échantillon minimum.

↓ Image terminée

Préparation

Ajoutez RecyclerView à build.gradle.


dependencies {
    implementation "androidx.recyclerview:recyclerview:1.1.0"

Personnage

Activity
La base sur laquelle le Recycler View peut être placé
RecyclerView
Widget pour afficher la liste
ViewHolder
Voir pour une liste
Adapter
Médiateur entre RecyclerView et ViewHolder. ViewHolder gère et se lie à RecyclerView bien.

Étapes à afficher

Créez un fichier de mise en page pour RecyclerView
Créer une mise en page pour ViewHolder (une ligne de liste)
Créer un adaptateur / ViewHolder
Générer RecylerView avec activité

Regardons chacun d'eux.

1. Créez un fichier de mise en page pour RecyclerView

Placez le RecyclerView au-dessus de l'activité pour laquelle vous souhaitez afficher le RecyclerView. (Si vous souhaitez utiliser des fragments, il en va de même pour les fragments.)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/main_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. Créer une mise en page pour ViewHolder (une ligne de liste)

Ensuite, créez une mise en page pour une ligne. Cette fois, je vais faire comme ça. Cela dépend du contenu de la liste que vous souhaitez créer.

Bien qu'il puisse être tapé directement, veuillez le pardonner car c'est un minimum.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="12dp">

    <ImageView
        android:id="@+id/hoge_image_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/hoge_title_text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:text="hogeTitle"
        android:textSize="24dp"
        app:layout_constraintTop_toTopOf="@id/hoge_image_view"
        app:layout_constraintStart_toEndOf="@id/hoge_image_view"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:id="@+id/hoge_contents_text_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="hogeContents"
        android:layout_marginTop="12dp"
        app:layout_constraintTop_toBottomOf="@id/hoge_title_text_view"
        app:layout_constraintStart_toStartOf="@id/hoge_title_text_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

3. Créer un adaptateur / ViewHolder

Après cela, l'ordre n'a pas vraiment d'importance, mais cette fois, nous préparerons d'abord l'adaptateur. Cela est dû au fait qu'un ensemble d'adaptateurs est requis lors de la génération d'un RecyclerView.


public class MainAdapter extends RecyclerView.Adapter<MainAdapter.MainViewHolder> {
    
    private List<RowData> rowDataList;

    MainAdapter(List<RowData> rowDataList) {
        this.rowDataList = rowDataList;
    }

    /**
     *Une ligne de données
     */
    static class MainViewHolder extends RecyclerView.ViewHolder {
        ImageView hogeImage;
        TextView hogeTitle;
        TextView hogeContents;

        MainViewHolder(@NonNull View itemView) {
            super(itemView);
            hogeImage = itemView.findViewById(R.id.hoge_image_view);
            hogeTitle = itemView.findViewById(R.id.hoge_title_text_view);
            hogeContents = itemView.findViewById(R.id.hoge_contents_text_view);
        }
    }

    /**
     *Méthode de création ViewHolder
     *Seulement appelé en premier.
     *Ici, le ViewHolder généré à l'aide du fichier de disposition ViewHolder comme inflation est renvoyé à RecyclerView.
     */
    @NonNull
    @Override
    public MainViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_holder_main, parent, false);
        return new MainViewHolder(view);
    }

    /**
     *Lier ViewHolder et RecyclerView
     *Écrivez ici le traitement que vous voulez faire en commun pour une ligne de View. Cette fois, je ne mets que le texte.
     */
    @Override
    public void onBindViewHolder(@NonNull MainViewHolder holder, int position) {
        RowData rowData = this.rowDataList.get(position);
        holder.hogeTitle.setText(rowData.hogeTitle);
        holder.hogeContents.setText(rowData.hogeContents);
    }

    /**
     *Nombre de lignes dans la liste
     */
    @Override
    public int getItemCount() {
        return rowDataList.size();
    }
}

4. Générer RecylerView avec activité

Créez un RecyclerView avec activité. Une fois généré, définissez l'adaptateur.

Puisqu'il s'agit d'un exemple, 20 lignes de données sont générées et transmises lors de l'initialisation de l'adaptateur.

public class MainActivity extends AppCompatActivity {

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

        RecyclerView recyclerView = findViewById(R.id.main_recycler_view);

        //Activez le paramètre qui ne modifie pas la taille de la mise en page de RecyclerView
        //Paramètres pour améliorer les performances.
        recyclerView.setHasFixedSize(true);

        //Définissez layoutManager dans RecyclerView.
        //Selon le type de ce layoutManager, vous pouvez sélectionner "liste à une colonne" ou "liste à deux colonnes".
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);

        //Générer l'adaptateur et le définir dans RecyclerView
        RecyclerView.Adapter mainAdapter = new MainAdapter(createRowData());
        recyclerView.setAdapter(mainAdapter);
    }

    private List<RowData> createRowData() {
        List<RowData> dataSet = new ArrayList<>();
        int i = 0;
        while (i < 20) {
            RowData data = new RowData();

            data.hogeTitle = "HogeTitle!!";
            data.hogeContents = "HogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHoge";

            dataSet.add(data);
            i = i + 1;
        }
        return dataSet;
    }

    class RowData {
        Image hogeImage;
        String hogeTitle;
        String hogeContents;
    }
}

J'essaierai de le construire quand je pourrai le faire jusqu'à présent.

C'est fait.

[Pour les débutants] Exemple minimum pour afficher RecyclerView en Java