Introduction à Jetpack Compose

Jetpack Compose est une boîte à outils d'interface utilisateur moderne récemment lancée par Google qui est utilisée pour créer une interface utilisateur Android native. Il simplifie et accélère le développement de l'interface utilisateur avec moins de code, des API Kotlin et des outils puissants.

Jetpack compose nous donne la possibilité de créer une interface utilisateur différente appelée Declarative Framework et d'effectuer cette transaction en natif.

Vous avez pu voir que les codes qui ont été écrits avec Flutter et React Native, ont créé une interface utilisateur, et maintenant vous pouvez faire tout cela avec Jetpack Compose.

Remarque : Jetpack Compose est sorti en mars 2021. Vous avez besoin d' Android Studio Artic Fox pour utiliser Compose qui fonctionne au minimum sdk 21 .

Pourquoi devrions-nous utiliser Jetpack Compose ?

• Déclaratif : il est entièrement déclaratif afin que vous puissiez décrire vos composants d'interface utilisateur en appelant certaines fonctions prédéfinies.
• Compatible : Il est facilement compatible avec les vues existantes présentes dans Android.
• Augmenter la vitesse de développement : Auparavant, les développeurs devaient travailler sur le fichier XML et le fichier Kotlin. Mais avec l'aide de jetpack, cela devient facile et les développeurs n'ont qu'à travailler sur les fichiers Kotlin, c'est pourquoi cela aidera les développeurs à augmenter la vitesse de développement.
• Kotlin concis et idiomatique : Jetpack Compose a construit l'interface utilisateur avec les avantages apportés par Kotlin.
• Facile à entretenir : Comme la base de code de toute application est présente dans un seul fichier. Il devient facile de gérer et de manipuler la base de code de l'application.
• Écrit en Kotlin : L'application écrite à l'aide de jetpack compose utilise 100 % du langage de programmation Kotlin.

Avec la nouvelle fonctionnalité fournie avec Compose, vous pouvez voir la sortie sans émulateur.

Créez un projet en choisissant une nouvelle activité de composition vide et examinez la structure principale de Jetpack Compose.

Lorsque nous choisissons l'activité de composition vide, la classe MainActivity viendra comme ci-dessous.

La première chose que vous remarquez est que l'activité principale a été héritée de ComponentActivity , et non d'AppCompatActivity.

Passez en revue pour passer au niveau supérieur, avec Jetpack Compose, vous verrez que le champ a été ajouté comme ci-dessous.

Si vous ouvrez le projet en tant que EmptyActivity, vous devez ajouter des dépendances comme ci-dessous.

Nous avons dit que vous pouvez voir la conception sans build in runtime.

Lorsque nous choisissons la vue fractionnée , nous pouvons voir un aperçu des codes Kotlin que nous écrivons.

Annotation @Preview : vous pouvez ajouter des paramètres manuellement dans votre code pour personnaliser la façon dont Android Studio rend l'annotation d'aperçu.

En même temps, nous voulons voir tout l'écran ou l'élément, nous pouvons ajouter des éléments sous l'annotation.

Les fonctions composables sont les blocs de construction fondamentaux d'une application construite avec Compose.
Composable peut être appliqué à une fonction ou à un lambda pour indiquer que la fonction/lambda peut être utilisée dans le cadre d'une composition pour décrire une transformation des données d'application en un arbre ou une hiérarchie.

Le code ci-dessous rend l'objet TextView qui est en xml, en tant que Composable.

La classe Text est une classe composable qui reçoit trop de paramètres.

Si nous commençons une activité normale, nous donnons une mise en page à l'intérieur de setContentView mais maintenant pour composer nous utilisons setContent .

Dans la classe setContent, vous pouvez voir qu'il nous demande des paramètres composables écrits comme ci-dessous.

La salutation est une composition. Nous pouvons donner cette composition à l'intérieur de setContent lorsque l'application est ouverte.

Quelles fonctions simples avons-nous apprises dans cet article pour l'instant ?

• Fonction composable : la fonction composable est représentée dans le code en utilisant l'annotation @Composable pour le nom de la fonction. Cette fonction vous permettra de définir l'interface utilisateur de votre application par programmation en décrivant sa forme et ses dépendances de données plutôt que de vous concentrer sur le processus de construction de l'interface utilisateur.
• Fonction de prévisualisation : le nom de la fonction elle-même nous indique que la fonction est utilisée pour générer l'aperçu de la fonction composable. Il est utilisé pour afficher un aperçu de nos fonctions composables au sein de notre IDE plutôt que d'installer notre APK dans un émulateur ou un appareil virtuel.

Si vous êtes intéressé par SwitfUI dans iOS, je vous recommande de consulter l'article de Pınar Koçak .

Ressources