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.

Verlinkung mit anderen Webseiten

Die Verknüpfung im HTML-Code erfolgt mit dem Anker-Tag, dem -Tag. Dem Buchstaben „A“ im Tag folgt dann ein Attribut. Bei einem Link zu einer anderen Webseite wird das „A“ von „HREF“ gefolgt. Um ein Lesezeichen auf der gleichen Seite zu setzen, folgt auf das „A“ das „NAME“, das Sie später sehen werden.

Werfen Sie einen Blick auf dieses Beispiel, das einen Link zur beliebten Suchmaschine Google darstellt:

Google Suchmaschine

Beachten Sie, wo sich alle Winkel (< >) im Link befinden. Nach dem ersten haben wir den „A“-Teil des Tags. Dann haben wir den HREF-Teil, was einen Link zu einer anderen Webseite bedeutet. Danach kommt ein Gleichheitszeichen (=). Nach dem Gleichheitszeichen kommt die Adresse der Webseite selbst. Die Adresse ist Groß-/Kleinschreibung beachten, wenn also ein Großbuchstabe in der Adresse enthalten ist, vergewissern Sie sich, dass sie angegeben ist. Diese Adresse www.google.com unterscheidet sich von dieser Adresse www.gOOgle.com.

Nach der Adresse kommt die rechte spitze Klammer ( >). Als nächstes kommt der Text, den die Leute sehen, der Text, auf den sie klicken sollen. Um einen Ankerlink zu schließen, verwenden Sie den Endanker-Tag. Was auch immer das ist:

Aber lassen Sie uns etwas praktische Arbeit erledigen

Öffnen Sie Ihre Vorlagen-Textdatei. Klicken Sie im Menü im Notepad (oder einem anderen Texteditor, den Sie verwenden) auf Datei > Speichern unter. Wenn das Dialogfeld Speichern unter erscheint, navigieren Sie zu Ihrem HTML-Ordner:

Ordnerstruktur der Website

Also werden wir die neue Webseite außerhalb des Seitenordners speichern.

Geben Sie im Feld Dateiname index.html ein. Stellen Sie sicher, dass im Bereich Save As Type alle Dateien angezeigt werden, wenn Sie Windows verwenden. Bevor Sie auf die Schaltfläche Speichern klicken, sollte Ihr Explorer-Fenster so aussehen:

Erstellen einer index.html-Seite

Wenn Sie auf die Schaltfläche Speichern klicken, sollten Sie dann eine Webseite mit dem Namen index.html im HTML-Ordner haben:

Was wir tun werden, ist, einen Hyperlink auf unserer Indexseite zu platzieren. Wenn auf diesen Hyperlink geklickt wird, weisen wir den Browser an, eine Seite namens about.html zu laden. Wir werden diese neue Übersichtsseite in unserem Seitenordner speichern.

Verwenden Sie also Ihre Vorlagen-Textdatei, um eine neue Webseite zu erstellen. Wenn Sie die Seite speichern, doppelklicken Sie auf den Seitenordner, um ihn zu verschieben. Geben Sie im Feld Dateiname about.html ein. Dann speichere deine Seite:

Erstellung einer Über uns Webseite

So haben wir eine Webseite im HTML-Ordner und eine Webseite im Seitenordner. Wir müssen sie jetzt miteinander verbinden.

  • Öffnen Sie Ihren Code für die index.html-Seite. Fügen Sie die folgende Zeile zwischen die beiden BODY-Tags ein:
  • Über diese Seite
  • Dein Code sollte so aussehen (wir haben einen TITEL hinzugefügt):
  • HTML-Code zur Erstellung eines Hyperlinks

Speichern Sie Ihre Arbeit und laden Sie die Seite in Ihren Browser. Du solltest das sehen:

Ein HTML-Hyperlink auf der Indexseite

Und das ist ein Hyperlink! Beachten Sie, dass das Einzige, was auf der Seite für den Besucher sichtbar ist, der Text „Über diese Seite“ ist. Der von uns geschriebene Code verwandelt ihn vom normalen Text in einen Link, auf den man klicken kann. Der Code selbst war folgender:

Über diese Seite

Um also Text in einen Link zu verwandeln, beginnen Sie mit einer spitzen Klammer gefolgt von dem Buchstaben A. Nach einem Leerzeichen geben Sie HREF ein. Als nächstes kommt ein Gleichheitszeichen. Die Seite, auf die Sie verlinken möchten, steht zwischen Anführungszeichen. Aber beachten Sie, dass wir mit dem Ordnernamen begonnen haben: pages/about.html. Darin steht: „Suchen Sie nach einer Seite namens about.html. Diese Seite befindet sich im Seitenordner“.

Geben Sie eine rechtwinklige Winkelhalterung ein, um den ersten Teil des Linkcodes zu beenden. Der Text, den die Leute sehen sollen, kommt als nächstes „Über diese Seite“. Um das Ganze abzuschließen, benötigen Sie das schließende Hyperlink-Tag : .

Wenn Sie auf Ihren Link klicken, sollten Sie im Browser eine leere Seitenladung finden. Wenn Sie sich die Adressleiste ansehen, sollten Sie sehen, dass am Ende über.html steht. Du hast erfolgreich auf eine neue Seite verlinkt!

Um zur Indexseite zurückzukehren, benötigen Sie einen weiteren Link.

Öffnen Sie Ihren Code für die Seite about.html. Für die Über-Seite müssen wir das richtige HREF erstellen. Wir können das nicht machen:

Zu der Startseite gehen

Das obige HREF zeigt auf eine Indexseite im Ordner pages. Aber unsere Indexseite befindet sich nicht in diesem Ordner. Es befindet sich im HTML-Ordner, der ein Ordner ist, der von Seiten nach oben zeigt. Genau wie bei Bildern können wir zwei Punkte und einen Schrägstrich verwenden:

Zwei Punkte und ein Schrägstrich bedeuten „Einen Ordner nach oben gehen“.