Bonjour,
Une excellente nouvelle ! Nous ajoutons une fonctionnalité qui permettra d'afficher des détails lorsque l'utilisateur interagira avec un élément de la RecyclerView. Cela améliorera considérablement l'expérience utilisateur en fournissant des informations détaillées sur les données météorologiques.
Un simple clic sur un élément affichera une pop-up avec les informations.
Cordialement,
Margaret Hamilton, Dev Senior – Projet "Planète Exploration"
Définissez le clic
Nous allons voir dans ce chapitre comment intégrer un clic sur un élément de la RecyclerView . Celui-ci nous permettra d’ouvrir une pop-up affichant plus d'informations à l’utilisateur. Nous pourrions aussi imaginer d'autres usages, comme naviguer vers d’autres vues, interagir avec le ViewModel, etc.
Pour voir le principe d'un clic dans une RecyclerView , nous allons utiliser un callback vers l'activité principale (MainActivity) ; vous pouvez définir une interface de callback dans votre adaptateur et implémenter cette interface dans votre activité principale.
Définissez une interface dans votre adaptateur WeatherAdapter , juste après l’accolade ouvrante :
interface OnItemClickListener {
fun OnItemClick(item: WeatherReportModel)
}Vous pouvez définir autant de callbacks dans cette interface que nécessaire, si par exemple votre utilisateur peut cliquer sur l'élément de la liste ou sur une icône.
Ajoutez une propriété de callback dans votre adaptateur et une fonction pour définir ce callback :
//1. Add the callback to the Adapter definition
class WeatherAdapter(private val itemClickListener: OnItemClickListener) :
ListAdapter<WeatherReportModel, WeatherAdapter.WeatherViewHolder>(DiffCallback) {
interface OnItemClickListener {
fun OnItemClick(item: WeatherReportModel)
}
class WeatherViewHolder(
private val binding: ItemWeatherBinding,
//2. Add the callback to the ViewHolder definition
private val itemClickListener: OnItemClickListener
) : RecyclerView.ViewHolder(binding.root) {
private val dateFormatter = SimpleDateFormat("dd/MM - HH:mm", Locale.getDefault())
fun bind(observation: WeatherReportModel) {
val formattedDate: String = dateFormatter.format(observation.date.time)
binding.textViewDateTime.text = formattedDate
binding.textViewStargazing.text = if (observation.isGoodForStargazing) "⭐️" else "☁️"
// 3. Use the callback to notify the main activity of the click
binding.root.setOnClickListener {
itemClickListener.OnItemClick(observation)
}
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): WeatherViewHolder {
val itemView = ItemWeatherBinding.inflate(LayoutInflater.from(parent.context), parent, false)
//4. Pass the callback to the ViewModel
return WeatherViewHolder(itemView, itemClickListener)
}
//…other code
}Interceptez le clic
Modifiez votre activité principale MainActivity pour implémenter cette interface et passer l'instance de votre activité en tant que callback lors de la création de l'adapter :
class MainActivity : AppCompatActivity(), WeatherAdapter.OnItemClickListener {
override fun OnItemClick(item: WeatherReportModel) {
Toast.makeText(this, "Il fera ${item.temperatureCelsius}°C", Toast.LENGTH_SHORT)
.show()
}
}Vous remarquerez que la définition de WeatherAdapter donne maintenant une erreur. C’est normal, il faut lui fournir le callback, ce que nous pouvons faire de cette manière :
private val customAdapter = WeatherAdapter(this)Lorsque vous travaillez avec une RecyclerView, chaque élément de la liste est représenté par un objet ViewHolder . Pour rendre ces éléments interactifs, vous pouvez mettre en œuvre un callback : une interface qui est appelée en réponse à une action. Dans notre cas, ce sera un clic sur un élément de la liste.
Pour afficher des détails supplémentaires, nous définissons une interface, OnItemClickListener , pour qui la fonction OnItemClick partage l'objet à afficher.
Ensuite, dans notre adaptateur ( WeatherAdapter ), nous rajoutons une instance de cette interface en tant que paramètre dans le constructeur. Chaque ViewHolder sera configuré pour appeler OnItemClick lorsque l'élément associé sera cliqué.
Finalement, dans notre activité principale, nous implémentons cette interface. La fonction OnItemClick est le point où vous définissez le comportement spécifique que vous souhaitez déclencher lorsque l'utilisateur clique sur un élément de la liste.
À vous de jouer
Contexte
Vous avez eu les félicitations de vos collègues, les canons ont tourné toute la nuit et ce matin, les pistes sont correctement enneigées. Un collègue vous demande s’il ne serait pas possible d’afficher plus d'informations, lorsqu’ils ont un doute sur le terrain.
Est-ce qu’on pourrait avoir accès à la température et au titre de la météo ? Ça nous serait utile, en complément d’information.
Vous leur proposez d'implémenter un Toast sur l’interface utilisateur.
Consignes
Votre mission actuelle consiste à :
définir une interface
OnItemClick;déclencher le clic lorsque l’utilisateur clique sur l'icône et afficher toutes les informations grâce à un Toast.
Corrigé
Le corrigé est disponible sur GitHub à cette adresse :
Déclaration de l’interface
OnItemClicket de son usage.
En résumé
Définissez une interface de callback à l'intérieur de votre adaptateur. Cette interface doit contenir une ou plusieurs méthodes, qui seront appelées lorsque l'utilisateur cliquera sur un élément de la liste.
Implémentez l'interface de callback (
OnItemClickListener) dans votre activité principale. Cette implémentation doit contenir la logique que vous souhaitez exécuter lorsqu'un élément de la RecyclerView est cliqué, comme afficher des détails ou effectuer une action spécifique.Lorsque vous instanciez votre adaptateur dans l'activité principale, passez une référence de l'activité en tant que paramètre au constructeur de l'adaptateur. Cela peut se faire lors de l'initialisation de votre WeatherAdapter.
Notre application est désormais complète ! Félicitations ! Mais nous pouvons encore l'améliorer : que se passe-t-il si le serveur météo ne nous répond plus ? Découvrons ceci ensemble dans le prochain chapitre. Mais avant cela, testez vos connaissances dans le quiz clôturant cette partie !
