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.

Kotlin Android Fundamentals 10.3: Design für alle

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.

Einführung

Es ist sinnvoll, wenn eine App von den meisten Nutzern verwendet werden kann. Dabei spielt es keine Rolle, ob Sie die App für die Zufriedenheit entwickeln oder zu Geschäftszwecken. Dafür gibt es mehrere Dimensionen.

RTL-Sprachen unterstützen Europa und viele andere Sprachen lesen von links nach rechts und Apps, die aus diesen Sprachen stammen, sind normalerweise für diese Sprachen geeignet. Viele andere Sprachen mit einer großen Anzahl von Reden werden von rechts nach links gelesen, z. B. Arabisch. Gestalten Sie Ihre App mit von rechts nach links ausgerichteten Sprachen, um Ihre potenzielle Zielgruppe zu vergrößern.
Nach Barrierefreiheit suchen Wie viele andere Nutzer Probleme mit Ihrer App haben könnten, hängt von den Problemen ab. Mit dem Accessibility Scanner werden Fehler behoben und die App wird analysiert. So können Sie herausfinden, wo die Barrierefreiheit verbessert werden sollte.
Design für TalkBack mit Inhaltsbeschreibungen Sehbehinderungen treten häufiger auf, als man denkt. Viele Nutzer, nicht nur blinde, verwenden einen Screenreader. Beschreibungen des Inhalts sind Beschreibungen, die einem Screenreader mitgeteilt werden, wenn ein Nutzer mit einem Element des Bildschirms interagiert.
Nachtmodus unterstützen Für viele sehbehinderte Nutzer wird durch eine Änderung der Bildschirmfarben der Kontrast erhöht und sie können visuell mit Ihrer App funktionieren. Mit Android lässt sich der Nachtmodus am besten unterstützen.

In diesem Codelab lernen Sie die einzelnen Optionen kennen und können sie in der GDG Finder App unterstützen.

Hier erfahren Sie, wie Sie Chips in Ihrer Android-App verwenden. Sie können Chips verwenden, um Ihre App interessanter zu machen und gleichzeitig zugänglich zu machen.

Was Sie bereits wissen sollten

Sie sollten mit Folgendem vertraut sein:

Erstelle Apps mit Aktivitäten und Fragmenten und navigiere zwischen den Fragmenten, die Daten übergeben.
Das Layout einer Benutzeroberfläche mithilfe von Ansichten und Datenansichtsgruppen, insbesondere RecyclerView,
Architekturkomponenten wie ViewModel mit der empfohlenen Architektur verwenden, um eine gut strukturierte und effiziente App zu erstellen
Datenbindung, Koroutinen und den Umgang mit Mausklicks
Verbindung zum Internet herstellen und Daten lokal über eine Raumdatenbank im Cache speichern
Ansichtsattribute festlegen und Ressourcen in XML-Ressourcendateien extrahieren und verwenden.
Mit Designs und Designs das Erscheinungsbild deiner App anpassen
Wie Sie Materialkomponenten, Dimensionsressourcen und benutzerdefinierte Farben verwenden.

Lerninhalte

Wie deine App von der größten Anzahl an Nutzern verwendet werden kann.
Wie Sie Ihre App für Rechts-nach-links-Sprachen (RTL) optimieren können
Wie du die Barrierefreiheit deiner App bewertest
Mit Inhaltsbeschreibungen wird Ihre App von Screenreadern optimiert.
So verwenden Sie Chips.
So funktioniert Ihre App mit dem dunklen Modus.

Aufgaben

Evaluieren und erweitern Sie eine bestimmte App, um die Barrierefreiheit zu verbessern.
Prüfe deine App, um herauszufinden, wo die Barrierefreiheit verbessert werden könnte.
Verwenden Sie Inhaltsbeschreibungen für Bilder.
Informationen zum Verwenden von Drawables
Du kannst deiner App den Nachtmodus hinzufügen.

Die Start-App mit GDG-Finder basiert auf allen bisher gelernten Inhalten dieses Kurses.

Die App verwendet ConstraintLayout, um drei Bildschirme herauszustellen. Zwei der Bildschirme sind nur Layoutdateien, mit denen Sie auf Android-Geräten Farben und Text entdecken können.

Der dritte Bildschirm ist eine GDG-Suche. GDGs oder Google-Entwicklergruppen sind Communities von Entwicklern, die sich auf Google-Technologien konzentrieren, einschließlich Android. Auf der ganzen Welt veranstalten GDGs Treffen, Konferenzen, Jams und andere Veranstaltungen.

Bei der Entwicklung dieser App arbeiten Sie an einer echten Liste von GDGs. Im Bildschirm des Finders werden die GDGs nach Entfernung nach dem Gerät sortiert.

Wenn Sie Glück haben und in Ihrer Region einen GDG haben, können Sie sich auf der Website umsehen und sich dort für die Veranstaltungen registrieren. GDG-Events sind eine gute Möglichkeit, andere Android-Entwickler kennenzulernen und Best Practices der Branche kennenzulernen, die in den Kurs passten.

Die folgenden Screenshots zeigen, wie sich Ihre App vom Anfang bis zum Ende dieses Codelabs ändert.

Der Hauptunterschied zwischen Rechts-nach-links-Sprachen (RT-Sprachen) und Rechts-nach-links-Sprachen (RTL) ist die Richtung des angezeigten Inhalts. Wird die Richtung der UI von LTR zu RTL geändert (und umgekehrt), wird dies oft als Spiegelung bezeichnet. Die Spiegelung wirkt sich auf den Großteil des Bildschirms aus, einschließlich Text, Textfeldsymbole, Layouts und Symbole mit Wegbeschreibung (z. B. Pfeile). Andere Elemente werden nicht gespiegelt, z. B. Zahlen (Uhr, Telefonnummern), Symbole, die keine Richtung (Flugmodus, WLAN), Wiedergabesteuerung sowie die meisten Diagramme und Grafiken haben.

Sprachen, die den Rechts-nach-Text-Text verwenden, werden von mehr als einer Milliarde Menschen weltweit verwendet. Android-Entwickler gibt es auf der ganzen Welt. Eine GDG Finder App muss also RTL-Sprachen unterstützen.

Schritt 1: RTL-Unterstützung hinzufügen

In diesem Schritt machen Sie die GDG Finder App mit RTL-Sprachen verfügbar.

Laden Sie die GDGFinderMaterial-App herunter und führen Sie sie aus diesem Codelab aus. Alternativ können Sie mit dem letzten Code des vorherigen Codelabs fortfahren.
Öffnen Sie das Android-Manifest.
Fügen Sie im Abschnitt <application> den folgenden Code hinzu, um anzugeben, dass die App RTL unterstützt.

<application
        ...
        android:supportsRtl="true">

Öffnen Sie im Tab Design die Datei activity_main.xml.
Wählen Sie im Drop-down-Menü Sprache für die Vorschau die Option Vorschau von rechts nach links aus. Wenn Sie dieses Menü nicht finden, erweitern Sie den Bereich oder schließen Sie den Bereich Attribute, damit er sichtbar ist.

In der Vorschau sehen Sie, dass die Kopfzeile & GTG Finder nach rechts verschoben wurde und der Rest des Bildschirms fast identisch ist. Insgesamt ist dieser Bildschirm passend. Die Ausrichtung in der Textansicht ist jedoch falsch, da sie links und nicht rechts ausgerichtet wird.

Damit das auf Ihrem Gerät funktioniert, wählen Sie auf dem Gerät oder in den Emulator-Einstellungen unter Entwickleroptionen die Option RTT-Layout erzwingen aus. Wenn Sie die Entwickleroptionen aktivieren müssen, suchen Sie die Build-Nummer und klicken Sie darauf, bis Sie die Information erhalten, dass Sie ein Entwickler sind. Das richtet sich nach dem Gerät und der Version des Android-Systems.

Führen Sie die App aus und prüfen Sie auf dem Gerät, ob der Hauptbildschirm wie in der Vorschau angezeigt wird. Das Tool ist jetzt links abgebildet, das Menü Hamburger rechts.
Öffnen Sie in der App die Navigationsleiste und gehen Sie zum Bildschirm Suchen. Wie unten dargestellt, befinden sich die Symbole links sowie ohne Text. Es wird angezeigt, dass der Text nicht auf dem Bildschirm links neben dem Symbol zu sehen ist. Das liegt daran, dass im Code in den Ansichtseigenschaften und den Layouteinschränkungen der linke und rechte Bildschirmverweis verwendet wird.

Schritt 2: Start- und Enddatum statt links und rechts verwenden

Auf dem Bildschirm (wenn du den Bildschirm verfolgst) ändert sich auf dem Bildschirm nichts, auch wenn sich die Textrichtung ändert. Zum Beispiel schränkt layout_constraintLeft_toLeftOf die linke Seite des Elements auf der linken Seite des Bildschirms ein. In Ihrer App ist der Text in der linksläufigen Sprache nicht sichtbar, wie auf dem Screenshot oben zu sehen ist.

Verwenden Sie statt der Wörter „links“ und „rechts“ die Werte „Start“ und „End“. Bei dieser Terminologie werden der Anfang des Texts und das Ende des Textes entsprechend der Textrichtung in der aktuellen Sprache festgelegt, sodass Ränder und Layouts sich in den richtigen Bildschirmbereichen befinden.

Openlist_item.xml.
Ersetzen Sie alle Verweise auf Left und Right durch Verweise auf Start und End.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

Ersetzen Sie den layout_marginLeft von ImageView durch layout_marginStart. Dadurch wird der Rand an die richtige Stelle verschoben, um das Symbol vom Bildschirmrand zu entfernen.

<ImageView
android:layout_marginStart="
?

Öffnen Sie fragment_gdg_list.xml. Sehen Sie sich die Liste der GDGs im Bereich Vorschau an. Das Symbol weist nach wie vor in der falschen Richtung auf, weil es gespiegelt wird. Falls das Symbol nicht gespiegelt wird, prüfen Sie, ob Sie die Vorschau von rechts nach links sehen. Gemäß den Richtlinien für Material Design dürfen die Symbole nicht gespiegelt werden.
Öffnen Sie res/drawable/ic_gdg.xml.
Suchen Sie in der ersten Zeile des XML-Codes und löschen Sie android:autoMirrored="true", um die Spiegelung zu deaktivieren.
Prüfen Sie die Vorschau oder führen Sie die App noch einmal aus und öffnen Sie den GDG-Bildschirm für die Suche. Das Layout sollte jetzt behoben sein.

Schritt 3: Android Studio übernehmen

In der vorherigen Übung haben Sie die ersten Schritte unternommen, um RTL-Sprachen zu unterstützen. Android Studio kann beispielsweise Ihre App scannen und eine Reihe von Grundlagen für Sie einrichten.

Ändern Sie in der Datei list_item.xml in der Datei TextView den Wert layout_marginStart in layout_marginLeft zurück, sodass über den Scanner etwas gefunden wird.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

Wähle in Android Studio die Option Refaktorieren &durchführen; nach Möglichkeit RTL-Support hinzufügen aus und klicke auf die Kästchen für die Aktualisierung des Manifests sowie auf die Layoutdateien, um die Start- und Endeigenschaften zu verwenden.

Suchen Sie im Bereich Vorschau der Refaktorierung den Ordner App und maximieren Sie ihn, bis alle Details darin geöffnet sind.
Im App-Ordner ist der layout_marginLeft, den Sie gerade geändert haben, als Code zum Refaktorieren aufgeführt.

In der Vorschau sind auch System- und Bibliotheksdateien aufgeführt. Klicken Sie mit der rechten Maustaste auf Layout, ayout-watch-v20 und alle anderen Ordner, die nicht zu App gehören, und wählen Sie im Kontextmenü Ausschließen aus.

Machen Sie jetzt den Refaktorierungsprozess. Wenn Sie ein Pop-up-Fenster zu Systemdateien sehen, achten Sie darauf, dass Sie alle Ordner ausgeschlossen haben, die nicht Teil Ihres App-Codes sind.

Hinweis: layout_marginLeft wurde wieder in layout_marginStart geändert.

Schritt 3: Ordner für Gebietsschemen entdecken

Bislang haben Sie gerade die Richtung der Standardsprache für die App geändert. Bei einer Produktions-App senden Sie die Datei strings.xml an einen Übersetzer, der sie in eine neue Sprache übersetzt. In diesem Codelab gibt die App die Datei strings.xml auf Spanisch an (wir haben Google Übersetzer verwendet, damit die Übersetzungen erstellt werden können). Sie sind also nicht perfekt.

Wechseln Sie in Android Studio zur Projektansicht zu Project Files.
Maximieren Sie den Ordner res und sehen Sie die Ordner für res/values und res/values-es. „&“ in dem Ordnernamen ist der Sprachcode für Spanisch. Die Ordner values-language code code enthalten für jede unterstützte Sprache Werte. Der Ordner values ohne Erweiterung enthält die Standardressourcen, die andernfalls gelten.

Öffnen Sie in values-es die Datei strings.xml und stellen Sie fest, dass alle Strings auf Spanisch vorliegen.
Öffne in Android Studio „activity_main.xml“ auf dem Tab Design.
Wählen Sie im Drop-down-Menü Sprache für die Vorschau die Option Spanisch aus. Der Text sollte jetzt auf Spanisch sein.

[Optional] Wenn Sie sich mit einer RTL-Sprache auskennen, erstellen Sie einen Ordner values und eine strings.xml in dieser Sprache und testen Sie die Darstellung auf Ihrem Gerät.
[Optional] Ändern Sie die Spracheinstellungen auf Ihrem Gerät und führen Sie die App aus. Achten Sie darauf, dass Sie eine nicht eingestellte Sprache in Ihr Gerät ändern. Andernfalls kann es etwas schwieriger werden, sie rückgängig zu machen.

In der vorherigen Aufgabe hast du deine App manuell geändert und dann in Android Studio nach zusätzlichen RTL-Verbesserungen gesucht.

Die Accessibility Scanner App ist das beste Tool, um Nutzern den Zugriff auf Ihre App zu erleichtern. Die App wird auf dem Zielgerät gescannt und Sie erhalten Verbesserungsvorschläge. So können Sie z. B. die Touchziele vergrößern, den Kontrast erhöhen und Beschreibungen für Bilder bereitstellen, die den Zugriff auf Ihre App erleichtern. Accessibility Scanner wurde von Google entwickelt und kann im Play Store installiert werden.

Schritt 1: Accessibility Scanner installieren und ausführen

Öffnen Sie den Play Store und melden Sie sich an, falls Sie noch nicht angemeldet sind. Auf Ihrem physischen Gerät oder dem Emulator. In diesem Codelab wird der Emulator verwendet.

Suchen Sie im Play Store nach Accessibility Scanner von Google LLC. Prüfen Sie, ob Sie die richtige App erhalten, die von Google ausgestellt wurde, da das Scannen viele Berechtigungen erfordert.

Installieren Sie den Scanner im Emulator.
Klicken Sie nach der Installation auf Öffnen.
Klicken Sie auf Jetzt starten.
Klicken Sie auf OK, um die Einrichtung des Accessibility Scanners in den Einstellungen zu starten.

Klicken Sie auf den Accessibility Scanner, um die Einstellungen für das Gerät auf Bedienungshilfen aufzurufen.

Klicken Sie auf Dienst aktivieren, um ihn zu aktivieren.

Folgen Sie der Anleitung auf dem Bildschirm und gewähren Sie alle Berechtigungen.
Klicken Sie dann auf OK und kehren Sie zum Startbildschirm zurück. Möglicherweise erscheint auf dem Bildschirm eine blaue Schaltfläche mit einem Häkchen. Wenn Sie auf diese Schaltfläche klicken, wird die App im Vordergrund getestet. Sie können die Schaltfläche neu anordnen, indem Sie sie ziehen. Diese Schaltfläche bleibt über allen Apps sichtbar, sodass Sie jederzeit Tests auslösen können.

Öffnen oder führen Sie die App aus.
Klicken Sie auf die blaue Schaltfläche und akzeptieren Sie zusätzliche Sicherheitswarnungen und -berechtigungen.

Wenn Sie zum ersten Mal auf das Symbol für den Accessibility Scanner klicken, werden Sie um Zugriff auf alles auf Ihrem Display gebeten. Das ist sehr beängstigend.

Sie sollten eine solche Berechtigung fast nie erteilen, da Apps dann Ihre E-Mails lesen oder sogar Ihre Bankverbindung abrufen können. Damit der Accessibility Scanner funktioniert, muss die App jedoch so geprüft werden, wie der Nutzer es tun würde.

Klicken Sie auf die blaue Schaltfläche und warten Sie, bis die Analyse abgeschlossen ist. Hier siehst du einen Screenshot wie den Screenshot mit einem Titel und einem FAB in Rot. Hier werden zwei Vorschläge zur Verbesserung der Barrierefreiheit auf diesem Bildschirm angezeigt.

Klicken Sie auf das Feld neben „GDG Finder“. Hierdurch wird ein Fenster mit zusätzlichen Informationen geöffnet (siehe unten), die auf Probleme mit dem Kontrast des Bilds hinweisen.
Erweitern Sie die Option Bildkontrast.
Klicken Sie auf die Pfeile rechts, um Informationen zum nächsten Element abzurufen.

Rufen Sie in Ihrer App den Bildschirm GDG beantragen auf und scannen Sie ihn mit der Accessibility Scanner-App (siehe Anleitung unten). 12, um genau zu sein. Aus Gründen der Fairness sind einige davon Duplikate für ähnliche Artikel.
Klicken Sie in der unteren Symbolleiste auf das Symbol -Symbol, um eine Liste aller Vorschläge zu sehen, wie im Screenshot unten rechts. In diesem Codelab beheben Sie alle diese Probleme.

Die Android Accessibility Suite, eine Sammlung von Apps von Google, enthält Tools, mit denen Sie Apps barrierefreier gestalten. Hierzu zählen Tools wie TalkBack. TalkBack ist ein Screenreader, der Audio-, Haptik- und gesprochenes Feedback bietet. Damit können Nutzer Inhalte auf ihren Geräten ansehen und nutzen, ohne ihre Augen zu verwenden.

Es zeigt sich, dass TalkBack nicht nur von blinden Nutzern verwendet wird, sondern auch von vielen Menschen mit Sehbehinderungen. oder auch Menschen, die ihre Augen nicht aus den Augen verlieren möchten.

Barrierefreiheit ist also für alle da! Bei dieser Aufgabe testen Sie TalkBack und aktualisieren Ihre App, damit sie gut funktioniert.

Schritt 1: Accessibility Suite installieren und ausführen

TalkBack ist auf vielen Geräten vorinstalliert, auf dem Emulator muss sie aber installiert werden.

Öffnen Sie den Play Store.
Suchen Sie nach der Accessibility Suite. Prüfen Sie, ob Sie die richtige App von Google verwenden.
Wenn die App nicht installiert ist, installieren Sie sie.
Wenn Sie TalkBack auf dem Gerät aktivieren möchten, rufen Sie Einstellungen &Bedienungshilfen; Bedienungshilfen auf und wählen Sie Dienst verwenden aus. Wie beim Accessibility Scanner sind auch für TalkBack Berechtigungen erforderlich, um die Inhalte auf dem Bildschirm zu lesen. Sobald Sie die Berechtigungsanfragen akzeptiert haben, wird TalkBack mit einer Liste von Anleitungen geöffnet, in denen Sie lernen, wie Sie TalkBack effektiv nutzen.
Halten Sie hier die Anleitung an und lesen Sie die Anleitungen, falls Sie keine andere Gründe dafür haben, wie Sie TalkBack wieder deaktivieren.
Um die Anleitung zu verlassen, klicken Sie auf die Schaltfläche „Zurück“, um sie auszuwählen, und tippen Sie dann doppelt auf eine beliebige Stelle auf dem Bildschirm.

Die GDG Finder App mit TalkBack verwenden Beachten Sie, dass TalkBack keine nützlichen Informationen über den Bildschirm oder ein Steuerelement bereitstellt. Sie beheben das Problem in der nächsten Übung.

Schritt 2: Inhaltsbeschreibung hinzufügen

Beschreibungen des Inhalts sind beschreibende Labels, die die Bedeutung von Ansichten erklären. Die meisten deiner Aufrufe sollten eine Inhaltsbeschreibung enthalten.

Wenn die GDG Finder App ausgeführt wird und Talback aktiviert ist, gehen Sie zum Bildschirm Apply for GDG.
Tippe auf das Hauptbild ... Es passiert nichts.
Öffnen Sie add_gdg_fragment.xml.
Fügen Sie in ImageView ein Attribut für den Inhaltsdeskriptor hinzu (siehe unten). Der stage_image_description-String wird in strings.xml bereitgestellt.

android:contentDescription="@string/stage_image_description"

Führe deine App aus.
Rufen Sie Run to GDG auf und klicken Sie auf das Image. Sie sollten jetzt eine kurze Beschreibung des Bildes hören.
[Optional] Fügen Sie Inhaltsbeschreibungen für die anderen Bilder in dieser App hinzu. In einer Produktions-App müssen alle Bilder Inhaltsbeschreibungen haben.

Schritt 3: Bearbeitbare Textfelder mit Hinweisen versehen

Für bearbeitbare Elemente wie EditText können Sie android:hint in der XML-Datei verwenden, damit Nutzer den Text leichter eingeben können. Auf der Benutzeroberfläche wird ein Hinweis angezeigt, da er der Standardtext in einem Eingabefeld ist.

Sie befinden sich noch in add_gdg_fragment.xml.
Füge Beschreibungen und Hinweise für Inhalte hinzu. Verwende dabei den folgenden Code als Orientierung.

Zu textViewIntro hinzufügen:

android:contentDescription="@string/add_gdg"

Fügen Sie den Bearbeitungstexten entsprechend hinzu:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

Füge eine Inhaltsbeschreibung zu „labelTextWhy“ hinzu.

android:contentDescription="@string/motivation"

EditTextWhy einen Hinweis hinzufügen. Nachdem Sie die Bearbeitungsfelder mit Labels versehen haben, fügen Sie eine Inhaltsbeschreibung des Labels und einen Hinweis auf das Feld hinzu.

android:hint="@string/enter_motivation"

Fügen Sie eine Inhaltsbeschreibung für die Schaltfläche „Senden“ hinzu. Alle Schaltflächen müssen eine Beschreibung dazu haben, was passiert, wenn sie gedrückt werden.

android:contentDescription="@string/submit_button_description"

Führen Sie Ihre App mit aktiviertem Talback aus und füllen Sie das Formular aus, um die Nutzung von GDG zu beantragen.

Schritt 4: Contentgruppe erstellen

Für UI-Steuerelemente, die TalkBack als Gruppe behandelt werden soll, können Sie die Gruppierung nach Content verwenden. Ähnliche Inhalte, die zusammen gruppiert werden, werden zusammen bekannt gegeben. Nutzer von Hilfstechnologien müssen dann nicht so oft wischen, scannen oder warten, bis alle Informationen auf dem Bildschirm angezeigt werden. Dies hat jedoch keinen Einfluss darauf, wie die Steuerelemente auf dem Bildschirm angezeigt werden.

Wenn du UI-Komponenten gruppieren möchtest, fassen Sie sie in einem ViewGroup zusammen, z. B. einem LinearLayout. In der GDG Finder App sind die Elemente labelTextWhy und editTextWhy sehr gut für die Gruppierung geeignet, da sie semantisch zusammengehören.

Öffnen Sie add_gdg_fragment.xml.
Sie müssen LinearLayout um LabelTextWhy und EditTextWhy umschließen, um eine Contentgruppe zu erstellen. Kopieren Sie den Code unten und fügen Sie ihn ein. LinearLayout enthält bereits den gewünschten Stil. Achten Sie darauf, dass sich die button außerhalb der LinearLayout befindet.

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

Wählen Sie Code > Code neu formatieren aus, um den gesamten Code korrekt einzufügen.
Alle Layoutgrenzen aus labelTextWhy und editTextWhy entfernen.
Ändern Sie in labelTextWhy die Einschränkung layout_constraintTop_toTopOf in contentGroup.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

Ändern Sie in editTextWhy die Einschränkung layout_constraintBottom_toBottomOf in contentGroup.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

Beschränkt EditTextRegion und Button auf contentGroup, um die Fehler zu entfernen.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

Ränder am LinearLayout hinzufügen. Extrahieren Sie optional diese Marge als Dimension.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

Wenn Sie Hilfe benötigen, vergleichen Sie Ihren Code mit dem add_gdg_fragment.xml im Lösungscode.

Führen Sie Ihre App aus und sehen Sie sich den Bildschirm Anwenden auf GDG mit TalkBack an.

Schritt 5: Live-Region hinzufügen

Das Label auf der Schaltfläche zum Senden lautet derzeit OK. Es wäre besser, die Schaltfläche mit einem Label und einer Beschreibung zu versehen, bevor das Formular gesendet wird. Nach dem Absenden des Formulars werden sie dynamisch in ein anderes Label und eine andere Inhaltsbeschreibung geändert. Sie können dazu eine Live-Region verwenden.

Eine Live-Region zeigt den Bedienungshilfen an, ob der Nutzer benachrichtigt werden soll, wenn sich eine Ansicht ändert. Beispielsweise können Sie die Barrierefreiheit Ihrer App verbessern, indem Sie den Nutzer über ein falsches Passwort oder einen Netzwerkfehler informieren. In diesem Beispiel informieren wir den Nutzer, wenn sich die Schaltfläche zum Senden des Status ändert.

Öffnen Sie add_gdg_fragment.xml.
Ändere die Textzuweisung der Schaltfläche zu Senden mithilfe der bereitgestellten submit-String-Ressource.

android:text="@string/submit"

Fügen Sie der Schaltfläche eine Live-Region hinzu, indem Sie das Attribut android:accessibilityLiveRegion festlegen. Während der Eingabe haben Sie mehrere Optionen, Je nach Wichtigkeit der Änderung können Sie auswählen, ob der Nutzer unterbrochen werden soll. Mit dem Wert „assertive“ unterbrechen Bedienungshilfen die laufende Sprachausgabe, um Änderungen an dieser Ansicht sofort zu melden. Wenn Sie den Wert auf „none“ setzen, werden keine Änderungen vorgenommen. Wenn diese Funktion auf „höflich“ gesetzt ist, werden die Bedienungshilfen informiert, aber warten Sie. Legen Sie den Wert auf „höflich“ an.

android:accessibilityLiveRegion="polite"

Öffnen Sie AddGdgFragment.kt im Paket add.
Lege im showSnackBarEvent Observer, wenn die SnackBar Beschreibung angezeigt wird, eine neue Beschreibung des Inhalts und den Text für die Schaltfläche fest.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

Führen Sie Ihre App aus und klicken Sie auf die Schaltfläche. Die Schaltfläche und die Schriftart sind leider zu klein.

Schritt 6: Stil der Schaltfläche korrigieren

Ändern Sie in add_gdg_fragment.xml die Schaltflächen width und height zu wrap_content, damit das vollständige Label sichtbar und die Größe der Schaltfläche gut ist.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Löschen Sie die Attribute backgroundTint, textColor und textSize von der Schaltfläche, damit die App das passende Design wirkt.
Löschen Sie das textColor-Attribut aus textViewIntro. Die Designfarben sollten einen guten Kontrast bieten.
Führen Sie die App aus. Beachten Sie die wesentlich nützlichere Schaltfläche Senden. Klicken Sie auf Senden und sehen Sie sich an, wie sich der Status auf Fertig ändert.

Chips sind kompakte Elemente, die ein Attribut, einen Text, eine Entität oder eine Aktion darstellen. Sie können Informationen eingeben, eine Auswahl auswählen, Inhalte filtern oder eine Aktion auslösen.

Das Chip-Widget ist ein schmaler Wrapper für die Ansicht um den ChipDrawable, der alle Layout- und Zeichenlogik enthält. Diese zusätzliche Logik unterstützt die Navigation mit Touchscreen, Maus, Tastatur und Bedienungshilfen. Der Hauptchip und das Schließen-Symbol werden als separate logische Unteransichten betrachtet und haben ihre eigene Navigation und ihren eigenen Status.

Für Chips werden Leisten verwendet. Mit Android-Zeichnen können Sie Bilder, Formen und Animationen auf dem Bildschirm zeichnen. Die Elemente können eine feste Größe oder die Größe haben. Sie können Bilder als Zeichnungen verwenden, z. B. die Bilder in der GDG-App. Und Sie können mit Vektorbildern alles zeichnen, was Sie sich vorstellen. Außerdem gibt es eine anpassbare Größe, die als 9-Patch-Dialing bezeichnet wird. In diesem Codelab ist das nicht möglich. Auch das GDG-Logo in der Datei drawable/ic_gdg.xml ist eine weitere Zeichnung.

Drawables sind keine Ansichten. Daher können Sie eine Drawable nicht direkt in einem ConstraintLayout platzieren, sondern in einem ImageView. Sie können auch Drawables verwenden, um einen Hintergrund für eine Textansicht oder eine Schaltfläche zu erstellen, und der Hintergrund wird hinter dem Text gezeichnet.

Schritt 1: Chips auf die Liste der GDGs setzen

Auf dem folgenden Chip sind drei Zeichenfelder zu sehen. Der Hintergrund und das Häkchen sind jeweils unentschieden. Wenn Sie den Chip berühren, wird ein Welleneffekt erzeugt. Dieser Vorgang wird mit einem speziellen RippleDrawable durchgeführt, der einen Welleneffekt als Reaktion auf Statusänderungen anzeigt.

In dieser Aufgabe fügen Sie der Liste der GDGs Chips hinzu, die sich bei ihrer Auswahl ändern lassen. In dieser Übung fügst du oben auf dem Bildschirm Suchsymbol eine Reihe von Schaltflächen mit der Bezeichnung Chips hinzu. Jede Schaltfläche filtert die GDG-Liste so, dass der Nutzer nur Ergebnisse aus der ausgewählten Region erhält. Wenn eine Schaltfläche ausgewählt wird, ändert sich der Hintergrund und es wird ein Häkchen angezeigt.

Öffnen Sie die Datei fragment_gdg_list.xml.
Erstelle eine com.google.android.material.chip.ChipGroup in der HorizontalScrollView.-Property singleLine auf true, damit alle Chips in einer horizontal scrollbaren Linie aufeinanderliegen. Setzen Sie die singleSelection-Property auf true, damit jeweils nur ein Chip in der Gruppe ausgewählt werden kann. Hier ist der Code.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

Erstellen Sie im Ordner layout eine neue Layoutressourcendatei namens region.xml, um das Layout für ein Chip zu definieren.
Ersetzen Sie in der Datei egion.xml den gesamten Code durch das Layout für ein Chip, wie unten beschrieben. Beachten Sie, dass diese Chip eine Materialkomponente ist. Beachten Sie auch, dass Sie das Häkchen erhalten, wenn Sie die Property app:checkedIconVisible festlegen. Sie erhalten eine Fehlermeldung für die fehlende selected_highlight-Farbe.

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

Um die fehlende selected_highlight-Farbe zu erstellen, setzen Sie den Cursor auf selected_highlight, öffnen Sie das Intent-Menü und erstellen Sie eine Farbressource für die ausgewählte Markierung. Die Standardoptionen sind in Ordnung. Klicken Sie also einfach auf OK. Die Datei wird im Ordner res/color erstellt.
Öffnen Sie die Datei res/color/selected_highlight.xml. In dieser als <selector> codierten Farbstatusliste kannst du unterschiedliche Farben für verschiedene Zustände angeben. Jeder Status und die dazugehörige Farbe werden als <item> codiert. Weitere Informationen zu diesen Farben finden Sie unter Farbdesign.

Fügen Sie der <selector> ein Element mit der Standardfarbe colorOnSurface hinzu. Bei Statuslisten ist es wichtig, alle Bundesstaaten abzudecken. Dazu können Sie beispielsweise eine Standardfarbe verwenden.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

Füge oberhalb der Standardfarbe ein item mit der Farbe colorPrimaryVariant hinzu und schränke seine Verwendung auf den ausgewählten Status true ein. Statuslisten werden von oben nach unten bearbeitet, z. B. eine Fallbeschreibung. Wenn keiner der Bundesstaaten übereinstimmt, wird der Standardstatus angewendet.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

Schritt 2: Zeile der Chips anzeigen

Die GDG App erstellt eine Liste von Chips, die Regionen mit GDG zeigen. Ist ein Chip ausgewählt, filtert die App die Ergebnisse so, dass nur GDG-Ergebnisse für diese Region angezeigt werden.

Öffnen Sie im Paket search die Datei GdgListFragment.kt.
Fügen Sie in onCreateView(), direkt über der return-Anweisung, einen Beobachtungsserver für viewModel.regionList hinzu und überschreiben Sie onChanged(). Wenn sich die Liste der Regionen ändert, die vom Ansichtsmodell bereitgestellt werden, müssen die Chips neu erstellt werden. Fügen Sie eine Anweisung hinzu, die sofort zurückgegeben wird, wenn die angegebene data null ist.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

Weisen Sie in onChanged() unter dem Nulltest binding.regionList einer neuen Variablen namens chipGroup zu, um die regionList im Cache zu speichern.

val chipGroup = binding.regionList

Erstellen Sie unten einen neuen layoutInflator, um Chips von chipGroup.context zu erhöhen.

val inflator = LayoutInflater.from(chipGroup.context)

Bereinigung und Neuerstellung des Projekts, um den Datenbindungsfehler zu beseitigen

Unter dem Inflation können Sie jetzt die tatsächlichen Chips erstellen, einen für jede Region im regionList.

Erstellen Sie die Variable children für alle Chips. Weisen Sie ihm eine Zuordnungsfunktion für die übergebenen data zu, um jeden Chip zu erstellen und zurückzugeben.

val children = data.map {}

Erstellen Sie auf der Karte für jeden regionName-Chip einen Chip, um diesen zu erweitern. Der vollständige Code finden Sie unten.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

Fügen Sie im Lambda-Ereignis vor der Rückgabe von chip einen Klick-Listener hinzu. Setze den Status bei einem Klick auf chip auf checked. Rufen Sie onFilterChanged() in viewModel auf. Dadurch wird eine Reihe von Ereignissen ausgelöst, durch die das Ergebnis für diesen Filter abgerufen wird.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

Entfernen Sie am Ende des Lambas alle aktuellen Ansichten aus dem chipGroup und fügen Sie dann alle Chips von children zum chipGroup hinzu. (Du kannst die Chips nicht aktualisieren. Daher musst du den Inhalt des chipGroup entfernen und neu erstellen.)

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

Der vollständige Betrachter sollte so aussehen:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

Führen Sie Ihre App aus und suchen Sie nach GDGS, um den Bildschirm Suchen zu öffnen und Ihre neuen Chips zu verwenden. Wenn Sie auf einen Chip klicken, werden die Filtergruppen darunter angezeigt.

Im Nachtmodus wird die Farbe der App zu einem dunklen Design geändert, beispielsweise wenn in den Geräteeinstellungen der Nachtmodus aktiviert wurde. Im Nachtmodus werden die Standardlichteinstellungen von Apps zu dunkel geändert und alle anderen Bildschirmelemente werden entsprechend angepasst.

Schritt 1: Nachtmodus aktivieren

Damit das dunkle Design für deine App eingeblendet wird, änderst du es vom Light-Design zu einem Design namens DayNight. Das Design DayNight wird je nach Modus hell oder dunkel angezeigt.

In styles.xml, ändern Sie das übergeordnete Design von AppTheme von Light in DayNight.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

Rufe in der Methode onCreate() von MainActivity AppCompatDelegate.setDefaultNightMode() auf, um das dunkle Design programmatisch zu aktivieren.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Führen Sie die App aus und prüfen Sie, ob das dunkle Design aktiviert ist.

Schritt 2: Eigene Farbvorlage für das dunkle Design generieren

Wenn Sie das dunkle Design anpassen möchten, erstellen Sie Ordner mit dem Kennzeichner -night, der auf das dunkle Design angewendet werden soll. Sie können beispielsweise bestimmte Farben im Nachtmodus festlegen, indem Sie einen Ordner mit dem Namen „values-night“ erstellen.

Rufen Sie das Farbauswahl-Tool „material.io“ auf und erstellen Sie eine Farbvorlage für das Nachtdesign. Sie können beispielsweise eine dunkelblaue Farbe verwenden.
Generieren Sie die Datei colors.xml und laden Sie sie herunter.
Wechseln Sie zur Ansicht Projektdateien, um alle Ordner in Ihrem Projekt aufzulisten.
Suchen Sie den Ordner res und maximieren Sie ihn.
Erstellen Sie einen Ressourcenordner res/values-night.
Fügen Sie die neue Datei colors.xml dem Ressourcenordner res/values-night hinzu.
Führen Sie Ihre App auch im Nachtmodus aus und verwenden Sie die neuen Farben, die Sie für res/values-night definiert haben. Beachten Sie, dass die Chips die neue sekundäre Farbe verwenden.

Android Studio-Projekt: GDGFinderFinal

Unterstützung von RTL-Sprachen

Legen Sie im Android-Manifest android:supportsRtl="true" fest.
Sie können sich im Emulator eine Vorschau von RTL ansehen und die Bildschirmlayouts in Ihrer eigenen Sprache verwenden. Öffnen Sie auf einem Gerät oder Emulator die Einstellungen und wählen Sie unter Entwickleroptionen die Option RTL-Layout erzwingen aus.
Verweise auf Left und Right durch Verweise auf Start und End ersetzen.
Deaktivieren Sie die Spiegelung für Drawables, indem Sie android:autoMirrored="true" löschen.
Wählen Sie RTL-Support und nach Möglichkeit hinzufügen aus, damit Android Studio die Arbeit für Sie übernehmen kann.
Durch Speichern von Ordnern und Werten für values-/language code können Sie sprachspezifische Ressourcen speichern.

Zugänglichkeit ermitteln

Laden Sie den Accessibility Scanner von Google LLC herunter und führen Sie ihn im Play Store aus, um nach Bildschirmelementen zu suchen.

Design für TalkBack mit Inhaltsbeschreibungen

Installieren Sie die Android Accessibility Suite von Google, die TalkBack enthält.
Fügen Sie allen UI-Elementen Inhaltsbeschreibungen hinzu. Beispiel:
android:contentDescription="@string/stage_image_description"
Verwende für ein bearbeitbares Element wie EditText ein android:hint-Attribut in der XML-Datei, um den Nutzer darüber zu informieren, was eingegeben werden soll.
Contentgruppen erstellen, indem Sie zugehörige Elemente in einer Ansichtsgruppe zusammenfassen
Sie können eine Live-Region erstellen und Nutzern so über android:accessibilityLiveRegion zusätzliches Feedback geben.

Filter mit Chips implementieren

Chips sind kompakte Elemente, die ein Attribut, einen Text, eine Entität oder eine Aktion darstellen.
Verwende eine com.google.android.material.chip.ChipGroup, um eine Gruppe von Chips zu erstellen.
Definieren Sie das Layout für ein com.google.android.material.chip.Chip-Objekt.
Wenn Sie möchten, dass Ihre Chips Farben ändern, stellen Sie eine Farbstatusliste als <selector> mit zustandsorientierten Farben bereit:
<item android:color="?attr/colorPrimaryVariant" android:state_selected="true" />
Verknüpfe die Chips mit Live-Daten, indem du den Daten im Ansichtsmodell einen Beobachter hinzufügst.
Erstellen Sie einen Inflator für die Chipgruppe, um sie anzuzeigen:
LayoutInflater.from(chipGroup.context)
Erstellen Sie die Chips und fügen Sie einen Klick-Listener hinzu, der die gewünschte Aktion auslöst. Fügen Sie dann die Chips der Chipgruppe hinzu.

Dunkler Modus

Nutze den DayNight AppTheme, um den dunklen Modus zu unterstützen.
Du kannst den dunklen Modus programmatisch festlegen:
AppCompatDelegate.setDefaultNightMode()
Erstellen Sie einen Ressourcenordner für res/values-night, um benutzerdefinierte Farben und Werte für den dunklen Modus anzugeben.

Android-Entwicklerdokumentation:

Weitere Informationen:

Android-Apps mit Kotlin entwickeln (Udacity-Kurs)
Kotlin Bootcamp für Programmierer (Udacity-Kurs)
Kotlin-Bootcamp für Programmierer

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.

Frage 1

Was ist für die Unterstützung von RTL-Sprachen obligatorisch?

▢ Ersetzen Sie Left und Right in Properties durch Start und End

▢ Zu einer RTL-Sprache wechseln

▢ Wichtig: Die Symbole müssen android:autoMirrored="true" verwenden

▢ Inhalte beschreiben

Frage 2

Welche der folgenden Bedienungshilfen sind in den meisten Android-Geräten enthalten?

▢ TalkBack

▢ Accessibility Scanner

▢ in Android Studio: Nach Möglichkeit refaktorieren; RTL-Unterstützung hinzufügen

▢ Lint

Frage 3

Welche der folgenden Aussagen trifft nicht auf Chips zu?

▢ Chips werden im Rahmen von ChipGroup angezeigt.

▢. Sie können für einen ChipGroup eine Farbstatusliste angeben.

▢ Chips sind kompakte Elemente, die eine Eingabe, ein Attribut oder eine Aktion darstellen.

▢: Du musst DarkTheme immer aktivieren, wenn deine App Chips verwendet.

Frage 4

Für welches Design gibt es Stile für den dunklen und hellen Modus?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

Frage 5

Was ist eine Live-Region?

▢ Ein Knoten mit Informationen, die für den Nutzer wichtig sind

▢ Eine Bildschirmseite, deren Form sich an den Materialrichtlinien ändert

▢ Ein Aufruf vom Videostreaming

▢ Animiertes Drawable