Spinner Android utilisant Kotlin

Dans ce tutoriel, nous discuterons et implémenterons des Spinners dans notre application Android en utilisant Kotlin. Le Spinner Android est utilisé pour créer une liste déroulante à l'écran.

Que allez-vous apprendre ?

Créer des Spinners via XML et par programmation
Définir une invite sur le sélecteur.
Créer une mise en page personnalisée pour le Spinner.
Gérer les écouteurs de clic et afficher un message Toast.
Empêcher le gestionnaire de clic de se déclencher automatiquement pour la première fois.

Qu'est-ce qu'un Spinner Android ?

Les Spinners sont comme un menu déroulant qui contient une liste d’éléments parmi lesquels choisir. Une fois qu’une valeur est sélectionnée, le Spinner revient à son état par défaut avec cette valeur sélectionnée. Après Android 3.0, il n’est plus possible d’afficher une invite dans un Spinner comme état par défaut dans le Spinner. À la place, le premier élément est affiché. Les données à l’intérieur d’un spinner sont chargées avec un Adapter. Prenons le scénario suivant : imaginez que vous devez charger votre téléphone. Pour cela, vous devez connecter votre chargeur de téléphone au réseau électrique à l’aide d’un adaptateur. Ensuite, l’adaptateur fournit de l’électricité à votre téléphone. Dans Android, le Spinner est comme votre téléphone qui est chargé de données en utilisant un Adapter. L’adaptateur définit les données ainsi que la mise en page des éléments à charger dans le Spinner.

Événements de rappel du sélecteur

L'interface AdapterView.onItemSelectedListener est utilisée pour déclencher les rappels d'événements de clic du Spinner. Elle se compose de deux méthodes :

surÉlémentSélectionné
rienSélectionné

Dans la section suivante, nous allons créer un nouveau projet Android Studio et implémenter des Spinners dans notre application. Nous allons personnaliser les mises en page et apprendre à gérer différents scénarios.

Projet Android Spinner en Kotlin

1. Code de disposition XML

Le code du fichier de mise en page activity_main.xml est donné ci-dessous.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:id="@+id/linearLayout"
    android:gravity="center"
    tools:context=".MainActivity">

    <Spinner
        android:id="@+id/mySpinner"
        android:layout_width="match_parent"
        android:spinnerMode="dialog"
        android:layout_height="wrap_content" />

</LinearLayout>

Il héberge actuellement un seul Spinner android:spinnerMode peut être soit dialog soit dropdown.

Pour afficher des invites, vous devez utiliser le dialogue comme valeur de spinnerMode.

2. Code XML du Spinner

Le code pour spinner_right_aligned.xml est donné ci-dessous.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="end"
    android:padding="15dp"
    android:textAlignment="gravity"
    android:textColor="@color/colorPrimary"
    android:textSize="16sp"
    />

3. Code Kotlin de MainActivity

Le code de la classe MainActivity.kt est donné ci-dessous.

package net.androidly.androidspinnerkotlin

import android.content.Context
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.Gravity
import android.view.View
import android.widget.*
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity(), AdapterView.OnItemSelectedListener {


    var languages = arrayOf("Java", "PHP", "Kotlin", "Javascript", "Python", "Swift")
    val NEW_SPINNER_ID = 1

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        var aa = ArrayAdapter(this, android.R.layout.simple_spinner_item, languages)
        aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)

        with(mySpinner)
        {
            adapter = aa
            setSelection(0, false)
            onItemSelectedListener = this@MainActivity
            prompt = "Select your favourite language"
            gravity = Gravity.CENTER

        }

        val spinner = Spinner(this)
        spinner.id = NEW_SPINNER_ID

        val ll = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)

        ll.setMargins(10, 40, 10, 10)
        linearLayout.addView(spinner)

        aa = ArrayAdapter(this, R.layout.spinner_right_aligned, languages)
        aa.setDropDownViewResource(R.layout.spinner_right_aligned)

        with(spinner)
        {
            adapter = aa
            setSelection(0, false)
            onItemSelectedListener = this@MainActivity
            layoutParams = ll
            prompt = "Select your favourite language"
            setPopupBackgroundResource(R.color.material_grey_600)

        }

    }

    override fun onNothingSelected(parent: AdapterView<*>?) {
        showToast(message = "Nothing selected")
    }

    override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {

        when (view?.id) {
            1 -> showToast(message = "Spinner 2 Position:${position} and language: ${languages[position]}")
            else -> {
                showToast(message = "Spinner 1 Position:${position} and language: ${languages[position]}")
            }
        }
    }

    private fun showToast(context: Context = applicationContext, message: String, duration: Int = Toast.LENGTH_LONG) {
        Toast.makeText(context, message, duration).show()
    }
}

Points Importants:

Grâce aux extensions Kotlin Android, le widget Spinner XML est automatiquement disponible dans notre classe Activity Kotlin.
Nous avons créé un arrayOf de chaînes qui consiste en des langages de programmation. Ceux-ci sont remplis dans l'adaptateur en utilisant l'ArrayAdapter.
Le setDropDownViewResource est utilisé pour définir la mise en page pour l'état sélectionné et les lignes de la liste déroulante.
Le android.R.layout.simple_spinner_item est utilisé pour définir le layout SDK Android par défaut. Par défaut, le TextView est aligné à gauche dans ce type de layout.

Nous avons créé un deuxième Spinner par programmation qui charge les mises en page depuis le fichier spinner_right_aligned.xml.

Le setSelection(0, false) est utilisé pour empêcher les méthodes OnItemSelected du Spinner de se déclencher lorsque l’Activity est créée.

Comment cela fonctionne-t-il ? La méthode setSelection() indique à l’Activity que le premier élément du spinner a déjà été sélectionné. Nous devons placer cette instruction avant onItemSelectedListener=this. La méthode setPopupBackgroundResource est utilisée pour définir la couleur de fond de la liste déroulante. À l’intérieur de la fonction onItemSelected, nous utilisons l’instruction when pour déclencher un Toast pour l’élément Spinner correspondant. Grâce à Kotlin et aux fonctions avec des valeurs par défaut, nous avons réduit l’appel verbeux au Toast.

4. Sortie de l'application Spinner Kotlin

Ce qui suit est le résultat lorsque l'application ci-dessus a été exécutée sur un émulateur.