Voici un exemple minimal qui ressemblera à l'image suivante.
Commencez par une activité vide. Vous exécuterez les tâches suivantes pour ajouter le RecyclerView. Tout ce que vous avez à faire est de copier et coller le code dans chaque section. Plus tard, vous pourrez le personnaliser selon vos besoins.
- Ajouter des dépendances à graduer
- Ajoutez les fichiers de mise en page xml pour l'activité et pour la ligne RecyclerView
- Créer l'adaptateur RecyclerView
- Initialisez le RecyclerView dans votre activité
Mettre à jour les dépendances Gradle
Assurez-vous que les dépendances suivantes se trouvent dans votre gradle.buildfichier d' application :
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'
Vous pouvez mettre à jour les numéros de version sur ce qui est le plus récent . Utilisez compileplutôt que implementationsi vous utilisez toujours Android Studio 2.x.
Créer une mise en page d'activité
Ajoutez le RecyclerViewà votre mise en page XML.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvAnimals"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Créer une disposition de ligne
Chaque ligne de notre RecyclerViewn'aura qu'une seule TextView. Créez un nouveau fichier de ressources de mise en page.
recyclerview_row.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="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="@+id/tvAnimalName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"/>
</LinearLayout>
Créer l'adaptateur
Le RecyclerViewnécessite un adaptateur pour remplir les vues de chaque ligne avec vos données. Créez un nouveau fichier java.
MyRecyclerViewAdapter.java
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {
private List<String> mData;
private LayoutInflater mInflater;
private ItemClickListener mClickListener;
// data is passed into the constructor
MyRecyclerViewAdapter(Context context, List<String> data) {
this.mInflater = LayoutInflater.from(context);
this.mData = data;
}
// inflates the row layout from xml when needed
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = mInflater.inflate(R.layout.recyclerview_row, parent, false);
return new ViewHolder(view);
}
// binds the data to the TextView in each row
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
String animal = mData.get(position);
holder.myTextView.setText(animal);
}
// total number of rows
@Override
public int getItemCount() {
return mData.size();
}
// stores and recycles views as they are scrolled off screen
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
TextView myTextView;
ViewHolder(View itemView) {
super(itemView);
myTextView = itemView.findViewById(R.id.tvAnimalName);
itemView.setOnClickListener(this);
}
@Override
public void onClick(View view) {
if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
}
}
// convenience method for getting data at click position
String getItem(int id) {
return mData.get(id);
}
// allows clicks events to be caught
void setClickListener(ItemClickListener itemClickListener) {
this.mClickListener = itemClickListener;
}
// parent activity will implement this method to respond to click events
public interface ItemClickListener {
void onItemClick(View view, int position);
}
}
Remarques
- Bien que cela ne soit pas strictement nécessaire, j'ai inclus la fonctionnalité d'écoute des événements de clic sur les lignes. C'était disponible dans l'ancien
ListViewset c'est un besoin courant. Vous pouvez supprimer ce code si vous n'en avez pas besoin.
Initialiser RecyclerView en activité
Ajoutez le code suivant à votre activité principale.
MainActivity.java
public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {
MyRecyclerViewAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// data to populate the RecyclerView with
ArrayList<String> animalNames = new ArrayList<>();
animalNames.add("Horse");
animalNames.add("Cow");
animalNames.add("Camel");
animalNames.add("Sheep");
animalNames.add("Goat");
// set up the RecyclerView
RecyclerView recyclerView = findViewById(R.id.rvAnimals);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
adapter = new MyRecyclerViewAdapter(this, animalNames);
adapter.setClickListener(this);
recyclerView.setAdapter(adapter);
}
@Override
public void onItemClick(View view, int position) {
Toast.makeText(this, "You clicked " + adapter.getItem(position) + " on row number " + position, Toast.LENGTH_SHORT).show();
}
}
Remarques
- Notez que l'activité implémente le
ItemClickListenerque nous avons défini dans notre adaptateur. Cela nous permet de gérer les événements de clic de ligne dans onItemClick.
Fini
C'est tout. Vous devriez pouvoir exécuter votre projet maintenant et obtenir quelque chose de similaire à l'image en haut.
Continuer
Ajout d'un séparateur entre les lignes
Vous pouvez ajouter un simple diviseur comme celui-ci
DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
layoutManager.getOrientation());
recyclerView.addItemDecoration(dividerItemDecoration);
Si vous voulez quelque chose d'un peu plus complexe, voyez les réponses suivantes:
Modification de la couleur de la ligne au clic
Consultez cette réponse pour savoir comment modifier la couleur d'arrière-plan et ajouter l'effet d'entraînement lorsqu'un utilisateur clique sur une ligne.
Mise à jour des lignes
Consultez cette réponse pour savoir comment ajouter, supprimer et mettre à jour des lignes.
Lectures complémentaires
