Android Kotlin Fundamentals 02.1: Lineares Layout mit dem Layout-Editor

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.
• Grundlagen von LinearLayout.
• Eine einfache App erstellen, die LinearLayout und TextView verwendet.

Lerninhalte

• Mit View und ViewGroup arbeiten
• Wie Sie Aufrufe in Activity mit LinearLayout. organisieren
• ScrollView mithilfe von scrollbaren Inhalten anzeigen
• Sichtbarkeit eines View ändern.
• String- und Dimensionsressourcen erstellen und verwenden
• So erstellen Sie ein lineares Layout mit dem Layout-Editor von Android Studio

Aufgaben

• Über die App „Über mich“ erstellen
• Fügen Sie dem Layout ein TextView hinzu, um Ihren Namen anzuzeigen.
• ImageView. hinzufügen
• Fügen Sie einen ScrollView hinzu, um scrollbaren Text anzuzeigen.

In der App "Über mich" können Sie interessante Fakten zu Ihrer Person präsentieren oder die App für einen Freund, ein Familienmitglied oder ein Haustier anpassen. Diese App enthält einen Namen, eine FERTIG-Schaltfläche, ein Sternsymbol und einen scrollbaren Text.

In dieser Aufgabe erstellen Sie das ÜberÜber Android Android Studio-Projekt.

1. Android Studio öffnen, falls es noch nicht geschehen ist.
2. Wenn ein Projekt bereits in Android Studio geöffnet ist, wähle Datei > Neues Projekt &Neues Projekt aus.
   
   
   
3. Wenn ein Projekt noch nicht geöffnet ist, wählen Sie im Dialogfeld Willkommen bei Android Studio die Option + Neues Android Studio-Projekt starten aus.
   
   
   
4. Wählen Sie im Dialogfeld Neues Projekt erstellen auf dem Tab Smartphone und Tablet die Vorlage Leere Aktivität aus. Klicken Sie auf Weiter.
   
   
   
5. Legen Sie im nächsten Dialogfeld Neues Projekt erstellen die folgenden Parameter fest und klicken Sie auf Fertig.
   

Attribut	Value
Name der Anwendung	Über mich
Name des Unternehmens: Android	com.android.example.AboutMe (oder Ihre eigene Domain)
Standort speichern	Übernehmen Sie den Standardspeicherort oder wechseln Sie zu Ihrem bevorzugten Verzeichnis.
Sprache	Kotlin
Mindest-API-Level	API 19: Android 4.4 (KitKat)
Dieses Projekt unterstützt Instant-Apps	Lassen Sie das Kästchen deaktiviert.
AndroidX-Artefakte verwenden	Klicken Sie dieses Kästchen an.

Es dauert einen Moment, bis Android Studio die Projektdateien generiert hat.

6. Führen Sie Ihre App aus. Auf dem leeren Bildschirm wird der String „Hello World“ angezeigt.
   

Mit der Vorlage für leere Aktivitäten wird eine einzelne leere Aktivität erstellt: Mainactivity.kt. Sie erstellt auch eine Layoutdatei mit dem Namen activity_main.xml. Die Layoutdatei hat ConstraintLayoutals Stamm ViewGroup und hat nur einen Inhalt TextView.

In dieser Aufgabe ändern Sie den generierten Stamm ViewGroup zu LinearLayout. Die Elemente der Benutzeroberfläche sind auch vertikal angeordnet.

Gruppen ansehen

Ein ViewGroup ist eine Ansicht, die untergeordnete Ansichten enthalten kann, also andere Ansichten und Gruppen. Ansichten, die ein Layout bilden, sind als hierarchische Hierarchie der Ansichten organisiert. Eine Ansichtsgruppe ist dabei der Stamm.

In einer LinearLayout-Datenansichtsgruppe sind die UI-Elemente entweder horizontal oder vertikal angeordnet.

Stammlayout ändern, sodass es eine LinearLayout-Ansichtsgruppe verwendet:

1. Wählen Sie den Bereich Projekt > Android aus. Öffnen Sie im Ordner app/res/layout die Datei activity_main.xml.
2. Wählen Sie den Tab Text aus und ändern Sie die Stammansichtsgruppe von ConstraintLayout in LinearLayout.
3. Entfernen Sie TextView. Fügen Sie im LinearLayout-Element das android:orientation-Attribut hinzu und setzen Sie es auf vertical.

Vorher:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Nachher:

<LinearLayout
       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="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

Der Layouteditor ist ein visuelles Designtool in Android Studio. Anstatt manuell XML-Code zu erstellen, um das Layout Ihrer App zu erstellen, können Sie den Layouteditor verwenden, um UI-Elemente in den Designeditor zu ziehen.

Klicken Sie auf den Tab Design, um den Layouteditor aufzurufen. Im Screenshot unten sind die Bereiche des Layout-Editors dargestellt.

Designeditor: Zeigt das Design Ihres Bildschirms in der Designansicht, in der Entwurfsansicht oder in beiden an. Der Designeditor ist der Hauptteil des Layouteditors.

Symbolleiste: Schaltfläche zum Konfigurieren des Layouts im Designeditor und Ändern einiger Layoutattribute Wenn Sie beispielsweise die Anzeige Ihres Layouts im Designeditor ändern möchten, verwenden Sie das Drop-down-Menü Designoberfläche auswählen:

• Verwenden Sie Design, um eine echte Vorschau Ihres Layouts zu sehen.
• Mit Blueprint werden nur die Konturen der jeweiligen Ansicht dargestellt.
• Verwenden Sie Design + Entwurf, um beide Bildschirme nebeneinander anzusehen.

Palette: Enthält eine Liste mit Ansichten und Ansichtsgruppen, die Sie in Ihr Layout oder in den Bereich Baumstruktur ziehen können.

Attribute: Gibt die Attribute für die aktuell ausgewählte Ansicht oder Datenansichtsgruppe an. Mit der -Schaltfläche oben im Fenster können Sie zwischen einer vollständigen Liste von Attributen und häufig verwendeten Attributen wechseln.

Komponentenstruktur: Zeigt die Layouthierarchie als Baumansicht der Datenansichten an. Die Baumstruktur ist nützlich, wenn Sie kleine, ausgeblendete oder überlappende Ansichten haben, die Sie im Designeditor nicht auswählen könnten.

Schritt 1: TextView hinzufügen

1. Öffnen Sie die res/layout/activity_main.xml-Datei, falls sie noch nicht geöffnet ist.
2. Wechseln Sie zum Tab Text und prüfen Sie den Code. Der Code hat eine LinearLayout als Stammansichtsgruppe. (Gruppen ansehen sind Ansichten mit anderen Ansichten.)
   
   LinearLayout hat die erforderlichen Attribute layout_height, layout_width und orientation, die standardmäßig vertical sind.
3. Wechseln Sie zum Tab Design, um den Layouteditor zu öffnen.

Hinweis: Die Tabs Design und Text haben dasselbe Layout. Änderungen, die Sie auf einem Tab vornehmen, werden auf dem anderen übernommen.

4. Ziehen Sie eine Textansicht aus dem Bereich Palette in den Designeditor.
   
   
   
5. Sehen Sie sich den Bereich Baumstruktur an. Die neue Textansicht wird als untergeordnetes Element der übergeordneten Ansichtsgruppe platziert. Dies ist die LinearLayout.
   
   
6. Öffnen Sie den Bereich Attribute, falls noch nicht geschehen. Wenn Sie den Bereich öffnen möchten, klicken Sie doppelt auf die neu hinzugefügten TextView im Designeditor.
7. Legen Sie im Bereich Attribute die folgenden Attribute fest:

Attribut	Value
ID	name_text
Text	Lege deinen Namen fest. Eines der text-Felder zeigt ein Schraubenschlüssel-Symbol an, um anzuzeigen, dass es für den tools-Namespace steht. Die URL ohne den Schraubenschlüssel ist für den Namespace android vorgesehen. Das ist das gewünschte Feld Text.)
text häufigste Textgröße	20sp
text Alternativ &textColor	@android:color/black
text Für die Darstellung von Textausrichtung	Zentrum

Schritt 2: String-Ressource erstellen

Im Baumbaum neben dem TextView, sehen Sie ein Warnsymbol . Klicken Sie wie im Screenshot unten gezeigt auf das Symbol oder den Mauszeiger, um den Warntext zu sehen.

Erstellen Sie eine String-Ressource, um die Warnung zu beheben:

1. Klicken Sie im Bereich Attribute auf die drei Punkte neben dem Attribut Text, das Sie Ihrem Namen zuweisen. Der Ressourceneditor wird geöffnet.
   
   
   
2. Wählen Sie im Dialogfeld Ressourcen die Option Neue Ressource hinzufügen &neuer; Wert für String aus.
3. Setzen Sie im Dialogfeld Neue Stringwertressource das Feld Ressourcenname auf name. Geben Sie für das Feld Ressourcenwert einen eigenen Namen ein. Klicken Sie auf OK. Hinweis: Die Warnung ist nicht mehr verfügbar.
   
   
   
4. Öffnen Sie die Datei res/values/strings.xml und suchen Sie nach der neu erstellten Stringressource name.

<string name="name">Aleks Haecky</string>

Schritt 3: Dimensionsressource erstellen

Sie haben gerade mit dem Ressourceneditor eine Ressource hinzugefügt. Sie können auch Ressourcen im XML-Code-Editor extrahieren, um neue Ressourcen zu erstellen:

1. Wechseln Sie in der Datei activity_main.xml zum Tab Text.
2. Klicken Sie auf der Zeile textSize auf die Zahl (20sp) und geben Sie Alt+Enter (Option+Enter auf dem Mac) ein. Wählen Sie im Pop-up-Menü die Option Dimensionsressource extrahieren aus.
3. Geben Sie im Dialogfeld Ressource extrahieren im Feld Ressourcenname den Wert text_size ein. Klicken Sie auf OK.
   
   
   
4. Öffne die Datei res/values/dimens.xml, um den folgenden generierten Code zu sehen:

<dimen name="text_size">20sp</dimen>

Hinweis: Wenn die Datei dimens.xml nicht bereits in deinem res/values-Ordner vorhanden war, wird sie in Android Studio erstellt.

5. Öffnen Sie die Datei MainActivity.kt und suchen Sie am Ende der Funktion onCreate() nach dem folgenden Code:

setContentView(R.layout.activity_main)

Die Funktion setContentView() verbindet die Layoutdatei mit dem Activity. Die angegebene Layoutressourcendatei ist R.layout.activity_main:

• R ist ein Verweis auf die Ressource. Dies ist eine automatisch generierte Klasse mit Definitionen für alle Ressourcen in Ihrer App.
• layout.activity_main gibt an, dass die Ressource ein Layout mit dem Namen activity_main ist.

6. Führen Sie Ihre App aus. Ein TextView mit Ihrem Namen wird angezeigt.
   
   

Wenn Sie sich den App-Bildschirm ansehen, wird Ihr Name oben auf dem Bildschirm angezeigt. Sie können also einen Abstand und einen Rand hinzufügen.

Abstand und Rand

Der Abstand ist der Bereich innerhalb der Grenzen einer Ansicht oder eines Elements. Es ist der Abstand zwischen den Rändern der Ansicht und dem Inhalt der Ansicht, wie in der Abbildung unten dargestellt.

Außerdem wird der Abstand einer Ansicht hinzugefügt. Häufig werden die folgenden Abstände verwendet:

• Mit android:padding wird ein Abstand für alle vier Kanten der Ansicht festgelegt.
• Mit android:paddingTop wird ein Abstand für den oberen Rand festgelegt.
• Mit android:paddingBottom wird ein Abstand für den unteren Rand festgelegt.
• Mit android:paddingStart wird ein Abstand für den Startrand der Ansicht festgelegt.
• Mit android:paddingEnd wird ein Abstand für den Rand der Ansicht festgelegt.
• Mit android:paddingLeft wird ein Abstand für den linken Rand festgelegt.
• Mit android:paddingRight wird ein Abstand für den rechten Rand festgelegt.

Der Rand ist der Bereich, der außerhalb des Rahmens der Ansicht hinzugefügt wird. Dabei handelt es sich um den Abstand vom Rand der Ansicht zum übergeordneten Element, wie in der Abbildung oben dargestellt. Häufig werden Margenattribute verwendet:

• android:layout_margin gibt eine Gewinnmarge für alle vier Seiten der Ansicht an.
• android:layout_marginBottom gibt einen Bereich außerhalb der Unterseite dieser Ansicht an.
• In android:layout_marginStart wird ein Gruppenbereich außerhalb der Seite dieser Ansicht angegeben.
• Mit android:layout_marginEnd wird ein Leerzeichen am Ende dieser Ansicht festgelegt.
• Mit android:layout_marginLeft wird ein Leerzeichen auf der linken Seite dieser Ansicht festgelegt.
• In android:layout_marginRight wird rechts neben dieser Ansicht ein Bereich angegeben.

Rechts/Links-im Vergleich zu Anfang/Ende

Mit „Rechts“ und „Links“ beziehen Sie sich immer auf die rechte und linke Seite des Bildschirms, unabhängig davon, ob Ihre App von links nach rechts oder von links nach rechts zeigt. „Start“ und „Ende“ beziehen sich immer auf den Anfang und das Ende des Vorgangs:

• Bei einem LTR-Vorgang starten Sie = links und end=rechts.
• Bei einem RTL-Ablauf starten Sie start=right und end=left.

Wenn Ihre App auf API-Level 17 (Android 4.2) oder höher ausgerichtet ist:

• Verwenden Sie „Start“ und „Ende“ anstelle von „Links“ und „Rechts“ sowie „Rechts“.
• Zum Beispiel sollte android:layout_marginLeft zu android:layout_marginStart werden, um RTL-Sprachen zu unterstützen.

Wenn du möchtest, dass deine App mit Versionen niedriger als Android 4.2 funktioniert, d. h., wenn die targetSdkVersion oder minSdkVersion der App 16 oder niedriger ist

• Fügen Sie zusätzlich zu „Links“ und „Rechts“ sowie neben „Rechts“ die Werte „&“ ein.
• Verwenden Sie beispielsweise sowohl android:paddingLeft als auch android:paddingStart.

Schritt 1: Abstand hinzufügen

Fügen Sie Abstand zwischen dem Namen und dem oberen Rand der name-Textansicht hinzu.

1. Öffnen Sie die activity_main.xml-Datei auf dem Tab Design.
2. Klicken Sie in der Baumstruktur oder im Designeditor auf die Textansicht, um den Bereich Attribute zu öffnen.
3. Klicken Sie oben im Bereich Attribute auf den Doppelpfeil , um alle verfügbaren Attribute zu sehen.
4. Suchen Sie nach Abstand, maximieren Sie ihn und klicken Sie auf das Dreipunkt-Menü ... neben dem Attribut oben. Das Dialogfeld Ressourcen wird angezeigt.
5. Wählen Sie im Dialogfeld Ressourcen die Option Neue Ressource hinzufügen &Neuer Wert aus.
6. Erstellen Sie im Dialogfeld Neue Dimension des Dimensionswerts eine neue dimen-Ressource mit dem Namen small_padding und dem Wert 8dp.
   
   Die Abkürzung dp steht für density-unabhängig. Wenn ein UI-Element auf Bildschirmen mit verschiedenen Dichten dieselbe Größe haben soll, verwenden Sie „dp“ als Maßeinheit. Verwenden Sie bei der Angabe der Textgröße jedoch immer sp (skalierbare Pixel).
7. Klicken Sie auf OK.

Schritt 2: Gewinnmarge hinzufügen

Fügen Sie einen oberen Rand hinzu, um die Textansicht „name“ vom Rand des übergeordneten Elements zu entfernen.

1. Suchen Sie im Bereich Attribute nach „margin_margin“ und suchen Sie Layout_Margin.
2. Maximieren Sie Layout_Margin und klicken Sie auf das Dreipunkt-Menü ... neben dem Attribut top.
3. Erstellen Sie eine neue dimen-Ressource namens layout_margin und machen Sie sie zu 16dp. Klicken Sie auf OK.

Schritt 3: Schriftart hinzufügen

Verwende die Schriftart „Android Roboto“, um die name-Textansicht zu verbessern. Diese Schriftart ist Teil der Supportbibliothek. Sie fügen die Schriftart als Ressource hinzu.

1. Suchen Sie im Bereich Attribute nach "fontFamily"".
2. Klicken Sie im Feld fontFamily auf den Drop-down-Pfeil, scrollen Sie nach unten und wählen Sie Weitere Schriftarten aus.
3. Suchen Sie im Dialogfeld Ressourcen nach rob und wählen Sie Roboto aus. Wählen Sie in der Liste Vorschau die Option Normal aus.
4. Wählen Sie das Optionsfeld Schriftart hinzufügen aus.
5. Klicken Sie auf OK.
   
   

Der Ordner res hat jetzt einen font-Ordner mit einer roboto.ttf-Schriftartdatei. Das @font/roboto-Attribut wird Ihrem TextView hinzugefügt.

Schritt 4: Stil extrahieren

Ein Stil ist eine Sammlung von Attributen, bei denen Darstellung und Format einer Ansicht festgelegt werden. Ein Stil kann Schriftfarbe, Schriftgröße, Hintergrundfarbe, Abstände, Ränder und andere gängige Attribute umfassen.

Du kannst die name-Textansicht in einen Stil extrahieren und den Stil für eine beliebige Anzahl von Aufrufen in deiner App wiederverwenden. Durch die Verwendung eines Stils verleihst du deiner App einen einheitlichen Look, wenn du mehrere Aufrufe hast. Mit Stilen können Sie außerdem diese gemeinsamen Attribute an einem Ort aufbewahren.

1. Klicken Sie im Baumbaum mit der rechten Maustaste auf TextView und wählen Sie Stil refaktorieren; Stil extrahieren aus.
2. Entfernen Sie im Dialogfeld Android-Stil extrahieren das Häkchen aus den Kästchen layout_width, layout_height und textAlignment. Diese Attribute unterscheiden sich in der Regel je nach Ansicht, sodass sie nicht Teil des Stils sein sollen.
3. Geben Sie in das Feld Stilname die Bezeichnung NameStyle ein.
4. Klicken Sie auf OK.
   
   
   
5. Ein Stil ist auch eine Ressource. Daher wird der Stil im Ordner res/values/ in einer styles.xml-Datei gespeichert. Öffnen Sie styles.xml und prüfen Sie den generierten Code für das NameStyle-Format, das in etwa so aussieht:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. Öffnen Sie activity_main.xml und wechseln Sie zum Tab Text. In der Textansicht wird das generierte Design als style="@style/NameStyle" verwendet.
7. Führe die App aus und achte darauf, dass sich die Schriftart und der Abstand rund um die TextView ändern.

Die meisten realen Android-Apps bestehen aus einer Kombination von Ansichten, mit denen Bilder angezeigt, Text angezeigt und Eingaben des Nutzers in Form von Text- oder Klickereignissen akzeptiert werden. In dieser Aufgabe fügen Sie eine Ansicht hinzu, mit der ein Bild angezeigt werden kann.

Eine ImageView ist eine Ansicht zur Anzeige von Bildressourcen. Beispielsweise kann eine ImageView Bitmap-Ressourcen wie PNG-, JPG-, GIF- oder WebP-Dateien oder eine Drawable-Ressource wie eine Vektorzeichnung anzeigen.

Android bietet Bildressourcen wie Beispielsymbole, Avatare und Hintergründe. Sie werden Ihrer App eine dieser Ressourcen hinzufügen.

1. Sehen Sie sich die Layoutdatei auf dem Tab Design an und ziehen Sie dann eine ImageView aus dem Bereich Palette unter name_text in die Baumansicht der Komponente. Das Dialogfeld Ressourcen wird geöffnet.
2. Wählen Sie Drawable aus, wenn die App nicht bereits ausgewählt ist.
3. Maximieren Sie android, scrollen Sie und wählen Sie btn_star_big_on aus. Es ist der gelbe Stern .
4. Klicken Sie auf OK.
   
   
   
   Das Sternsymbol wird zum Layout unter Ihrem Namen hinzugefügt. Da Sie ein vertikales LinearLayout-Element haben, sind die hinzugefügten Ansichten vertikal ausgerichtet.
   
   
5. Wechseln Sie zum Tab Text und sehen Sie sich den generierten ImageView-Code an. Die Breite wird auf match_parent festgelegt, sodass die Ansicht so breit ist wie das übergeordnete Element. Die Höhe wird auf wrap_content gesetzt, sodass die Ansicht so hoch ist wie der Inhalt. Das ImageView-Objekt verweist auf die Drawable-btn_star_big_on.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. Wenn du den id von ImageView umbenennen möchtest, klicke mit der rechten Maustaste auf "@+id/imageView" und wähle Refaktorieren &Umbenennen aus.
7. Setzen Sie den id im Dialogfeld Umbenennen auf @+id/star_image. Klicken Sie auf Refaktorieren.
   
   
   

Tipp: Refaktorieren > Umbenennen benennt alle Vorkommen eines Attributs oder Variablennamens in Ihrem App-Projekt um.

8. Klicken Sie auf dem Tab Design in der Baumstruktur neben star_image auf das Warnsymbol . Die Warnung bezieht sich auf eine fehlende contentDescription, die von Screenreadern verwendet wird, um dem Nutzer Bilder zu beschreiben.
9. Klicken Sie im Bereich Attribute neben dem Attribut contentDescription auf das Dreipunkt-Menü .... Das Dialogfeld Ressourcen wird geöffnet.
10. Wählen Sie im Dialogfeld Ressourcen die Option Neue Ressource hinzufügen &neuer; Wert für String aus. Setzen Sie das Feld Ressourcenname auf yellow_star und das Feld Ressourcenwert auf Yellow star. Klicken Sie auf OK.
11. Fügen Sie im Bereich Attribute einen oberen Rand von 16dp (@dimen/layout_margin) hinzu, damit das Sternsymbol vom yellow_star getrennt wird.
12. Führen Sie Ihre App aus. Ihr Name und das Sternsymbol werden in der App angezeigt.
    
    

Eine ScrollView ist eine Ansichtsgruppe, in der die darin verschobene Ansichtshierarchie gescrollt werden kann. Eine Scrollansicht kann nur eine andere Ansicht oder Gruppe als Kind enthalten. Die untergeordnete Ansicht ist in der Regel ein LinearLayout. In einem LinearLayout können Sie weitere Ansichten hinzufügen.

Die folgende Abbildung zeigt ein Beispiel für eine ScrollView, die eine LinearLayout enthält, die mehrere andere Ansichten enthält.

In dieser Aufgabe fügen Sie eine ScrollView ein, mit der der Nutzer durch eine Textansicht scrollen kann, in der eine kurze Biografie angezeigt wird. Wenn Sie nur eine Ansicht scrollbar machen möchten, können Sie die Ansicht direkt in die ScrollView einfügen. Das ist die Aufgabe in dieser Aufgabe.

Schritt 1: ScrollView hinzufügen, der eine TextView enthält

1. Öffnen Sie die Datei activity_main.xml auf dem Tab Design.
2. Ziehen Sie eine Scrollansicht in das Layout. Ziehen Sie sie dazu in den Designeditor oder in die Baumstruktur. Platzieren Sie die Scrollansicht unter dem Sternsymbol.
3. Wechseln Sie zum Tab Text, um den generierten Code zu prüfen.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

Höhe und Breite von ScrollView stimmen mit dem übergeordneten Element überein. Sobald die Textansicht "name_text" und die Bildansicht von star_image genug vertikalen Platz für ihre Inhalte haben, legt das Android-System das ScrollView fest, um den Rest des verfügbaren Platzes auf dem Bildschirm zu füllen.

4. Fügen Sie id zum ScrollView hinzu und nennen Sie es bio_scroll. Wenn du dem ScrollView ein id-Objekt hinzufügst, wird das Android-System für die Ansicht erfasst. Wenn der Nutzer dann das Gerät dreht, wird die Scrollposition beibehalten.
5. Entferne in ScrollView den LinearLayout-Code, weil deine App nur eine Ansicht hat, die scrollbar ist: ein TextView.
6. Ziehen Sie eine TextView aus der Palette in die Baumstruktur. Fügen Sie den TextView unter dem bio_scroll als untergeordnetes Element von bio_scroll ein.
   
   
7. Legen Sie die id der neuen Textansicht auf bio_text fest.
8. Als Nächstes fügen Sie einen Stil für die neue Textansicht hinzu. Klicken Sie im Bereich Attribute neben dem Attribut style auf das Dreipunkt-Menü ..., um das Dialogfeld Ressourcen zu öffnen.
9. Suchen Sie im Dialogfeld Ressourcen nach NameStyle. Wählen Sie NameStyle aus der Liste aus und klicken Sie auf OK. In der Textansicht wird jetzt das Format NameStyle verwendet, das Sie in einer vorherigen Aufgabe erstellt haben.
   
   

Schritt 2: Biografie in die neue TextView aufnehmen

1. Öffnen Sie strings.xml, erstellen Sie eine String-Ressource mit dem Namen bio und geben Sie einen langen Text über sich selbst oder über alles ein, was Sie wünschen.
   

Hinweis:

• Verwenden Sie \n, um einen Zeilenumbruch anzugeben.
• Apostrophe müssen Sie mit einem umgekehrten Schrägstrich maskieren. Beispiel:
  "You mustn\'t forget the backslash."
• Für Fettdruck verwendest du <b>...</b> und für kursiven Text <i>...</i>. Beispiel:
  "This text is <b>bold</b> and this text is <i>italics</i>."

Hier ein Beispiel für eine Biografie:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. Lege in der Textansicht (bio_text) den Wert des Attributs text auf die String-Ressource bio fest, die deine Biografie enthält.
3. Fügen Sie Leerzeichen zwischen den Zeilen ein, um die Lesbarkeit von bio_text zu verbessern. Für das Attribut lineSpacingMultiplier gibst du den Wert 1.2 an.
   
   
   
   Achten Sie darauf, dass der Text bio im Designeditor bis zum Bildschirmrand reicht. Um dieses Problem zu beheben, können Sie dem Stammverzeichnis LinearLayout Attribute für das linke, beginnende, rechte und Endabstand hinzufügen. Sie müssen den unteren Abstand nicht hinzufügen, da der Text, der direkt bis zum unteren Rand angezeigt wird, dem Nutzer signalisiert, dass der Text scrollbar ist.
4. Fügen Sie dem Stamm-LinearLayout den Start- und Endabstand von 16dp hinzu.
5. Wechseln Sie zum Tab Text, extrahieren Sie die Dimensionsressource und nennen Sie sie layout_padding.
   
   

Hinweis: Ab API-Level 17 können Sie Ihre App für RTL-Sprachen wie Arabisch anpassen und mit „"end“ und „End“ anstelle von „Links“ und „Rechts“

6. Führen Sie Ihre App aus und scrollen Sie durch den Text.
   
   

Glückwunsch!

Sie haben nun eine komplette App von Grund auf neu erstellt.

Android Studio-Projekt: AboutMe

Hinweis: Alle Coding-Herausforderungen sind optional.

Füge im ScrollView einen ImageViewüber dem TextView hinzu. Wenn Sie die App ausführen, wird dieses Bild im Gegensatz zum Stern durch Scrollen ausgeblendet.

Hinweis: Die Scrollansicht kann nur eine untergeordnete Ansicht haben. Sie müssen die beiden scrollbaren Ansichten ImageView und TextView in eine LinearLayout zusammenfassen.

• Ein ViewGroup ist eine Ansicht, die andere Ansichten enthalten kann. LinearLayout und ScrollView sind Ansichtsgruppen.
• LinearLayout ist eine Ansichtsgruppe, in der die untergeordneten Ansichten horizontal oder vertikal angeordnet werden.
• Verwende ScrollView, wenn Inhalte auf dem Bildschirm angezeigt werden sollen, etwa langer Text oder eine Sammlung von Bildern. Eine Scrollansicht kann nur eine untergeordnete Ansicht enthalten. Wenn du in mehr als einer Ansicht scrollen möchtest, füge dem ScrollView ein ViewGroup wie LinearLayout hinzu und setze die Ansichten, die innerhalb dieser ViewGroup gescrollt werden sollen.
• Der Layouteditor ist ein visueller Editor in Android Studio. Sie können den Layouteditor verwenden, um das Layout Ihrer App zu erstellen, indem Sie UI-Elemente in das Layout ziehen.
• Ein Stil ist eine Sammlung von Attributen, mit denen das Aussehen einer Datenansicht festgelegt wird. Für einen Stil können beispielsweise Schriftfarbe, Schriftgröße, Hintergrundfarbe, Abstand und Rand festgelegt werden.
• Sie können alle Formatierungen einer Ansicht extrahieren und diese als Stil verwenden. Damit Ihre App einheitlich erscheint, können Sie den Stil für andere Ansichten wiederverwenden.

Udacity-Kurs:

• Android-Apps mit Kotlin entwickeln

Android-Entwicklerdokumentation:

• Layouts
• ViewGroup
• View
• Lineares Layout
• ScrollView
• Unterstützung verschiedener Pixeldichten (dp)
• UI mit dem Layouteditor erstellen
• Dokumentation zu Android Studio
• Designs

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

Welche der folgenden Optionen ist eine Datenansichtsgruppe?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Frage 2

Welche der folgenden Hierarchien für Datenansichten ist ungültig?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

Frage 3

Stile sind Ressourcen, die in styles.xml definiert sind. Mithilfe von Stilen können Sie Farben, Schriftarten, Textgrößen und viele weitere Eigenschaften einer Ansicht definieren. Richtig oder falsch?

▢ wahr

▢ Falsch

Frage 4

Ein ScrollView ist eine Ansichtsgruppe, die beliebig viele Aufrufe oder Ansichtsgruppen als untergeordnete Elemente enthalten kann. Richtig oder falsch?

▢ wahr

▢ Falsch

Frage 5

Über welches UI-Element können Bilder in Ihrer App angezeigt werden?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Nächste Lektion: 2.2: Nutzerinteraktion hinzufügen

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