Hinzufügen von Widgets zu einem Android-Layout

Hinzufügen von Widgets zu einem Android-Layout

In der vorherigen Lektion haben Sie ein neues Projekt für ein Quiz-Layout erstellt. In dieser Lektion fangen Sie an, die Widgets hinzuzufügen.

 

Sie haben bereits eine Textansicht auf Ihrer Designoberfläche, die standardmäßige Hello World, die Sie beim Erstellen eines neuen Projekts erhalten. Klicken Sie darauf, um es auszuwählen. Drücken Sie nun die Löschtaste auf Ihrer Tastatur, um sie loszuwerden. Suchen Sie den Text VIew in der Palette und ziehen Sie einen neuen Text auf Ihr Layout.

Wir wollen jetzt zu einer Blaupausenansicht wechseln. Klicken Sie also auf das Blueprint-Symbol in der Symbolleiste, die mittlere von drei Symbolen im unteren Bild:

Design und Blueprint Symbole in der Symbolleiste

Verwenden Sie die Zoomwerkzeuge, um ein wenig heranzuzoomen, und Ihr Bildschirm sollte so aussehen wie dieser:

Werfen Sie einen Blick auf den Bereich Properties rechts neben dem Blueprint. Suchen Sie die Text-Eigenschaft und ändern Sie sie in Wie heißt diese Brücke? (Du wirst eine andere Art, Text hinzuzufügen, in einem späteren Tutorial sehen.)

  • Die Text-Eigenschaft des Android-Layouts
  • Drücken Sie die Eingabetaste auf Ihrer Tastatur, um die Blaupause zu aktualisieren:
  • Die Texteigenschaft einer TextView wurde geändert.

Werfen Sie einen Blick in die Design-Symbolleiste und suchen Sie das Symbol für Standard-Ränder. Klicken Sie auf die 8, um eine Dropdown-Liste anzuzeigen:

Ändern der Standardränder für eine Textansicht

Diese Werte legen die Ränder um die Kanten Ihrer App fest. Die Standardeinstellung 8 ist für uns in Ordnung. Aber wenn Sie Ihre Margen ändern müssen, ist dies der richtige Ort.

Was wir tun wollen, ist, die Textansicht am oberen Bildschirmrand und am linken und rechten Bildschirmrand zu befestigen. Dies geschieht mit Constraints.

Stellen Sie sicher, dass das Augensymbol in der Design-Symbolleiste nicht durchgestrichen ist. Wenn dies der Fall ist, bedeutet dies, dass Einschränkungen ausgeblendet sind. Klicken Sie mit dem Auge, um die Einschränkungen anzuzeigen:

Einschränkungen versteckt:

  • Das Symbol Einschränkungen ausblenden
  • Angezeigte Einschränkungen:
  • Das Symbol Show Constraints (Einschränkungen anzeigen)

Das Symbol neben den Einschränkungen heißt AutoConnect. Du willst, dass dieser ausgeschaltet wird, in diesem Tutorial. Klicken Sie darauf und Sie sehen eine Linie durch den auf dem Kopf stehenden Magneten:

Das AutoConnect-Symbol

AutoConnect versucht zu erraten, welche Art von Beschränkungen Sie wünschen. Dies ist für ein einfaches Design in Ordnung, kann aber in den Weg kommen. Deshalb haben wir es ausgeschaltet. Wir werden unsere Einschränkungen manuell hinzufügen.

Schauen Sie sich die Textansicht noch einmal an:

Die Kreise werden als Constraint Anker bezeichnet. Wenn Sie ein Control am oberen Bildschirmrand befestigen möchten, klicken Sie auf den mittleren Kreis. Halten Sie die linke Maustaste gedrückt und ziehen Sie sie nach oben:

Eine Einschränkung, die einer Textansicht hinzugefügt wird.

Lassen Sie die linke Maustaste los und Sie sehen einen Pfeil, der von der oberen Mitte der Textansicht bis zum oberen Rand des App-Bildschirms reicht. Dies ist eine Einschränkung. (Die 8 ist der von uns eingestellte Rand.) Egal, ob Ihre Anwendung im Hoch- oder Querformat ist, die Textansicht bleibt 8 Einheiten von oben.

Gleiches gilt für den linken und rechten Kreis der Textansicht: Klicken und ziehen Sie einen Pfeil nach links für den linken Kreis, und klicken Sie auf einen Pfeil und ziehen Sie ihn nach rechts. Ihr Bildschirm sieht dann so aus:

  • Horizontale Beschränkungen, die aus einer Textansicht hinzugefügt wurden.
  • Achten Sie auf die gezackten Linien. Dies zeigt an, dass Sie eine Einschränkung an ein Control gebunden haben.
  • Um die Einschränkung zu beseitigen, werfen Sie einen Blick in den Eigenschaftenbereich oben. Das wirst du sehen:
  • Einschränkungen, die im Eigenschaftenbereich von Android Studio angezeigt werden.

Halten Sie die Maus über einen der blauen Kreise in der Mitte. Du wirst sehen, dass ein X erscheint. Klicken Sie auf ein X, um diese Einschränkung zu löschen. Wenn im obigen Bild der blaue Kreis mit dem weißen x angeklickt wird, wird die Einschränkung vom linken Rand der Textansicht bis zum linken Rand des Bildschirms gelöscht.

Beachten Sie den Schieberegler unten, den mit 50 drin. Dies kann verwendet werden, um die Textansicht entlang der horizontalen Achse zu positionieren. (Ein Wert von 50 ist die mittlere Position.) Probieren Sie es aus. Halten Sie die linke Maustaste auf der 50. Halten Sie die linke Maustaste gedrückt und ziehen Sie nach rechts und links. Sehen Sie sich an, was mit Ihrer Textansicht im Blueprint passiert.

In der nächsten Lektion erfahren Sie, wie Sie eine ImageView hinzufügen und ein Bild in Android Studio importieren können.