Einführung in Jetpack Compose

Jetpack Compose ist ein modernes UI-Toolkit, das kürzlich von Google eingeführt wurde und zum Erstellen nativer Android-UI verwendet wird. Es vereinfacht und beschleunigt die UI-Entwicklung mit weniger Code, Kotlin-APIs und leistungsstarken Tools.

Jetpack compose gibt uns die Möglichkeit, eine andere Benutzeroberfläche zu erstellen, die als Declarative Framework bezeichnet wird , und diese Transaktion nativ durchzuführen.

Sie hätten sehen können, dass die Codes, die mit Flutter und React Native geschrieben wurden, eine Benutzeroberfläche erstellten, und jetzt können Sie all diese Dinge mit Jetpack Compose tun.

Hinweis : Jetpack Compose wurde im März 2021 veröffentlicht. Sie benötigen Android Studio Artic Fox , um Compose zu verwenden , das mindestens SDK 21 unterstützt .

Warum sollten wir Jetpack Compose verwenden?

• Deklarativ: Es ist vollständig deklarativ, sodass Sie Ihre UI-Komponenten beschreiben können, indem Sie einige vordefinierte Funktionen aufrufen.
• Kompatibel: Es ist leicht mit den vorhandenen Ansichten in Android kompatibel.
• Entwicklungsgeschwindigkeit erhöhen: Bisher mussten Entwickler an der XML-Datei und der Kotlin-Datei arbeiten. Aber mit Hilfe von Jetpack Compose wird dies einfach und Entwickler müssen nur an den Kotlin-Dateien arbeiten, weshalb es Entwicklern hilft, die Entwicklungsgeschwindigkeit zu erhöhen.
• Prägnant und idiomatisch Kotlin: Jetpack Compose baute die Benutzeroberfläche mit den Vorteilen, die Kotlin bringt.
• Einfache Wartung: Da die Codebasis jeder Anwendung in einer einzigen Datei vorhanden ist. Es wird einfach, die Codebasis der Anwendung zu verwalten und zu handhaben.
• Geschrieben in Kotlin: Die mit jetpack compose geschriebene Anwendung verwendet zu 100 % die Programmiersprache Kotlin.

Mit der neuen Funktion, die mit Compose geliefert wird, können Sie die Ausgabe ohne Emulator sehen.

Erstellen Sie ein Projekt, indem Sie eine neue leere Compose-Aktivität auswählen und die Hauptstruktur von Jetpack Compose untersuchen.

Wenn wir Empty Compose Activity auswählen, wird die MainActivity-Klasse wie folgt angezeigt.

Als erstes fällt auf, dass Main Activity von ComponentActivity geerbt wurde , nicht von AppCompatActivity.

Review to gradle, mit Jetpack Compose werden Sie sehen, dass das Feld rechts wie unten hinzugefügt wurde.

Wenn Sie das Projekt als EmptyActivity öffnen, müssen Sie Abhängigkeiten wie unten hinzufügen.

Wir haben gesagt, dass Sie das Design ohne eingebaute Laufzeit sehen können.

Wenn wir die geteilte Ansicht wählen, können wir eine Vorschau der von uns geschriebenen Kotlin-Codes sehen.

@Preview-Anmerkung: Sie können Ihrem Code manuell Parameter hinzufügen, um die Art und Weise anzupassen, wie Android Studio Vorschauanmerkungen rendert.

Gleichzeitig möchten wir alle Bildschirme oder Elemente sehen, wir können Elemente unter der Anmerkung hinzufügen.

Zusammensetzbare Funktionen sind die grundlegenden Bausteine ​​einer mit Compose erstellten Anwendung.
Composable kann auf eine Funktion oder ein Lambda angewendet werden, um anzuzeigen, dass die Funktion/das Lambda als Teil einer Komposition verwendet werden kann, um eine Transformation von Anwendungsdaten in einen Baum oder eine Hierarchie zu beschreiben.

Der folgende Code macht das TextView-Objekt, das sich in XML befindet, als Composable.

Die Textklasse ist eine zusammensetzbare Klasse, die zu viele Parameter erhält.

Wenn wir eine normale Aktivität starten, geben wir innerhalb von setContentView ein Layout, aber jetzt verwenden wir zum Erstellen setContent .

In der Klasse setContent können Sie sehen, dass sie zusammensetzbare Parameter von uns haben möchte, die wie folgt geschrieben sind.

Die Begrüßung ist ein Komponieren. Wir können diese Komposition innerhalb von setContent angeben, wenn die App geöffnet wird.

Welche einfachen Funktionen haben wir in diesem Artikel vorerst gelernt?

• Zusammensetzbare Funktion: Zusammensetzbare Funktion wird im Code durch die @Composable-Annotation zum Funktionsnamen dargestellt. Mit dieser Funktion können Sie die Benutzeroberfläche Ihrer App programmgesteuert definieren, indem Sie ihre Form und Datenabhängigkeiten beschreiben, anstatt sich auf den Erstellungsprozess der Benutzeroberfläche zu konzentrieren.
• Vorschaufunktion: Der Name der Funktion selbst sagt uns, dass die Funktion verwendet wird, um die Vorschau der zusammensetzbaren Funktion zu generieren. Es wird verwendet, um eine Vorschau unserer zusammensetzbaren Funktionen in unserer IDE anzuzeigen, anstatt unser APK in einem Emulator oder einem virtuellen Gerät zu installieren.

Wenn Sie sich für SwitfUI in iOS interessieren, empfehle ich Ihnen, den Artikel von Pınar Koçak zu lesen.

Ressourcen