Tutorials  /  JavaScript

Android Spinner: Effektive Implementierung mit Kotlin

Ccentron Redaktion · September 2024 ·4 Min. Lesezeit ·JavaScript, Tutorial

Tauchen Sie ein in die faszinierende Welt der Android Spinners mit Kotlin! Unser praktisches Tutorial führt Sie durch die Erstellung von Dropdown-Menüs, die Anpassung von Layouts und das Handhaben von Klickereignissen. Mit Schritt-für-Schritt-Anleitungen und hilfreichen Tipps sind Sie bereit, Ihre Android-Apps auf das nächste Level zu bringen.

Was werden Sie lernen?

  • Spinners via XML und programmatisch erstellen
  • Ein Platzhalter im Spinner einrichten
  • Ein benutzerdefiniertes Layout für den Spinner erstellen
  • Klickereignisse handhaben und eine Toast-Nachricht anzeigen
  • Verhindern, dass das Klickereignis beim ersten Mal automatisch auslöst
VM

Passende Infrastruktur bei centron

Node-Anwendungen wollen deployt werden: ccloud³ VMs mit vollem Root-Zugriff ab 3,12 € im Monat – oder gleich als Managed Server, wenn der Betrieb nicht bei Ihnen liegen soll. Cloud Server mieten →

Was ist ein Android Spinner?

Spinner sind wie ein Dropdown-Menü mit einer Liste von auswählbaren Elementen. Sobald ein Wert ausgewählt ist, kehrt der Spinner mit diesem ausgewählten Wert in den Standardzustand zurück. Seit Android 3.0 ist es nicht mehr möglich, einen Platzhalter im Spinner als Standardzustand anzuzeigen. Stattdessen zeigt es das erste Element. Daten innerhalb eines Spinners laden mithilfe eines Adapters.

Spinner Callback-Ereignisse

Das AdapterView.onItemSelectedListener-Interface wird verwendet, um Spinner-Klickereignis-Callbacks auszulösen. Es besteht aus zwei Methoden:

  • onItemSelected
  • onNothingSelected

Im folgenden Abschnitt erstellen wir ein neues Android Studio-Projekt und implementieren Spinner in unserer Anwendung, passen Layouts an und lernen, wie man verschiedene Szenarien handhabt.

Android Spinner Kotlin-Projekt

1. XML Layout-Code

Der Code für die activity_main.xml-Layout-Datei sieht wie folgt aus:

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

Es enthält derzeit einen einzelnen Spinner. android:spinnerMode kann entweder dialog oder dropdown sein. Um Platzhalter anzuzeigen, sollte dialog als Wert für spinnerMode verwendet werden.

2. Spinner XML-Code

Der Code für spinner_right_aligned.xml lautet wie folgt:

Code
<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. MainActivity Kotlin-Code

Der Code für die MainActivity.kt-Klasse sieht wie folgt aus:

Go
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 = "Wählen Sie Ihre bevorzugte Sprache" 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 = "Wählen Sie Ihre bevorzugte Sprache" setPopupBackgroundResource(R.color.material_grey_600) } } override fun onNothingSelected(parent: AdapterView<*>?) { showToast(message = "Nichts ausgewählt") } override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) { when (view?.id) { 1 -> showToast(message = "Spinner 2 Position:${position} und Sprache: ${languages[position]}") else -> { showToast(message = "Spinner 1 Position:${position} und Sprache: ${languages[position]}") } } } private fun showToast(context: Context = applicationContext, message: String, duration: Int = Toast.LENGTH_LONG) { Toast.makeText(context, message, duration).show() } }

Wichtige Punkte:

  • Dank der Kotlin Android Extensions ist das XML-Spinner-Widget automatisch in unserer Kotlin-Aktivitätsklasse verfügbar.
  • Wir haben ein Array von Strings erstellt, das Programmiersprachen enthält, die im Adapter mit ArrayAdapter gefüllt sind.
  • setDropDownViewResource ist, um das Layout für den ausgewählten Zustand und die Spinner-Listenpunkte festzulegen.
  • android.R.layout.simple_spinner_item ist, um das Standard-Android-SDK-Layout festzulegen. Standardmäßig ist das TextView in diesem Layout linksbündig.
  • Wir haben programmgesteuert einen zweiten Spinner erstellt, der Layouts aus der spinner_right_aligned.xml-Datei lädt.
  • setSelection(0, false) wird verwendet, um zu verhindern, dass die OnItemSelected-Methoden des Spinners beim Erstellen der Aktivität ausgelöst werden.

Wie funktioniert das?

Die Methode setSelection() informiert die Aktivität darüber, dass das erste Spinner-Element bereits ausgewählt ist. Wir müssen diese Anweisung vor onItemSelectedListener = this platzieren. setPopupBackgroundResource wird verwendet, um die Hintergrundfarbe der Dropdown-Liste festzulegen. Innerhalb der onItemSelected-Funktion verwenden wir die when-Anweisung, um eine Toast-Nachricht für das entsprechende Spinner-Element auszulösen. Dank Kotlin und Funktionen mit Standardwerten haben wir den umständlichen Aufruf des Toasts reduziert.

4. Spinner Kotlin App-Ausgabe

Das folgende Bild zeigt die Ausgabe, wenn die obige Anwendung auf einem Emulator ausgeführt sind.

Bereit, Ihre Android-Apps mit Spinners aufzupeppen? Viel Spaß beim Programmieren mit Kotlin!

Jetzt 200 € Guthaben sichern

Testen Sie Ihr Setup auf ccloud³

Registrieren Sie sich in der ccloud³ und erhalten Sie 200 € Startguthaben für Ihr Projekt – z. B. für eine PostgreSQL-VM mit automatischen Backups.

centron Redaktion Technische Redaktion

Das Redaktionsteam von centron schreibt Anleitungen aus dem Betriebsalltag: getestet auf unserer eigenen Plattform, betrieben im Rechenzentrum in Hallstadt bei Bamberg.

Kategorie JavaScript
Teilen
Noch offene Fragen?

Our team will help you with your specific setup - in German or English, by people who run the platform themselves.

War dieses Tutorial hilfreich?

Your answer is stored anonymously and helps us improve our tutorials.

Kommentare

No comments yet - be the first to ask a question about this tutorial.

Sign in to comment

Comments are open to centron customers. Sign in to your account to ask a question about this tutorial.

Weiterlesen

Das könnte Sie auch interessieren

Jetzt kostenlos anfangen

Melden Sie sich an und erhalten Sie in den ersten 60 Tagen ein Guthaben von 200 € bei centron.

Dieses Werbeangebot gilt nur für neue Konten. Angebot ausschließlich für Gewerbetreibende.

Jetzt loslegen Sales kontaktieren