[JAVA] Einführung in Kotlin für iOS-Entwickler ⑤-Practical XML

Lass es uns endlich schreiben

Deshalb ist es eine praktische Ausgabe. Ich werde dieses und das nächste Mal eine App machen. Jeder liebt "Taschenrechner".

Mach zuerst ein Projekt

Beginnen wir mit der Erstellung eines Projekts, das auch als grobe Überprüfung dient.

Starten Sie auf jeden Fall Android Studio.

Klicken Sie dann auf Neues AndroidStudio-Projekt starten.

Der Projektname lautet Calculator.

Und wenn das Projekt abgeschlossen ist, Der Bildschirm sieht so aus.

Diesmal über XML

Öffnen Sie also zuerst activity_main.xml. Wenn es sich jedoch um eine normale Einstellung handelt, sollte sie unmittelbar nach dem Erstellen des Projekts geöffnet sein. Wechseln Sie einfach die Registerkarte. So was. Wenn Sie einen Fehler machen und activity_main.xml nicht geöffnet oder geschlossen ist, suchen Sie in der linken Navigationsleiste nach activity_main.xml. Wenn die Navigationsleiste auf "Android" eingestellt ist, sollte sie sich in App> res> layout> befinden.

Haben Sie die Datei activity_main.xml übrigens erfolgreich geöffnet? Wenn Sie es öffnen, sollte ein Bildschirm wie dieser angezeigt werden. Dann werde ich eine Erklärung hinzufügen, während ich es tatsächlich mache.

Das erste Dämonentor "Layouts"

Das erste, worauf Sie achten sollten, ist der Ort "Component Tree". Ich denke, dass es in der Standardeinstellung unten links im Hauptbildschirm angezeigt wird. Hier können Sie sehen, wie die Struktur eines Teils auf dem aktuellen Bildschirm ist. Im Ausgangszustand gibt es nur eine Textansicht mit "Hallo Welt!", Die im Einschränkungslayout geschrieben ist. Für diejenigen, die iOS-Apps mit Xcode erstellt haben, ist dies möglicherweise "Layout?". Wenn Sie in diesem Layout nach etwas Ähnlichem suchen, Xcode, ist "StackView" das nächstgelegene. Ich meine, "Lineares Layout" entspricht dem. Ab dem 15. März 2017 scheint sich die Richtlinie von Google auf das Einschränkungslayout zu konzentrieren. Dies scheint auf die gleiche Weise wie das sogenannte AutoLayout verwendet zu werden, aber es gibt noch viele unbekannte Teile. Dieses Mal werde ich das mir vertraute LinearLayout verwenden.

Verwendung von LinearLayout

Nachdem die Standard-XML-Datei ConstraintLayout lautet, müssen Sie sie in LinearLayout umschreiben. Sie können das XML direkt umschreiben, diesmal jedoch für Anfänger in der Android-Entwicklung. Lassen Sie uns also die komplizierte Geschichte überspringen und die Datei activity_main.xml einmal löschen und neu erstellen. Klicken Sie in der Navigationsleiste mit der rechten Maustaste auf activity_main.xml und wählen Sie Freigeben. Klicken Sie nach dem Löschen mit der rechten Maustaste auf denselben Speicherort> Neu> Layout-Resouce-Datei. Ein Bildschirm wie dieser wird geöffnet. Geben Sie daher "Activty_main.xml" in den Dateinamen ein. Überprüfen Sie als Nächstes, ob das Root-Element darunter "Lineares Layout" ist (wenn es anders ist, geben Sie es ein. Da es eine Vorschlagsfunktion gibt, geben Sie "Li" ein und es wird als Kandidat angezeigt). Dann können Sie auf OK klicken.

Ich denke, Sie können sich vorstellen, wie Sie StackView von Xcode so verwenden, wie es ist. Wenn Teile in das LinearLayout geworfen werden, werden sie grundsätzlich in gleichen Intervallen in der eingestellten Richtung (horizontal oder vertikal) angeordnet. Sie können das LinearLayout in das LinearLayout einfügen oder die Größe mithilfe des später beschriebenen "Gewichts" anpassen.

Versuchen Sie, die Teile zu setzen

Lassen Sie uns nun zunächst eine Textansicht in das LinearLayout einfügen, das das Stammelement ist. (TextView entspricht UILabel in Xcode) Über dem Komponentenbaum, den wir zuvor gesehen haben, befindet sich eine Palette. Wenn Sie dort Widget auswählen, wird TextView oben angezeigt. Verwenden Sie diese Textansicht als Taschenrechneranzeige. Ich möchte einige Schaltflächen unten platzieren, aber hier fügen wir zuerst LinearLayout (horizontal) ein. Und ordnen wir 4 Schaltflächen im hinzugefügten LinearLayout an. Sah es so aus? Dieses Mal beträgt die Anzahl der Tasten 16 von 0 bis 9 (Zahlen) + 4 (Symbole der vier Regeln) + 1 (Löschtaste) + 1 (= Tasten). Ordnen wir also vorerst 4 an.

ID-Erstellung

Als nächstes stellen Sie jedes Teil ein. Wie auch immer, ich kann nicht sprechen, wenn ich nicht die ID des Teils entscheide. Unter Android müssen Sie die "Steckdosenverbindung" selbst in Xcode schreiben. Dazu wird die ID des Teils benötigt, die durch Benennung in der XML-Datei als Ressource behandelt werden kann. Die ID wird nur für Teile benötigt, die als App als Reaktion auf Benutzervorgänge eine Aktion ausführen. Insbesondere ist die ID selbst unter Android nicht erforderlich, ebenso wie ein UILabel, das nur bestimmte Zeichen in Xcode anzeigt (z. B. den Artikelnamen), nicht an eine Steckdose angeschlossen werden muss. (* Genau genommen wird die ID zugewiesen, wenn das Teil platziert wird. Da es nicht erforderlich ist, es im Code zu verwenden, habe ich "Es wird nicht benötigt" geschrieben.)

Außerdem muss die ID während des gesamten Projekts eindeutig sein. Die Leute neigen dazu zu glauben, dass dieselbe ID kein Problem darstellt, da die Bildschirme unterschiedlich sind, aber das ist bei Großhändlern nicht der Fall. (Zu einem anderen Zeitpunkt werde ich sehen, warum das so ist) Lassen Sie uns nun die ID auf dem Bildschirm festlegen. Wählen Sie die soeben platzierte Textansicht aus dem Inhaltsbaum aus. Auf der rechten Seite des Bildschirms befindet sich ein Bildschirm namens Eigenschaften. (Wenn nicht, denke ich, dass es gefaltet ist, schauen Sie also vorsichtig zum rechten Rand des Bildschirms.) Schreiben Sie die "Textansicht" neu, die standardmäßig in das Feld "ID" oben auf dieser Seite eingegeben wird. Setzen wir es zunächst auf "displayTextView". Dann ändert sich die Anzeige von TextView von ComponentsTree unten links ein wenig. Wenn der Name der Textansicht mit der zuvor eingegebenen ID übereinstimmt, sind Sie erfolgreich. Wiederholen Sie denselben Vorgang und fügen Sie den vier zuvor platzierten Schaltflächen IDs hinzu. button -> no7Button button2 -> no8Button button3 -> no9Button button4 -> divisionButton Schreiben Sie wie folgt um.

Einstellungen für Layoutelemente

Als nächstes legen Sie das Layoutelement fest. Die Mindesteinstellungen, die Sie vornehmen müssen, sind layout_width und layout_height.

Achten wir nach wie vor auf die Eigenschaften auf der rechten Seite, wenn displayTextView ausgewählt ist. Wenn Sie über die Bedeutung von beiden nachdenken, können Sie sie verstehen, weil sie "mit der übergeordneten Ansicht übereinstimmt" und "Ihren eigenen Inhalt abdeckt". Wenn Sie jedoch erst darüber nachdenken, wenn Sie sich daran gewöhnt haben, "Welche?" Es wird sein. Setzen wir jetzt layout_width auf macth_parent und geben "40dp" direkt in layout_height ein. dp und sp Nun, ich habe Wörter eingeführt, mit denen ich nicht vertraut bin. Es ist "dp". Es ist wie: "Nun, es sieht aus wie eine Einheit?" Es ist genau das, was das Gerät anzeigt. Es scheint, dass dp "dichteunabhängige Pixel" bedeutet, und es ist ein Gerät, das so entwickelt wurde, dass es einheitlich angezeigt wird, auch wenn das Modell auf Android mit verschiedenen Bildschirmauflösungen für jedes Terminal unterschiedlich ist. ist. Basic dp wird verwendet, um die Größe und den Rand von Bildschirmteilen anzugeben. Es wird nicht immer empfohlen, aber es wird empfohlen, ein Vielfaches von 4 zu sein. Dies ist die Beziehung des Verhältnisses von dpi, das eine Allzweckdichte ist. Der Grund ist, dass ldpi das 0,75-fache von mdpi beträgt.

Daher wird sp oft als Set mit dp bezeichnet. Wenn Sie denken, dass es sich um eine Schriftgröße von dp handelt, gibt es fast kein Problem. Daher ist es in Ordnung, es mit dem Bewusstsein "sp bei der Registrierung der Zeichengröße, dp sonst" zu verwenden.

Über das Gewicht

Lass uns so weitermachen. Derzeit sind die TextView-Einstellungen fast vollständig. Als nächstes ist die Anordnung der Tasten, Es ist eine seltsame Anordnung. Hoffentlich hat es die gleiche Größe und ist ordentlich aufgereiht. In einem solchen Fall wird layout_weight verwendet, bei dem es sich um ein Layouteinstellungselement handelt. Es ist wie "Gewicht" - "Wichtigkeit in der Reihenfolge der Teile". Je kleiner diese Zahl ist, desto wichtiger ist sie -> desto mehr belegt sie im LinearLayout. Diesmal ist die Wichtigkeit fast gleich, also richten wir sie alle auf "1" aus. Als ich versuchte, es sofort zu finden, wählte ich "no7Button" und sah mir die Eigenschaften an ... Nichts. Es gibt kein Element für layout_weight, beeilen Sie sich nicht. Unten befindet sich ein Link mit der Aufschrift "Alle Eigenschaften anzeigen". Dann wird oben rechts heimlich eine Markierung mit einem ähnlichen Pfeil angebracht, der sich nach links und rechts erstreckt.

Tatsächlich gibt es so viele Eigenschaftselemente, dass es schwierig war, sie zu finden. Daher besteht der Stil darin, nur einige der hauptsächlich verwendeten Elemente anzuzeigen. Anschließend können Sie mit den Schaltflächen unten und oben rechts zur Anzeige aller Eigenschaften wechseln. Wenn Sie sofort wechseln, sieht es so aus Es gab also "layout_weight", das das achte von oben war (Wenn Sie nicht hier waren, scrollen Sie, um das Element "l" zu finden, oder verwenden Sie die "Suchtaste" neben der "Umschalttaste" oben, um einzugrenzen Lassen Sie es uns einschließen.) Nachdem Sie das Gewicht von "no7Button" auf 1 gesetzt haben, setzen Sie das Gewicht auch für andere Tasten auf 1. Dann wird es so aussehen. (Wenn nicht, überprüfen Sie die layout_width und layout_height jeder Schaltfläche. Insbesondere wenn nur eine größere Schaltfläche vorhanden ist, ist die layout_width häufig match_parent.)

• Außerdem habe ich die Einstellung layout_height von LinearLayout heimlich auf 40dp geändert.

Ich werde die Teile auf diese Weise nacheinander ausrichten.

Der Rest der Arbeit ist ein großer Schnitt. Setzen Sie einfach das LinearLayout ein und richten Sie 4 Schaltflächen darin aus und wiederholen Sie 3 weitere Male. Es ist in Ordnung, wenn es so aussieht. Wählen Sie anschließend in den Eigenschaften der einzelnen Schaltflächen das Element Text aus und geben Sie den zu vervollständigenden Schaltflächennamen ein.

Sehen wir uns den fertigen Bildschirm an

Nachdem wir dies getan haben, wollen wir sehen, was mit dem Emulator passiert. Die Schaltfläche "Ausführen" entspricht der grünen "Wiedergabetaste" in der Symbolleiste oben auf dem Bildschirm. Drücken Sie diesen Kerl. Dann öffnet sich ein solches Fenster. Dieses Mal gehen wir davon aus, dass es das erste Mal für uns ist, also werden wir von nun an einen Emulator erstellen. Klicken Sie unten links auf "Neues virtuelles Gerät erstellen". Machen wir es vorerst mit Nexus 5x, da es ein Grundmodell ist. Es ist eine gute Idee zu überprüfen, welche anderen Modelle in Ihrer Freizeit emuliert werden können. Sie werden dann gefragt, welche Android-Version Sie auf diesem emulierten Gerät ausführen möchten. Derzeit ist der neueste Nougat in Ordnung. (Da ich es hier bereits heruntergeladen habe, kann ich Nougat sofort auswählen, aber wenn es in einem sauberen Zustand ist, muss ich zuerst Android herunterladen) Nehmen Sie zum Schluss detaillierte Einstellungen vor und Sie sind fertig, aber es ist in Ordnung, wenn Sie es ignorieren. Dann Das soeben erstellte Nexus 5x wurde dem verfügbaren virtuellen Gerät hinzugefügt. Drücken Sie nun OK, um den Emulator zu starten. Wenn Sie es in diesem Zustand erneut ausführen, wird das aktuell erstellte Projekt auf dem Emulator ausgeführt.

Der Bildschirm ist jetzt vollständig. Es passiert noch nichts, wenn ich auf die Schaltfläche tippe. Es ist natürlich. Lassen Sie uns zum Schluss das nächste Mal Kotlin schreiben, um den Rechner zu vervollständigen.

Bonus

Haben Sie bemerkt, dass sich unter dem Komponentenbaum die Registerkarten "Design" und "Text" befinden? Wenn Sie dies wechseln

Es wird zu einem Editor, der XML direkt so schreibt. Wenn Sie Erfahrung mit XML haben, kann es schneller sein, es direkt hier zu bearbeiten. Da es eine große Sache ist, werde ich dieses XML verfügbar machen. Als Referenz.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/displayTextView"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="TextView" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no7Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="７" />

        <Button
            android:id="@+id/no8Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="８" />

        <Button
            android:id="@+id/no9Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="９" />

        <Button
            android:id="@+id/divisionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="÷" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no4Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="６" />

        <Button
            android:id="@+id/no5Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="５" />

        <Button
            android:id="@+id/no6Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="４" />

        <Button
            android:id="@+id/multiplicationButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="×" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no1Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="１" />

        <Button
            android:id="@+id/no2Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="２" />

        <Button
            android:id="@+id/no3Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="３" />

        <Button
            android:id="@+id/subtractButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="- -" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no0Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="０" />

        <Button
            android:id="@+id/clearButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="C" />

        <Button
            android:id="@+id/resultButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="＝" />

        <Button
            android:id="@+id/additionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="＋" />
    </LinearLayout>

</LinearLayout>

Bitte fügen Sie auch andere Artikel bei

Einführung in Kotlin für iOS-Entwickler ①-Umgebungskonstruktion Einführung in kotlin für iOS-Entwickler (2) -Projekterstellung Einführung in Kotlin für iOS-Entwickler (-About gradle Einführung in Kotlin für iOS-Entwickler ④-Type Einführung in Kotlin für iOS-Entwickler ⑤-Practical XML [Einführung in Kotlin für iOS-Entwickler creation-Kotlin-Erstellung] (http://qiita.com/parappa1002/items/9f898feb4f83e672b384)