Grundlagen von Android und Kotlin 02.1: Lineares Layout mit dem Layout-Editor

Dieses Codelab ist Teil des Kurses „Grundlagen von Android und Kotlin“. Sie können diesen Kurs am besten nutzen, wenn Sie die Codelabs der Reihe nach durcharbeiten. Alle Codelabs des Kurses sind auf der Landingpage für Codelabs zu den Grundlagen von Android und Kotlin aufgeführt.

Was Sie bereits wissen sollten

• Eine einfache Android-App in Kotlin erstellen
• Eine Android-App auf einem Emulator oder einem Gerät ausführen.
• Die Grundlagen von LinearLayout.
• Erstellen einer einfachen App, die LinearLayout und TextView verwendet.

Lerninhalte

• So arbeiten Sie mit View und ViewGroup.
• Ansichten in einem Activity mit LinearLayout. anordnen
• So verwenden Sie ScrollView zum Anzeigen des scrollbaren Inhalts.
• So ändern Sie die Sichtbarkeit einer View.
• String- und Dimensionsressourcen erstellen und verwenden.
• So erstellen Sie ein lineares Layout mit dem Layout-Editor von Android Studio.

Aufgaben

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

In der AboutMe App können Sie interessante Fakten über sich selbst präsentieren oder die App für einen Freund, ein Familienmitglied oder ein Haustier anpassen. In dieser App werden ein Name, die Schaltfläche FERTIG, ein Sternbild und scrollbarer Text angezeigt.

In dieser Aufgabe erstellen Sie das Android Studio-Projekt „AboutMe“.

1. Öffnen Sie Android Studio, falls es noch nicht geöffnet ist.
2. Wenn bereits ein Projekt in Android Studio geöffnet ist, wählen Sie File > New > New Project aus.
   
   
   
3. Wenn noch kein Projekt geöffnet ist, wählen Sie im Dialogfeld Welcome to Android Studio (Willkommen in Android Studio) die Option + Start a new Android Studio project (+ Neues Android Studio-Projekt starten) aus.
   
   
   
4. Wählen Sie im Dialogfeld Create New Project (Neues Projekt erstellen) auf dem Tab Phone and Tablet (Smartphone und Tablet) die Vorlage Empty Activity (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 Fertigstellen.
   

Attribut	Wert
Anwendungsname	AboutMe
Unternehmensname Android	com.android.example.AboutMe (oder Ihre eigene Domain)
Ort speichern	Lassen Sie den Standardspeicherort unverändert oder ändern Sie ihn in das gewünschte Verzeichnis.
Sprache	Kotlin
Mindest-API-Level	API 19: Android 4.4 (KitKat)
Dieses Projekt unterstützt Instant-Apps	Lassen Sie das Häkchen aus diesem Kästchen entfernt.
AndroidX-Artefakte verwenden	Aktivieren Sie dieses Kästchen.

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

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

Mit der Vorlage „Empty Activity“ wird eine einzelne leere Aktivität, Mainactivity.kt, erstellt. Mit der Vorlage wird auch eine Layoutdatei mit dem Namen activity_main.xml erstellt. Die Layoutdatei hat ConstraintLayout als Stamm-ViewGroup und einen einzelnen TextView als Inhalt.

In dieser Aufgabe ändern Sie den generierten Stamm ViewGroup in einen LinearLayout. Außerdem ordnen Sie die UI-Elemente vertikal an.

Gruppen anzeigen

Eine ViewGroup ist eine Ansicht, die untergeordnete Ansichten enthalten kann. Das sind andere Ansichten und Ansichtsgruppen. Ansichten, aus denen ein Layout besteht, sind als Hierarchie von Ansichten mit einer Ansichtsgruppe als Root organisiert.

In einer LinearLayout-Ansichtsgruppe werden die UI-Elemente entweder horizontal oder vertikal angeordnet.

Ändern Sie das Root-Layout so, dass 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 zu LinearLayout.
3. Entfernen Sie TextView. Fügen Sie im LinearLayout-Element das Attribut android:orientation hinzu und legen Sie es auf vertical fest.

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 Layout-Editor ist ein Tool für das visuelle Design in Android Studio. Anstatt XML-Code manuell zu schreiben, um das Layout Ihrer App zu erstellen, können Sie mit dem Layout-Editor UI-Elemente in den Design-Editor ziehen.

Klicken Sie auf den Tab Design, um den Layout-Editor aufzurufen. Der Screenshot unten zeigt die Bereiche des Layout-Editors.

Design-Editor: Hier wird eine visuelle Darstellung des Bildschirmlayouts in der Designansicht, der Blueprint-Ansicht oder beiden Ansichten angezeigt. Der Design-Editor ist der Hauptbereich des Layout-Editors.

Symbolleiste : Hier finden Sie Schaltflächen, mit denen Sie die Darstellung Ihres Layouts im Design-Editor konfigurieren und einige Layoutattribute ändern können. Wenn Sie beispielsweise die Darstellung Ihres Layouts im Designeditor ändern möchten, verwenden Sie das Drop-down-Menü Designoberfläche auswählen :

• Mit Design können Sie sich eine Vorschau Ihres Layouts in der realen Welt ansehen.
• Mit Blueprint werden nur die Umrisse der einzelnen Ansichten angezeigt.
• Mit Design + Blueprint können Sie beide Displays nebeneinander sehen.

Palette: Hier finden Sie eine Liste mit Ansichten und Ansichtsgruppen, die Sie in Ihr Layout oder in den Bereich Komponentenbaum ziehen können.

Attribute: Hier werden Attribute für die aktuell ausgewählte Ansicht oder Ansichtsgruppe angezeigt. Wenn Sie zwischen einer vollständigen Liste von Attributen und häufig verwendeten Attributen wechseln möchten, verwenden Sie das Symbol  oben im Bereich.

Komponentenbaum : Hier wird die Layout-Hierarchie als Baum von Ansichten dargestellt. Die Komponentenstruktur ist nützlich, wenn Sie kleine, verborgene oder sich überschneidende Ansichten haben, die Sie im Design-Editor nicht auswählen können.

Schritt 1: TextView hinzufügen

1. Öffnen Sie die Datei res/layout/activity_main.xml, falls sie noch nicht geöffnet ist.
2. Wechseln Sie zum Tab Text  und sehen Sie sich den Code an. Der Code hat LinearLayout als Stammansichtsgruppe. Ansichtsgruppen sind Ansichten, die andere Ansichten enthalten.
   
   Die LinearLayout hat die erforderlichen Attribute layout_height, layout_width und orientation, die standardmäßig vertical sind.
3. Wechseln Sie zum Tab Design, um den Layout-Editor zu öffnen.

Hinweis: Auf dem Tab Design und dem Tab Text wird dasselbe Layout angezeigt, nur auf unterschiedliche Weise. Änderungen, die Sie auf einem Tab vornehmen, werden auf dem anderen Tab übernommen.

4. Ziehen Sie eine Textansicht aus dem Bereich Palette in den Designeditor.
   
   
   
5. Beachten Sie den Bereich Komponentenbaum. Die neue Textansicht wird als untergeordnetes Element der übergeordneten Ansichtsgruppe, also des LinearLayout, platziert.
   
   
6. Öffnen Sie den Bereich Attribute, falls er noch nicht geöffnet ist. Doppelklicken Sie im Design-Editor auf die neu hinzugefügte Datei TextView, um den Bereich zu öffnen.
7. Legen Sie im Bereich Attribute die folgenden Attribute fest:

Attribut	Wert
ID	name_text
Text	Geben Sie Ihren Namen ein. Eines der text-Felder enthält ein Schraubenschlüsselsymbol, das angibt, dass es für den tools-Namespace vorgesehen ist. Die ohne Schraubenschlüssel ist für den Namespace android. Das ist das Feld text, das Sie benötigen.
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	Zentrieren

Schritt 2: String-Ressource erstellen

Im Komponentenbaum sehen Sie neben TextView, ein Warnsymbol . Klicken Sie auf das Symbol oder bewegen Sie den Mauszeiger darauf, um den Warntext aufzurufen (siehe Screenshot unten).

So beheben Sie die Warnung:

1. Klicken Sie im Bereich Attribute neben dem Attribut text, das Sie auf Ihren Namen festgelegt haben, auf die drei Punkte. Der Ressourcen-Editor wird geöffnet.
   
   
   
2. Wählen Sie im Dialogfeld Ressourcen die Option Neue Ressource hinzufügen > Neuer Stringwert aus.
3. Legen Sie im Dialogfeld Neue String-Wert-Ressource das Feld Ressourcenname auf name fest. Legen Sie das Feld Ressourcenwert auf Ihren eigenen Namen fest. Klicken Sie auf OK. Die Warnung ist nicht mehr vorhanden.
   
   
   
4. Öffnen Sie die Datei res/values/strings.xml und suchen Sie nach der neu erstellten String-Ressource mit dem Namen name.

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

Schritt 3: Dimensionsressource erstellen

Sie haben gerade eine Ressource über den Ressourcen-Editor 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 in der Zeile textSize auf die Zahl (20sp) und geben Sie Alt+Enter ein (Option+Enter auf einem Mac). Wählen Sie im Pop-up-Menü Dimensionsressource extrahieren aus.
3. Geben Sie im Dialogfeld Ressource extrahieren im Feld Ressourcenname den Wert text_size ein. Klicken Sie auf OK.
   
   
   
4. Öffnen Sie 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 noch nicht im Ordner res/values vorhanden war, wird sie von 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 Layout-Ressourcendatei ist R.layout.activity_main:

• R ist ein Verweis auf die Ressource. Es handelt sich um 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 die App aus. Es wird ein TextView mit Ihrem Namen angezeigt.
   
   

Wenn Sie sich den App-Bildschirm ansehen, wird Ihr Name an den oberen Rand des Bildschirms gedrückt. Sie fügen also jetzt einen Innenabstand und einen Rand hinzu.

Padding und Rand

Innenabstand 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.

Die Größe einer Ansicht umfasst auch das Padding. Im Folgenden sind häufig verwendete Padding-Attribute aufgeführt:

• android:padding gibt den Abstand für alle vier Ränder der Ansicht an.
• android:paddingTop gibt den Abstand für den oberen Rand an.
• android:paddingBottom gibt den Innenabstand für den unteren Rand an.
• android:paddingStart gibt den Abstand für den „Start“-Rand der Ansicht an.
• android:paddingEnd gibt den Abstand für den „Ende“-Rand der Ansicht an.
• android:paddingLeft gibt den Abstand für den linken Rand an.
• android:paddingRight gibt das Padding für den rechten Rand an.

Der Rand ist der Bereich, der außerhalb der Grenzen der Ansicht hinzugefügt wird. Es ist der Abstand vom Rand der Ansicht zum übergeordneten Element, wie in der Abbildung oben dargestellt. Im Folgenden sind häufig verwendete Attributtypen für die Marge aufgeführt:

• Mit android:layout_margin wird ein Rand für alle vier Seiten der Ansicht angegeben.
• Mit android:layout_marginBottom wird der Abstand außerhalb der Unterseite dieser Ansicht angegeben.
• android:layout_marginStart gibt den Abstand außerhalb der „Startseite“ dieser Ansicht an.
• Mit android:layout_marginEnd wird der Abstand am Ende dieser Ansicht angegeben.
• android:layout_marginLeft gibt den Abstand auf der linken Seite dieser Ansicht an.
• android:layout_marginRight gibt den Abstand auf der rechten Seite dieser Ansicht an.

Rechts/links im Vergleich zu Anfang/Ende

„Rechts“ und „links“ beziehen sich immer auf die rechte und linke Seite des Bildschirms, unabhängig davon, ob Ihre App einen Links-nach-rechts- (LTR) oder einen Rechts-nach-links-Fluss (RTL) verwendet. „Start“ und „Ende“ beziehen sich immer auf den Anfang und das Ende des Ablaufs:

• Bei einem LTR-Ablauf ist „start“ = „left“ und „end“ = „right“.
• Bei einem RTL-Ablauf gilt: start=right und end=left.

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

• Verwenden Sie „start“ und „end“ anstelle von „left“ und „right“.
• Beispiel: android:layout_marginLeft sollte zu android:layout_marginStart werden, um RTL-Sprachen zu unterstützen.

Wenn Ihre App mit Versionen unter Android 4.2 funktionieren soll, d. h. wenn targetSdkVersion oder minSdkVersion der App 16 oder niedriger ist:

• Fügen Sie zusätzlich zu „left“ und „right“ die Attribute „start“ und „end“ hinzu.
• Verwenden Sie beispielsweise android:paddingLeft und android:paddingStart.

Schritt 1: Innenabstand hinzufügen

Wenn Sie einen Abstand zwischen Ihrem Namen und dem oberen Rand der name-Textansicht einfügen möchten, fügen Sie einen oberen Abstand hinzu.

1. Öffnen Sie die Datei activity_main.xml auf dem Tab Design.
2. Klicken Sie im Komponentenbaum oder im Design-Editor auf die Textansicht, um den Bereich Attribute zu öffnen.
3. Klicken Sie oben im Bereich Attribute auf das Doppelpfeilsymbol , um alle verfügbaren Attribute aufzurufen.
4. Suchen Sie nach Padding, maximieren Sie es und klicken Sie neben dem Attribut top auf das Dreipunkt-Menü .... Das Dialogfeld Ressourcen wird angezeigt.
5. Wählen Sie im Dialogfeld Ressourcen die Option Neue Ressource hinzufügen > Neuer Dimensionswert aus.
6. Erstellen Sie im Dialogfeld New Dimension Value Resource (Neue Ressource für Dimensionswert) eine neue dimen-Ressource mit dem Namen small_padding und dem Wert 8dp.
   
   Die Abkürzung dp steht für dichteunabhängig. Wenn ein UI-Element auf Bildschirmen mit unterschiedlichen Dichten gleich groß aussehen soll, verwenden Sie „dp“ als Maßeinheit. Verwenden Sie beim Festlegen der Textgröße jedoch immer „sp“ (skalierbare Pixel).
7. Klicken Sie auf OK.

Schritt 2: Rand hinzufügen

Wenn Sie die name-Textansicht vom Rand des übergeordneten Elements entfernen möchten, fügen Sie einen oberen Rand hinzu.

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

Schritt 3: Schriftart hinzufügen

Um die Textansicht von name zu optimieren, verwenden Sie die Android-Schriftart Roboto. Diese Schriftart ist Teil der Supportbibliothek und wird als Ressource hinzugefügt.

1. Suchen Sie im Bereich Attributes (Attribute) nach „fontFamily“.
2. Klicken Sie im Feld fontFamily auf den Drop-down-Pfeil, scrollen Sie zum Ende der Liste 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 Regulär aus.
4. Wählen Sie das Optionsfeld Schriftart zum Projekt hinzufügen aus.
5. Klicken Sie auf OK.
   
   

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

Schritt 4: Stil extrahieren

Ein Stil ist eine Sammlung von Attributen, die das Erscheinungsbild und das Format einer Ansicht festlegen. Ein Stil kann Schriftfarbe, Schriftgröße, Hintergrundfarbe, Innenabstand, Rand und andere gängige Attribute enthalten.

Sie können die Formatierung der name-Textansicht in ein Design extrahieren und das Design für beliebig viele Ansichten in Ihrer App wiederverwenden. Durch die Wiederverwendung eines Designs erhält Ihre App ein einheitliches Erscheinungsbild, wenn Sie mehrere Ansichten haben. Wenn Sie Stile verwenden, können Sie diese gemeinsamen Attribute an einem Ort verwalten.

1. Klicken Sie mit der rechten Maustaste auf TextView im Komponentenbaum und wählen Sie Refactor > Extract Style (Umgestalten > 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 sind in der Regel für jede Ansicht unterschiedlich und sollten daher nicht Teil des Stils sein.
3. Geben Sie im Feld Stilname 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 sehen Sie sich den generierten Code für den Stil NameStyle an. Er sollte in etwa so aussehen:

<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. Der generierte Stil wird in der Textansicht als style="@style/NameStyle" verwendet.
7. Führen Sie die App aus und sehen Sie sich die Änderungen an der Schriftart und am Padding um TextView an.

Die meisten Android-Apps in der Praxis bestehen aus einer Kombination von Ansichten, um Bilder und Text anzuzeigen und Eingaben vom Nutzer in Form von Text oder Klickereignissen entgegenzunehmen. In dieser Aufgabe fügen Sie eine Ansicht hinzu, in der ein Bild angezeigt wird.

Ein ImageView ist eine Ansicht zum Anzeigen von Bildressourcen. Ein ImageView kann beispielsweise Bitmap-Ressourcen wie PNG-, JPG-, GIF- oder WebP-Dateien oder eine Drawable-Ressource wie eine Vektorzeichnung darstellen.

Android enthält Bildressourcen wie Beispielsymbole, Avatare und Hintergründe. Sie fügen Ihrer App eine dieser Ressourcen hinzu.

1. Zeigen Sie die Layoutdatei auf dem Tab Design an und ziehen Sie dann eine ImageView aus dem Bereich Palette unter name_text im Komponentenbaum.  Das Dialogfeld Ressourcen wird geöffnet.
2. Wählen Sie Drawable aus, falls es 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 Sternbild wird dem Layout unter Ihrem Namen hinzugefügt. Da Sie eine vertikale LinearLayout haben, werden die Ansichten, die Sie hinzufügen, vertikal ausgerichtet.
   
   
5. Wechseln Sie zum Tab Text und sehen Sie sich den generierten ImageView-Code an. Die Breite ist auf match_parent festgelegt, sodass die Ansicht so breit wie das übergeordnete Element ist. Die Höhe ist auf wrap_content festgelegt, sodass die Ansicht so hoch wie ihr Inhalt ist. ImageView verweist auf die btn_star_big_on-Zeichnung.

<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 Sie die id der ImageView umbenennen möchten, klicken Sie mit der rechten Maustaste auf "@+id/imageView" und wählen Sie Refactor > Rename (Umgestalten > Umbenennen) aus.
7. Legen Sie im Dialogfeld Umbenennen den Wert id auf @+id/star_image fest. Klicken Sie auf Refaktorieren.
   
   
   

Tipp: Mit Refactor > Rename (Umgestalten > Umbenennen) werden alle Vorkommen eines Attribut- oder Variablennamens in Ihrem App-Projekt umbenannt.

8. Klicken Sie auf dem Tab Design im Komponentenbaum neben star_image auf das Warnsymbol . Die Warnung bezieht sich auf ein fehlendes contentDescription, das von Screenreadern verwendet wird, um Bilder für den Nutzer zu beschreiben.
9. Klicken Sie im Bereich Attribute neben dem Attribut contentDescription auf die drei Punkte .... Das Dialogfeld Ressourcen wird geöffnet.
10. Wählen Sie im Dialogfeld Ressourcen die Option Neue Ressource hinzufügen > Neuer Stringwert aus. Legen Sie für das Feld Ressourcenname den Wert yellow_star und für das Feld Ressourcenwert den Wert Yellow star fest. Klicken Sie auf OK.
11. Fügen Sie im Bereich Attribute dem yellow_star einen oberen Rand von 16dp (entspricht @dimen/layout_margin) hinzu, um das Sternbild vom Namen zu trennen.
12. Führen Sie Ihre App aus. Ihr Name und das Sternbild werden in der Benutzeroberfläche Ihrer App angezeigt.
    
    

Ein ScrollView ist eine Ansichtsgruppe, in der die darin enthaltene Ansichtshierarchie gescrollt werden kann. Eine Scrollansicht kann nur eine andere Ansicht oder Ansichtsgruppe als untergeordnetes Element enthalten. Die Kinderansicht ist in der Regel ein LinearLayout. Sie können einem LinearLayout weitere Ansichten hinzufügen.

Das folgende Bild zeigt ein Beispiel für ein ScrollView, das ein LinearLayout mit mehreren anderen Ansichten enthält.

In dieser Aufgabe fügen Sie ein ScrollView hinzu, mit dem der Nutzer eine Textansicht mit einer kurzen Biografie scrollen kann. Wenn Sie nur eine Ansicht scrollbar machen, können Sie die Ansicht direkt in ScrollView einfügen. Das ist auch in dieser Aufgabe der Fall.

Schritt 1: ScrollView mit einem TextView hinzufügen

1. Öffnen Sie die Datei activity_main.xml auf dem Tab Design.
2. Ziehen Sie eine Scrollansicht in das Layout, indem Sie sie in den Designeditor oder in den Komponentenbaum ziehen. Platziere die Scrollansicht unter dem Sternbild.
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>

Die Höhe und Breite des ScrollView-Elements entsprechen dem übergeordneten Element. Sobald die name_text-Textansicht und die star_image-Bildansicht genügend vertikalen Platz für die Anzeige ihrer Inhalte beansprucht haben, wird das ScrollView vom Android-System so angeordnet, dass es den restlichen verfügbaren Platz auf dem Bildschirm einnimmt.

4. Fügen Sie der ScrollView eine id hinzu und nennen Sie sie bio_scroll. Wenn Sie dem ScrollView ein id hinzufügen, erhält das Android-System einen Handle für die Ansicht, sodass die Scrollposition beibehalten wird, wenn der Nutzer das Gerät dreht.
5. Entfernen Sie in der ScrollView den LinearLayout-Code, da Ihre App nur eine scrollbare Ansicht hat, nämlich eine TextView.
6. Ziehen Sie ein TextView aus der Palette in den Komponentenbaum. Fügen Sie TextView unter 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 die drei Punkte ..., 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. Für die Textansicht wird jetzt der Stil NameStyle verwendet, den Sie in einer vorherigen Aufgabe erstellt haben.
   
   

Schritt 2: Biografie zum neuen TextView hinzufügen

1. Öffne strings.xml, erstelle eine String-Ressource mit dem Namen bio und füge einen langen Text über dich oder ein beliebiges anderes Thema ein.
   

Hinweis:

• Verwenden Sie \n, um einen Zeilenumbruch anzugeben.
• Wenn Sie ein Apostroph verwenden, müssen Sie es mit einem Backslash maskieren. Beispiel:
  "You mustn\'t forget the backslash."
• Verwenden Sie <b>...</b> für fett formatierten Text und <i>...</i> für kursiv formatierten Text. 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. Legen Sie in der Textansicht bio_text den Wert des Attributs text auf die String-Ressource bio fest, die Ihre Biografie enthält.
3. Um den bio_text-Text besser lesbar zu machen, fügen Sie zwischen den Zeilen Abstände ein. Verwenden Sie das Attribut lineSpacingMultiplier und weisen Sie ihm den Wert 1.2 zu.
   
   
   
   Im Design-Editor erstreckt sich der bio-Text bis zu den Seitenrändern des Bildschirms. Um dieses Problem zu beheben, können Sie dem Stamm-LinearLayout-Element die Attribute „left“ [links], „start“ [Start], „right“ [rechts] und „end“ [Ende] für den Innenabstand hinzufügen. Sie müssen kein unteres Padding hinzufügen, da Text, der bis zum unteren Rand reicht, dem Nutzer signalisiert, dass er gescrollt werden kann.
4. Fügen Sie dem Stamm-LinearLayout eine Start- und Endauffüllung von 16dp hinzu.
5. Wechseln Sie zum Tab Text, extrahieren Sie die Dimensionsressource und nennen Sie sie layout_padding.
   
   

Hinweis : Ab API-Level 17 sollten Sie für Padding und Margin „start“ und „end“ anstelle von „left“ und „right“ verwenden, um Ihre App für RTL-Sprachen wie Arabisch anzupassen.

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

Glückwunsch!

Sie haben eine vollständige App von Grund auf erstellt. Sieht gut aus!

Android Studio-Projekt: AboutMe

Hinweis:Alle Programmieraufgaben sind optional.

Fügen Sie in ScrollView ein ImageView über dem TextView hinzu. Wenn Sie die App ausführen, wird dieses Bild im Gegensatz zum Stern aus dem Blickfeld gescrollt, während der Text nach oben gescrollt wird.

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

• 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.
• Verwenden Sie ein ScrollView, wenn Sie Inhalte auf dem Bildschirm anzeigen müssen, z. B. langen Text oder eine Sammlung von Bildern. Eine Scrollansicht kann nur eine untergeordnete Ansicht enthalten. Wenn Sie mehr als eine Ansicht scrollen möchten, fügen Sie dem ScrollView ein ViewGroup wie ein LinearLayout hinzu und platzieren Sie die zu scrollenden Ansichten in diesem ViewGroup.
• Der Layout-Editor ist ein visueller Design-Editor in Android Studio. Mit dem Layout-Editor können Sie das Layout Ihrer App erstellen, indem Sie UI-Elemente in das Layout ziehen.
• Ein Stil ist eine Sammlung von Attributen, die das Erscheinungsbild einer Ansicht festlegen. Ein Stil kann beispielsweise Schriftfarbe, Schriftgröße, Hintergrundfarbe, Innenabstand und Rand festlegen.
• Sie können die gesamte Formatierung einer Ansicht in einem Stil extrahieren und zusammenfassen. Damit Ihre App ein einheitliches Erscheinungsbild hat, sollten Sie den Stil für andere Ansichten wiederverwenden.

Udacity-Kurs:

• Android-Apps mit Kotlin entwickeln

Android-Entwicklerdokumentation:

• Layouts
• ViewGroup
• View
• Lineares Layout
• ScrollView
• Verschiedene Pixeldichten unterstützen (dp)
• UI mit Layout-Editor erstellen
• Android Studio-Dokumentation
• Stile und Designs

In diesem Abschnitt werden mögliche Hausaufgaben für Schüler und Studenten aufgeführt, die dieses Codelab im Rahmen eines von einem Kursleiter geleiteten Kurses durcharbeiten. Es liegt in der Verantwortung des Kursleiters, Folgendes zu tun:

• Weisen Sie bei Bedarf Aufgaben zu.
• Teilen Sie den Schülern/Studenten mit, wie sie Hausaufgaben abgeben können.
• Benoten Sie die Hausaufgaben.

Lehrkräfte können diese Vorschläge nach Belieben nutzen und auch andere Hausaufgaben zuweisen, die sie für angemessen halten.

Wenn Sie dieses Codelab selbst durcharbeiten, können Sie mit diesen Hausaufgaben Ihr Wissen testen.

Beantworten Sie diese Fragen

Frage 1

Welches der folgenden Elemente ist eine Ansichtsgruppe?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Frage 2

Welche der folgenden Ansichtshierarchien ist ungültig?

▢ LinearLayout > TextView, TextView, ImageView

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

▢ TextView > TextView, ImageView, ScrollView

Frage 3

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

▢ Wahr

▢ Falsch

Frage 4

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

▢ Wahr

▢ Falsch

Frage 5

Welches UI-Element kann verwendet werden, um Bilder in Ihrer App anzuzeigen?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Nächste Lektion: 2.2: Nutzerinteraktivität hinzufügen

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