Bouton Android utilisant Kotlin et XML

Dans ce tutoriel, nous allons apprendre à créer un bouton dans les applications Android en utilisant la programmation Kotlin.

Aperçu du bouton Android

La classe Button d'Android étend TextView. Button est un widget UI utilisé pour obtenir les interactions de clic de l'utilisateur afin de déclencher une action dans l'application. Un bouton peut être créé dans la disposition XML ainsi que dans la classe Activity Kotlin dans le projet Android Studio.

Créer un bouton dans la disposition XML

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Androidly Button"/>

android:id est utilisé pour définir l'identifiant unique sur le Bouton.
Le android:text est utilisé pour définir le texte à l'intérieur du bouton. Par défaut, le texte est affiché en lettres majuscules.
android:onClick est utilisé pour définir la fonction Kotlin qui sera invoquée dans l'activité lorsque le bouton est cliqué. C'est un écouteur de clic.
Le android:background est utilisé pour définir la couleur/l'image de fond du bouton.

Astuce : Pour éviter d'afficher toutes les lettres en majuscules, utilisez l'attribut android:textAllCaps="false"

Pour plus de détails sur la façon de personnaliser vos boutons dans la mise en page XML, référez-vous au tutoriel sur les boutons Android.

Écouteurs de clic de bouton

Nous pouvons également configurer des écouteurs de boutons de manière programmatique. Voici les deux principaux écouteurs :

setOnClickListener - se déclenche lorsqu'un bouton est cliqué.
setOnLongClickListner - se déclenche lorsqu'un bouton est pressé pendant une durée plus longue.

Les extraits de code suivants ont le setOnClickListener défini sur un bouton.

button.setOnClickListener(object : View.OnClickListener {
            override fun onClick(v: View?) {
                //your implementation goes here
            }
        })

Le code ci-dessus peut être converti en une expression lambda pour le rendre plus court.

button.setOnClickListener {   
      textView.text = "Androidly Buttons"
    }

De même, un setOnLongClickListener peut être défini de la manière suivante.

button.setOnLongClickListener {
        textView.text = "Androidly Button Long click"
        true
    }

//or
button.setOnLongClickListener {
        textView.text = "Androidly Button Long click"
        false
    }

Dans le code ci-dessus, la dernière instruction de chacune des expressions est l'instruction return.

Si setOnLongClickListener renvoie vrai, cela signifie que setOnClickListener ne sera pas déclenché.
Si le setOnLongClickListener renvoie false, cela signifie que le setOnClickListener sera déclenché.

Ceci est connu sous le nom de consommer des événements. Le premier cas consomme l'événement.

Bouton Android utilisant Kotlin

Nous allons développer une application qui incrémente le compteur du TextView lorsqu'un bouton est cliqué. Nous utiliserons Kotlin pour créer le bouton. Nous apprendrons également à connaître les différents gestionnaires de clics de bouton.

1. Structure du projet

Créez un nouveau projet Android Studio. Assurez-vous qu'au cours de la configuration initiale, vous activiez le support Kotlin. Une fois que vous avez terminé, voici la structure du projet que vous devriez voir.

2. Code du bouton Kotlin

Le fichier activity_main.layout ressemble au code suivant.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txtCounter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/number_zero"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        android:textColor="#000" />


    <Button
        android:id="@+id/btnIncrementByOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="addOne"
        android:text="@string/increment_by_one" />

</LinearLayout>

Nous avons utilisé LinearLayout qui maintient les vues de manière linéaire (horizontalement ou verticalement). Il est recommandé de définir les chaînes dans le fichier strings.xml plutôt que de les coder en dur. Pour récupérer une ressource de chaîne, nous utilisons @string/name_of_string.

package net.androidly.androidlybuttons

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.content.ContextCompat
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.LinearLayout
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity(), View.OnClickListener {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var androidlyButton = Button(this)
        androidlyButton.apply {
            layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
            text = "Double the value"
            setAllCaps(false)
            textSize = 20f
            id = R.id.btnDouble
        }

        androidlyButton.setOnClickListener(this)
        linearLayout.addView(androidlyButton)

        androidlyButton = Button(this)
        androidlyButton.apply {
            layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
            text = "RESET"
            textSize = 20f
            setTextColor(ContextCompat.getColor(this@MainActivity, R.color.colorPrimaryDark))
            id = R.id.btnReset
            setOnLongClickListener {
                txtCounter.text = 0.toString()
                true
            }
        }
        androidlyButton.setOnClickListener(this)
        linearLayout.addView(androidlyButton)

    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.btnDouble -> {
                txtCounter.text = (txtCounter.text.toString().toInt() * 2).toString()
            }
            R.id.btnReset -> {
                txtCounter.text = (-100).toString()
            }
            else -> {
            }
        }
    }

    fun addOne(view: View) {
        txtCounter.text = (txtCounter.text.toString().toInt() + 1).toString()
    }
}

Points importants :

La déclaration import kotlinx.android.synthetic.main.activity_main.* récupère automatiquement les ID des vues depuis le XML dans notre classe. Cela nous évite donc d'utiliser findViewById.
La fun addOne(view: View) est déclenchée lorsque le btnIncrementByOne est cliqué. Le paramètre (view: View) doit être défini dans la déclaration de la fonction.
Créez un bouton par programmation et placez-le dans la vue parente (LinearLayout ici) en utilisant le code suivant.
```
var androidlyButton = Button(this)
linearLayout.addView(androidlyButton)
```
Au lieu d'appeler des fonctions membres sur la classe Button, nous pouvons utiliser l'expression lambda apply{}.
Le layoutParams est utilisé pour définir la largeur et la hauteur du bouton. Le MATCH_PARENT définit la largeur/hauteur égale à celle du linear layout. WRAP_CONTENT ajuste la vue à la taille du contenu.
Nous pouvons définir l'identifiant de manière programmatique sous res | values | ids.xml.
Nous avons défini l'interface View.OnClickListener dans notre classe MainActivity.kt. Par conséquent, nous devons remplacer sa fonction onClick().
À l'intérieur de la fonction onClick, nous utilisons l'instruction when de Kotlin, qui est équivalente à switch dans d'autres langages.
Pour que la fonction onClick soit déclenchée, vous devez enregistrer le setOnClickListener sur le bouton avec l'interface en utilisant le contexte (this).

Sortie :

Télécharger le projet : AndroidlyButtons