Utiliser setOnClickListener en Kotlin

1. Créer un nouveau projet et ajouter un bouton dans Kotlin
2. Utilisez setOnClickListener() sans rappel dans Kotlin
3. Utilisez setOnCliclListener() avec un rappel dans Kotlin
4. Utilisez setOnClickListener() avec une expression Lambda dans Kotlin
5. Utiliser l’interface View.OnClickListener sur la classe MainActivity dans Kotlin

La méthode setOnClickListener() est un écouteur d’événement, ce qui signifie qu’elle ne sera invoquée que lorsqu’un événement tel qu’un clic sur un bouton s’est produit. Le setOnClickListener() est une méthode de la classe View et peut être utilisé avec n’importe quelle classe qui en hérite.

Dans ce tutoriel, nous allons utiliser un Button pour tester la méthode en action. La classe Button hérite de la méthode de la classe TextView, qui hérite également de la méthode de la classe de base View.

Créer un nouveau projet et ajouter un bouton dans Kotlin

Accédez à votre environnement de développement et créez un nouveau projet Android avec une activité vide. Assurez-vous que Kotlin est la langue sélectionnée pour cette application.

Pour créer un composant Button, accédez au fichier activity_main.xml sous le dossier Layout et collez le code XML suivant dans le ConstraintLayout.

<Button
            android:text="Click me"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:id="@+id/click_me_btn"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

Utilisez setOnClickListener() sans rappel dans Kotlin

Allez dans la classe MainActivity de Kotlin et collez le code suivant dans la méthode onCreate() juste après la méthode setContentView().

  val clickMeBtn: Button = findViewById(R.id.click_me_btn)

        clickMeBtn.setOnClickListener {
            val toast = Toast
                .makeText(applicationContext,
                "You have clicked me",
                Toast.LENGTH_SHORT).show()
        }

La méthode findViewById() nous aide à récupérer le bouton que nous avons créé sur notre mise en page en utilisant l’identifiant unique de ce composant. Cette méthode peut récupérer n’importe quel composant qui hérite de la classe View car il s’agit d’une méthode générique.

La méthode setOnClickListener() consomme un callback en argument, mais on ajoute directement l’action à effectuer à l’intérieur de cette méthode sans lui passer de callback.

Ceci est rendu possible par l’annotation @Nullable ajoutée à la méthode en arrière-plan. L’annotation indique que le paramètre peut être facultatif ou nul.

Notez que lorsque nous utilisons la méthode setOnClickListener(), elle définit d’abord le bouton pour qu’il soit cliquable s’il ne l’est pas.

Nous avons créé un texte en utilisant la méthode statique makeText() de la classe Toast, et ce message sera affiché à l’écran pendant une courte période, puis il disparaîtra.

Exécutez l’application

Appuyez sur l’icône Exécuter située dans la partie supérieure droite de la barre d’outils de l’IDE pour exécuter l’application. L’image suivante montre la position du bouton Exécuter.

Cela exécutera l’application, lancera le périphérique virtuel et l’installera sur le périphérique virtuel. Si vous appuyez sur le bouton intitulé CLICK ME, un message intitulé You have clicked me s’affichera en bas de l’écran, comme indiqué ci-dessous.

Utilisez setOnCliclListener() avec un rappel dans Kotlin

Comme nous l’avons mentionné dans l’exemple précédent, la méthode setOnClickListener() a un paramètre optionnel View.OnClickListener qui est un callback pour la méthode onClick().

Allez dans la classe MainActivity et collez le code suivant dans la méthode onCreate() juste sous la méthode setContentView(). Assurez-vous de commenter l’exemple précédent.

 val clickMeBtn: Button = findViewById(R.id.click_me_btn)

 clickMeBtn.setOnClickListener(object : View.OnClickListener{
            override fun onClick(view: View?) {
                val toast = Toast
                    .makeText(applicationContext,
                    "You have clicked me",
                    Toast.LENGTH_SHORT).show()
            }
        })

Dans l’exemple ci-dessus, nous avons passé le rappel View.OnClickLictener à la méthode et remplacé la méthode onClick().

La méthode onClick() possède un paramètre de type View, indiquant la vue cliquée. Vous pouvez utiliser la vue à l’intérieur de onClick() pour exécuter n’importe quelle méthode, telle que la modification de la couleur d’arrière-plan.

Dans cet exemple, nous avons affiché un message Toast comme nous l’avons fait dans l’exemple précédent. Suivez les mêmes étapes que nous avons utilisées pour exécuter et tester l’application, et vous obtiendrez les mêmes résultats.

Utilisez setOnClickListener() avec une expression Lambda dans Kotlin

Cet exemple est similaire à celui que nous avons couvert ci-dessus, mais nous le convertissons en une expression lambda au lieu de remplacer la méthode onClick() de notre rappel.

Allez dans la classe MainActivity et collez le code suivant dans la méthode onCreate() juste après la méthode setContentView(). Assurez-vous de commenter l’exemple précédent.

 val clickMeBtn: Button = findViewById(R.id.click_me_btn)

 clickMeBtn.setOnClickListener(View.OnClickListener { view ->
            Toast.makeText(applicationContext,
                "You have clicked me",
            Toast.LENGTH_SHORT).show()
         })

Puisque nous avons accès à la view qui a été cliquée, nous pouvons exécuter n’importe quelle méthode, mais nous n’affichons qu’un message Toast dans cet exemple.

Suivez les mêmes étapes que nous avons utilisées pour exécuter et tester le premier exemple, et vous obtiendrez un message Toast affiché à l’écran, comme nous l’avons vu dans les autres exemples.

Utiliser l’interface View.OnClickListener sur la classe MainActivity dans Kotlin

Le rappel View.OnClickListener est une interface, et nous pouvons implémenter cette interface sur la classe MainActivity, comme indiqué ci-dessous.

class MainActivity : AppCompatActivity(), View.OnClickListener {
}

Une fois que nous avons implémenté l’interface, nous devons implémenter la méthode onClick() à l’intérieur de cette classe. Copiez et collez le code suivant dans la classe MainActivity.

    override fun onClick(view: View?){
        when(view?.id){
            R.id.click_me_btn -> {
                Toast.makeText(applicationContext,
                "You have clicked me",
                Toast.LENGTH_SHORT).show()
            }
        }
    }

La méthode onClick() nous donne accès à la vue cliquée, mais comme nous ne récupérons pas le composant par identifiant, nous devons utiliser l’instruction when qui fonctionne de la même manière que l’instruction switch pour identifier le composant qui a été cliqué.

Si le id correspond à l’id du click_me_btn, la fonctionnalité qui suit à l’intérieur de la fonction de flèche est exécutée. Nous n’affichons qu’un message Toast à l’écran dans cet exemple.

Utilisez les mêmes étapes que nous avons utilisées pour exécuter et tester les exemples précédents. Cet exemple affiche les mêmes résultats que prévu.