Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Diese Seite wurde von der Cloud Translation API übersetzt.

Android Kotlin Fundamentals 02.2: Nutzerinteraktion hinzufügen

Dieses Codelab ist Teil des Android Kotlin Fundamentals-Kurss. Sie profitieren von diesem Kurs, wenn Sie nacheinander die Codelabs durcharbeiten. Alle Kurs-Codelabs finden Sie auf der Landingpage für Kotlin-Grundlagen für Android-Entwickler.

Was Sie bereits wissen sollten

Einfache Android-App in Kotlin erstellen.
Android-App auf einem Emulator oder einem Gerät ausführen.
Lineares Layout mit dem Android Studio-Layouteditor erstellen
Es wird eine einfache App erstellt, die LinearLayout, TextView, ScrollView und eine Schaltfläche mit einem Klick-Handler verwendet.

Lerninhalte

Nutzereingabe mit einer EditText-Ansicht abrufen
Text für die Ansicht"TextView"mit dem Text aus der Ansicht"EditText"festlegen.
Mit View und ViewGroup arbeiten
Sichtbarkeit eines View ändern.

Aufgaben

Mit der App „AboutMe“ aus einem früheren Codelab kannst du interaktive Funktionen hinzufügen.
Fügen Sie ein EditText-Objekt hinzu, damit der Nutzer Text eingeben kann.
Fügen Sie ein Button-Objekt hinzu und implementieren Sie den Klick-Handler.

In diesem Codelab kannst du Nutzer über das Tool „Über mich“ erweitern. Sie fügen ein Aliasfeld, eine FERTIG-Schaltfläche und eine Textansicht hinzu, um den Alias anzuzeigen. Wenn der Nutzer einen Alias eingibt und auf die Schaltfläche FERTIG tippt, wird die Textansicht aktualisiert, sodass der eingegebene Alias angezeigt wird. Durch Tippen auf die Textansicht kann der Nutzer den Alias noch einmal aktualisieren.

Über mich App

In dieser Aufgabe fügen Sie ein EditText-Eingabefeld hinzu, damit der Nutzer einen Alias eingeben kann.

Schritt 1: Erste Schritte

Laden Sie den Startcode AboutMeInteractive-Starter herunter, falls Sie sie noch nicht aus einem früheren Codelab haben. Dieselbe Code, den Sie in einem vorherigen Codelab abgeschlossen haben.
Öffnen Sie das Projekt „AboutMeInteractive-Starter“ in Android Studio.
Führen Sie die App aus. Sie sehen eine Textansicht, einen Stern und ein langes Textsegment in einer Scrollansicht.

Hinweis: Der Nutzer kann keinen Text ändern.

Apps sind interessanter, wenn der Nutzer mit der App interagieren kann, z. B. wenn er Text eingeben kann. Android bietet ein UI-Widget (Edit Text), mit dem Sie die Texteingabe akzeptieren können. Sie definieren einen Bearbeitungstext mit EditText, einer Unterklasse von TextView. Mit einem Bearbeitungstext kann der Nutzer Text eingeben und bearbeiten, wie im Screenshot unten zu sehen ist.

Schritt 2: EditorText hinzufügen

Öffne in Android Studio die Layoutdatei activity_main.xml auf dem Tab Design.
Klicken Sie im Bereich Palette auf Text.

Ab TextView ist ein TextView. Dieses Element wird oben in der Liste der Textelemente im Bereich Palette angezeigt. Unter Ab TextView befinden sich mehrere EditText-Ansichten.

Im Bereich Palette sehen Sie, wie das Symbol für TextView die Buchstaben Ab ohne Unterstriche zeigt. Die Symbole EditText werden jedoch mit Unterstrichen gekennzeichnet. Der Unterstrich gibt an, dass die Ansicht bearbeitet werden kann.

Für jede der EditText-Ansichten legt Android unterschiedliche Attribute fest und das System zeigt die entsprechende Soft-Input-Methode an (z. B. eine Bildschirmtastatur).
Ziehen Sie einen Text in PlainText in die Baumstruktur und platzieren Sie ihn unter dem name_text und über dem star_image.
Verwenden Sie den Bereich Attribute, um die folgenden Attribute in der Ansicht EditText festzulegen.

Attribut	Value
`id`	`nickname_edit`
`layout_width`	`match_parent` (Standardeinstellung)
`layout_height`	`wrap_content` (Standardeinstellung)

Führen Sie die App aus. Über dem Sternsymbol sehen Sie einen Text zur Bearbeitung mit Standardtext &namet.

In dieser Aufgabe formatieren Sie die EditText-Ansicht mit einem Hinweis, der Textausrichtung, der Formatierung des NameStyle und der Eingabe.

Schritt 1: Hinweistext hinzufügen

Fügen Sie in der Datei string.xml eine neue String-Ressource für den Hinweis hinzu.

<string name="what_is_your_nickname">What is your Nickname?</string>

Verwenden Sie den Bereich Attribute, um die folgenden Attribute auf die Ansicht EditText festzulegen:

Attribut	Value
`style`	`NameStyle`
`textAlignment`	(Mitte)
`hint`	`@string/what_is_your_nickname`

Entfernen Sie im Bereich Attribute den Wert Name aus dem Attribut text. Der Attributwert für text muss leer sein, damit der Hinweis angezeigt wird.

Schritt 2: Attribut „inputType“ festlegen

Das Attribut inputType gibt die Art der Eingabe an, die Nutzer in der Ansicht EditText eingeben können. Das Android-System zeigt je nach festgelegtem Eingabetyp das entsprechende Eingabefeld und die Bildschirmtastatur an.

Um alle möglichen Eingabetypen zu sehen, klicken Sie im Bereich Attribute auf das Feld inputType oder klicken Sie neben dem Feld auf die drei Punkte .... Eine Liste mit allen Arten von Eingaben wird geöffnet, die Sie verwenden können. Der aktuell aktive Eingabetyp ist angeklickt. Sie können mehr als einen Eingabetyp auswählen.

Verwenden Sie beispielsweise für Passwörter den Wert textPassword. Dadurch wird die Eingabe des Nutzers ausgeblendet.

Verwenden Sie für Telefonnummern den Wert phone. Es wird ein Ziffernblock angezeigt und der Nutzer kann nur Zahlen eingeben.

Eingabetyp für das Alias-Feld festlegen:

Legen Sie das inputType-Attribut für den nickname_edit-Text zur Bearbeitung auf textPersonName fest.
Im Bereich Baumstruktur sehen Sie die Warnung autoFillHints. Diese Warnung gilt nicht für diese App und wird in diesem Codelab nicht berücksichtigt. Sie können sie also ignorieren. Weitere Informationen zur Funktion „Automatisches Ausfüllen“ finden Sie unter App für automatisches Ausfüllen optimieren.
Prüfen Sie im Bereich Attribute die Werte für die folgenden Attribute der Ansicht EditText:

Attribut	Value
`id`	`nickname_edit`
`layout_width`	`match_parent` (Standardeinstellung)
`layout_height`	`wrap_content` (Standardeinstellung)
`style`	`@style/NameStyle`
`inputType`	`textPersonName`
`hint`	`"@string/what_is_your_nickname"`
`text`	(leer)

Ein Button ist ein UI-Element, auf das der Nutzer tippen kann, um eine Aktion auszuführen. Eine Schaltfläche kann aus Text, einem Symbol oder sowohl Text als auch ein Symbol bestehen.

Bei dieser Aufgabe fügen Sie die Schaltfläche FERTIG hinzu, auf die der Nutzer tippt, nachdem er einen Alias eingegeben hat. Durch die Schaltfläche wird die Ansicht EditText gegen die Ansicht TextView ersetzt, in der der Alias angezeigt wird. Der Nutzer kann auf die Ansicht"TextView"tippen, um den Alias zu aktualisieren.

Schritt 1: Schaltfläche „FERTIG“ hinzufügen

Ziehen Sie eine Schaltfläche aus dem Bereich Palette in die Baumstruktur. Klicke auf die Schaltfläche unter dem Text zum Bearbeiten von nickname_edit.
Erstellen Sie eine neue Stringressource mit dem Namen done. Geben Sie dem String den Wert Done

<string name="done">Done</string>

Geben Sie im Bereich Attribute die folgenden Attribute in der neu hinzugefügten Button-Ansicht an:

Attribut	Werte
`id`	`done_button`
`text`	`@string/done`
`layout_gravity`	`center_horizontal`
`layout_width`	`wrap_content`

Das Attribut layout_gravity zentriert die Ansicht im übergeordneten Layout LinearLayout.

Ändern Sie das Design in Widget.AppCompat.Button.Colored – einen der vordefinierten Stile von Android. Sie können den Stil entweder aus dem Drop-down-Menü oder aus dem Fenster Ressourcen auswählen.

Hiermit wird die Farbe der Schaltfläche in die Akzentfarbe (colorAccent) geändert. Die Akzentfarbe ist in der res/values/colors.xml-Datei definiert.

Die Datei „colors.xml“ enthält die Standardfarben Ihrer App. Sie können neue Farbressourcen hinzufügen oder die vorhandenen Farbressourcen in Ihrem Projekt ändern. Das hängt von den Anforderungen Ihrer App ab.

Beispieldatei colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

Schritt 2: Stil der Schaltfläche „FERTIG“ ändern

Fügen Sie im Bereich Attribute einen oberen Rand hinzu, indem Sie Layout_Margin > Top auswählen. Legen Sie den oberen Rand auf layout_margin fest, der in der Datei dimens.xml definiert ist.
Legen Sie im Drop-down-Menü das Attribut fontFamily auf roboto fest.
Wechseln Sie zum Tab Text und prüfen Sie den generierten XML-Code für die neu hinzugefügte Schaltfläche.

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

Schritt 3: Farbressource ändern

In diesem Schritt kannst du die Akzentfarbe der Schaltfläche an die App-Leiste deiner Aktivität anpassen.

Öffne res/values/colors.xml und ändere den Wert von colorAccent zu #76bf5e.

<color name="colorAccent">#76bf5e</color>

Die Farbe des HEX-Code wird am linken Rand des Dateieditors angezeigt.

Die Farbe der Schaltfläche im Designeditor ändert sich.

Führen Sie Ihre App aus. Anschließend sollte unter dem Bearbeitungstext die Schaltfläche FERTIG angezeigt werden.

Wenn der Nutzer einen Alias eingibt und auf die Schaltfläche FERTIG tippt, wird der Alias in einer TextView-Ansicht angezeigt. Für diese Aufgabe fügen Sie eine Textansicht mit farbigem Hintergrund hinzu. In der Textansicht wird der Alias des Nutzers über dem star_image angezeigt.

Schritt 1: TextView für den Alias hinzufügen

Ziehen Sie eine Textansicht aus dem Bereich Palette in die Baumstruktur. Positionieren Sie die Textansicht unter dem done_button oder über dem star_image.
Im Bereich Attribute können Sie die folgenden Attribute für die neue Ansicht TextView festlegen:

Attribut	Value
`id`	`nickname_text`
`style`	`NameStyle`
`textAlignment`	(Mitte)

Schritt 2: Sichtbarkeit von TextView ändern

Sie können Aufrufe in Ihrer App mithilfe des visibility-Attributs ein- oder ausblenden. Dieses Attribut verwendet einen der drei Werte:

visible: Die Ansicht ist sichtbar.
Invisible: Die Ansicht wird ausgeblendet, sie ist aber weiterhin im Layout zu sehen.
gone: Die Ansicht wird ausgeblendet und sie belegt keinen Platz im Layout.

Legen Sie im Bereich Attribute die Textanzeige visibility der nickname_text-Ansicht auf gone fest, da diese Textansicht erst in Ihrer App angezeigt werden soll.

Hinweis: Wenn Sie das Attribut im Bereich Attribute ändern, verschwindet die nickname_text-Ansicht aus dem Designeditor. Die Ansicht ist in der Layoutvorschau ausgeblendet.
Ändern Sie den Attributwert text der Ansicht nickname_text in einen leeren String.

Der generierte XML-Code für TextView sollte in etwa so aussehen:

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

Die Layoutvorschau sollte in etwa so aussehen:

Ein Klick-Handler für das Button-Objekt (oder eine beliebige Ansicht) gibt die Aktion an, die ausgeführt wird, wenn auf die Schaltfläche bzw. die Ansicht getippt wird. Die Funktion, mit der das Klickereignis verarbeitet wird, sollte in der Activity implementiert werden, die das Layout mit der Schaltfläche (Ansicht) hostet.

Der Klick-Listener hat im Allgemeinen dieses Format. Die übergebene Ansicht ist die Ansicht, die den Klick oder Tippen erhalten hat.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

Sie haben zwei Möglichkeiten, die Klick-Listener-Funktion an Schaltflächenklicks anzuhängen:

Im XML-Layout können Sie dem <Button>-Element das Attribut android:onClick hinzufügen. Beispiel:

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

ODER

Dies können Sie während der Laufzeit in onCreate() der Activity tun. Rufen Sie dazu setOnClickListener auf. Beispiel:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

In dieser Aufgabe fügen Sie programmatisch einen Klick-Listener für die done_button hinzu. Sie fügen den Klick-Listener der entsprechenden Aktivität hinzu, also MainActivity.kt.

Die Klick-Listener-Funktion addNickname nennt Folgendes:

Rufe den Text aus dem nickname_edit-Bearbeitungstext ab.
Text in der Textansicht (nickname_text) festlegen.
Bearbeite den Text und die Schaltfläche.
Den Alias TextView anzeigen.

Schritt 1: Klick-Listener hinzufügen

Öffnen Sie in Android Studio im Ordner java die Datei MainActivity.kt.
Fügen Sie in MainActivity.kt innerhalb der Klasse MainActivity eine Funktion namens addNickname hinzu. Fügen Sie den Eingabeparameter view vom Typ View ein. Der Parameter view ist der View, in dem die Funktion aufgerufen wird. In diesem Fall ist view die Instanz Ihrer Schaltfläche FERTIG.

private fun addNickname(view: View) {
}

Verwenden Sie in der Funktion addNickname findViewById(), um einen Verweis auf den Bearbeitungstext nickname_edit und die nickname_text-Textansicht zu erhalten.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

Setze den Text in der nicknameTextView-Textansicht auf den Text, den der Nutzer im editText eingegeben hat. Er stammt aus der Property text.

nicknameTextView.text = editText.text

Blenden Sie die Ansicht „Alias“ EditText aus, indem Sie die visibility-Property von editText auf View.GONE festlegen.

In einer vorherigen Aufgabe hast du die Property visibility im Layouteditor geändert. Das Gleiche tue ich auch programmatisch.

editText.visibility = View.GONE

Blende die Schaltfläche FERTIG aus, indem du die visibility-Property auf View.GONE setzt. Sie haben bereits den Referenzparameter view für die Schaltfläche.

view.visibility = View.GONE

Am Ende der Funktion addNickname kannst du die Ansicht TextView anzeigen, indem du die visibility-Property auf View.VISIBLE setzt.

nicknameTextView.visibility = View.VISIBLE

Schritt 2: Klick-Listener an die Schaltfläche „FERTIG“ anhängen

Nachdem Sie nun eine Funktion definiert haben, die die Aktion definiert, die beim Tippen auf die Schaltfläche FERTIG ausgeführt wird, müssen Sie die Funktion an die Ansicht Button anhängen.

Rufen Sie in MainActivity.kt am Ende der onCreate()-Funktion einen Verweis auf die Ansicht FERTIGButton ab. Verwende die Funktion findViewById() und rufe setOnClickListener auf. Übergeben Sie einen Verweis auf die Klick-Listener-Funktion addNickname().

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

Im obigen Code bezieht sich it auf done_button, also die Ansicht, die als Argument übergeben wird.

Führen Sie Ihre App aus, geben Sie einen Alias ein und tippen Sie auf die Schaltfläche FERTIG. Sie sehen, wie der Text und die Schaltfläche durch den Text ersetzt werden.

Auch wenn der Nutzer auf FERTIG tippt, ist die Tastatur weiterhin sichtbar. Das ist die Standardeinstellung.

Schritt 3: Tastatur ausblenden

In diesem Schritt fügen Sie Code hinzu, um die Tastatur auszublenden, nachdem der Nutzer auf die Schaltfläche FERTIG getippt hat.

Fügen Sie in MainActivity.kt am Ende der Funktion addNickname() den folgenden Code hinzu. Weitere Informationen zur Funktionsweise dieses Codes finden Sie in der hideSoftInputFromWindow-Dokumentation.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

Führen Sie Ihre App noch einmal aus. Wenn Sie auf FERTIG tippen, wird die Tastatur ausgeblendet.

Der Nutzer kann den Alias nach dem Tippen auf die Schaltfläche FERTIG nicht ändern. In der nächsten Aufgabe machen Sie die App interaktiver und fügen Funktionen hinzu, damit Nutzer den Alias aktualisieren können.

In dieser Aufgabe fügen Sie der Alias-Textansicht einen Klick-Listener hinzu. Der Listener blendet die Alias-Textansicht aus, zeigt den Bearbeitungstext und die Schaltfläche FERTIG an.

Schritt 1: Klick-Listener hinzufügen

Fügen Sie in MainActivity eine Klick-Listener-Funktion namens updateNickname(view: View) für die Alias-Textansicht hinzu.

private fun updateNickname (view: View) {
}

In der updateNickname-Funktion erhalten Sie einen Verweis auf den nickname_edit-Bearbeitungstext und eine Referenz auf die Schaltfläche FERTIG. Verwenden Sie dazu die Methode findViewById().

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

Fügen Sie am Ende der Funktion updateNickname Code hinzu, um den Bearbeitungstext einzublenden, die Schaltfläche FERTIG einzublenden und die Textansicht auszublenden.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

Rufe in MainActivity.kt am Ende der onCreate()Funktion setOnClickListener in der Textansicht nickname_text auf. Übergeben Sie einen Verweis auf die Click-Listener-Funktion, nämlich updateNickname().

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

Führen Sie Ihre App aus. Geben Sie einen Alias ein, tippen Sie auf die Schaltfläche FERTIG und dann auf die Alias-Ansicht TextView. Die Alias-Ansicht verschwindet und der Bearbeitungstext und die Schaltfläche FERTIG werden sichtbar.

Beachten Sie, dass die Ansicht EditText keinen Fokus hat und die Tastatur nicht sichtbar ist. Für den Nutzer ist es schwierig zu erkennen, ob die Textansicht für das Alias anklickbar ist. In der nächsten Aufgabe fügen Sie den Fokus und einen Stil zur Alias-Textansicht hinzu.

Schritt 2: Fokus auf Bearbeitungsansicht setzen und Tastatur anzeigen

Setzen Sie das Ende der Funktion updateNickname auf die Ansicht EditText. Verwende die Methode requestFocus().

// Set the focus to the edit text.
editText.requestFocus()

Fügen Sie am Ende der Funktion updateNickname Code hinzu, um die Tastatur sichtbar zu machen.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

Schritt 3: Hintergrundfarbe für die TextView-Ansicht hinzufügen

Die Hintergrundfarbe der Textansicht für nickname_text auf @color/colorAccent festlegen und einen unteren Abstand von @dimen/small_padding hinzufügen. Diese Änderungen dienen als Hinweis für den Nutzer, dass die Textansicht für das Alias angeklickt werden kann.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

Führen Sie Ihre letzte App aus. Der Text wird bearbeitet, der Alias wird angezeigt und die Textansicht für den Alias wird formatiert.

Jetzt können Sie Ihre interaktive App „Über mich“ einem Freund zeigen.

Android Studio-Projekt: AboutMeInteractive

Das Layouteditor in Android Studio ist ein visueller Designeditor. Im Layouteditor können Sie Benutzeroberflächenelemente in Ihr Layout ziehen, um das Layout Ihrer App zu erstellen.
EditText ist ein UI-Element, mit dem der Nutzer Text eingeben und ändern kann.
Ein Button ist ein UI-Element, auf das der Nutzer tippen kann, um eine Aktion auszuführen. Eine Schaltfläche kann aus Text, einem Symbol oder sowohl Text als auch ein Symbol bestehen.

Klick-Listener

Du kannst jeden View so einstellen, dass er darauf reagiert, indem du einen Klick-Listener hinzufügst.
Die Funktion, die den Klick-Listener definiert, erhält die angeklickte View.

Es gibt zwei Möglichkeiten, einen Klick-Listener an eine View anzuhängen:

Fügen Sie im XML-Layout das Element android:onClick dem Element <View> hinzu.
Verwende in der entsprechenden Activity die Funktion setOnClickListener(View.OnClickListener).

Udacity-Kurs:

Android-Apps mit Kotlin entwickeln

Android-Entwicklerdokumentation:

In diesem Abschnitt werden mögliche Hausaufgaben für Schüler oder Studenten aufgeführt, die an diesem von einem Kursleiter geleiteten Codelab arbeiten. Die Lehrkraft kann Folgendes tun:

Bei Bedarf können Sie die entsprechenden Aufgaben zuweisen.
Schülern mitteilen, wie sie Aufgaben für die Aufgabe abgeben
Benoten Sie die Hausaufgaben.

Lehrkräfte können diese Vorschläge so oft oder so oft verwenden, wie sie möchten. anderen Aufgaben können sie nach Belieben zugewiesen werden.

Wenn Sie alleine an diesem Codelab arbeiten, können Sie Ihr Wissen mit diesen Hausaufgaben testen.

Diese Fragen beantworten

Frage 1

Was ist EditText?

View
LinearLayout
TextView
Button

Frage 2

Durch welchen der folgenden visibility-Attributwerte wird die Ansicht ausgeblendet, sodass sie nicht sichtbar ist und keinen Platz im Layout einnimmt?

visible
Invisible
gone
hide

Frage 3

Für EditText Aufrufe ist es nicht empfehlenswert, Hinweise bereitzustellen, da das Eingabefeld übersichtlicher ist. Richtig oder falsch?

Richtig
Falsch

Frage 4

Welche der folgenden Aussagen trifft auf Button Aufrufe zu?

Eine Button-Datenansicht ist eine Datenansichtsgruppe.
Pro Bildschirm sind nur drei Button Aufrufe möglich.
Button Datenansichten sind anklickbar. Beim Klick hat der angehängte Klick-Listener eine Aktion.
Button ist eine Erweiterung von ImageView.

Beginnen Sie mit der nächsten Lektion: 2.3: Beschränkungslayout mit dem Layouteditor

Links zu anderen Codelabs in diesem Kurs finden Sie auf der Landingpage zu Kotlin-Grundlagen für Android.