Android Spinner gebruiken met Kotlin

In deze tutorial zullen we Spinners bespreken en implementeren in onze Android-applicatie met behulp van Kotlin. Android Spinner wordt gebruikt om een dropdown-lijst op het scherm te maken.

Wat ga je leren?

• Spinners maken via XML en programmatisch
• Een prompt instellen op de Spinner.
• Het maken van een aangepast lay-out voor de Spinner.
• Omgaan met klikluisteraars en een Toast-bericht weergeven.
• Het voorkomen dat de klikluisteraar automatisch wordt geactiveerd bij de eerste keer.

Wat is een Android Spinner?

Spinners zijn als een dropdown-menu dat een lijst met items bevat om uit te kiezen. Zodra een waarde is geselecteerd, keert de Spinner terug naar zijn standaardstaat met die geselecteerde waarde. Na Android 3.0 is het niet mogelijk om een prompt weer te geven in een Spinner als de standaardstaat in de Spinner. In plaats daarvan wordt het eerste item weergegeven. Data binnen een spinner wordt geladen met een Adapter. Neem het volgende scenario: Stel je voor dat je je telefoon moet opladen. Daarvoor moet je je telefoonlader verbinden met het elektriciteitsbord met behulp van een pin (adapter). Vervolgens voorziet de adapter je telefoon van elektriciteit. In Android is de Spinner als je telefoon die wordt geladen met data met behulp van een Adapter. De adapter stelt de data evenals de lay-out voor de items die in de Spinner worden geladen in.

Spinner Callback Events

AdapterView.onItemSelectedListener interface wordt gebruikt om de Spinner klikgebeurtenis callbacks te activeren. Het bestaat uit twee methoden:

• onItemSelected
• onNothingSelected

In de volgende sectie zullen we een nieuw Android Studio Project creëren en Spinners in onze Applicatie implementeren. We zullen de lay-outs aanpassen en leren hoe we met verschillende scenario’s moeten omgaan.

Android Spinner Kotlin Project

1. XML-indelingscode

De code voor het layoutbestand activity_main.xml staat hieronder.

<?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>

Het bevat momenteel een enkele Spinner waarvoor android:spinnerMode ofwel dialog ofwel dropdown kan zijn.

Om prompts weer te geven, moet je dialog gebruiken als waarde voor spinnerMode.

2. Spinner XML-code

De code voor spinner_right_aligned.xml staat hieronder.

<?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. Kotlin-code voor MainActivity

De code voor de klasse MainActivity.kt staat hieronder.

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()
    }
}

Belangrijke punten:

• Dankzij Kotlin Android-extensies is de XML Spinner-widget automatisch beschikbaar in onze Kotlin Activity-klasse.
• We hebben een arrayOf strings gemaakt die bestaan uit programmeertalen. Deze worden ingevuld in de adapter met behulp van ArrayAdapter.
• De setDropDownViewResource wordt gebruikt om het lay-out voor de geselecteerde staat en de spinnerlijstrijen in te stellen.
• De android.R.layout.simple_spinner_item wordt gebruikt om de standaard lay-out van de Android SDK in te stellen. Standaard staat de TextView links uitgelijnd in dit soort lay-outs.

We hebben programmatisch een tweede Spinner aangemaakt die de lay-outs laadt uit het bestand spinner_right_aligned.xml.

De setSelection(0, false) wordt gebruikt om te voorkomen dat de OnItemSelected-methoden van de Spinner worden geactiveerd wanneer de Activity wordt gemaakt.

Hoe werkt het? De setSelection() methode vertelt de Activity dat het eerste spinneritem al is geselecteerd. We moeten deze verklaring plaatsen vóór onItemSelectedListener = this. De setPopupBackgroundResource wordt gebruikt om de achtergrondkleur in de vervolgkeuzelijst in te stellen. Binnen de onItemSelected functie gebruiken we de when-verklaring om een Toast te activeren voor het respectievelijke Spinner-item. Dankzij Kotlin en functies met standaardwaarden hebben we de uitgebreide oproep naar de Toast verminderd.

4. Spinner Kotlin App Output

Hieronder volgt de uitvoer toen de bovenstaande toepassing op een emulator werd uitgevoerd. U kunt de broncode van het bovenstaande project downloaden via de onderstaande link. AndroidSpinnerKotlin