Tutoriel Jetpack Compose pour les débutants – Étapes faciles à suivre

Rejoignez-nous pour explorer Jetpack Compose, une boîte à outils de pointe qui simplifie le processus de création d’interfaces utilisateur natives.

Ce didacticiel propose un guide complet sur l’utilisation de diverses fonctionnalités de Jetpack Compose telles que Texte, Champ de texte, Aperçu, Colonne, Rangée, Bouton, Carte, Boîte de dialogue Alerteet Conception matérielle éléments. Commençons par créer un projet Jetpack Compose et examinons sans tarder des exemples pratiques. Rejoignez-nous pour maîtriser Jetpack Compose pour Android à travers des exemples concrets.

Note gentille: Pour tirer parti Composer Jetpackil est impératif d’avoir la dernière version Canary de Android Studio 4.2 installé. Visiter le  » https://developer.android.com/studio/preview «  Page d’aperçu d’Android Studio pour acquérir la version Canary la plus récente et procéder à la création d’une activité de composition vide.

Fonction composable

Dans Jetpack Compose, l’interface utilisateur de votre application est définie par programme à l’aide des fonctions Composable. Cela élimine le besoin de fichiers de mise en page XML. Pour créer une fonction composable, appliquez simplement le @Composable annotation au nom de la fonction. La syntaxe de base d’une fonction Composable est la suivante :

Maintenant que vous comprenez le concept des fonctions composables et que vous avez appris à les créer avec le @Composable annotation, passons à l’exploration d’un exemple impliquant le composant Text.

Présentation d’un texte de base (affichage d’un texte simple)

Dans ce didacticiel, nous verrons comment présenter du texte brut à l’aide de Jetpack Compose.

Pour afficher du texte, nous utilisons Text Composable et fournissons la chaîne souhaitée comme argument. Par exemple,

Dans ce contexte, TexteSimple représente une fonction Composable où nous utilisons le composant Texte et fournissons afficherTexte comme argument.

Maintenant, vous pouvez appeler la fonction SimpleText dans le définirContenu bloc de l’activité surCréer méthode.

Ici, nous utilisons un Colonne qui est utilisé pour afficher du contenu verticalement et à l’intérieur de cette colonne, nous appelons le Texte simple Fonction composable.

Appliquer des styles à un texte

La personnalisation des éléments de texte avec différents styles, comme l’ajustement de la taille de la police et la modification des couleurs, est simple.

Maintenant, définissons une fonction appelée Définir le style de texte pour implémenter ces modifications de style :

Dans la fonction décrite ci-dessus, afficherTexte indique le contenu du texte à afficher, style fait référence au style souhaité pour le texte et maxLines détermine le nombre maximum de lignes autorisées pour le texte. Si le texte dépasse cette limite, des points de suspension (…) seront affichés.

Nous appellerons cette fonction en passant ces paramètres. Voyons quelques-uns d’entre eux :

• Pour définir le poids de la police, transmettez le style de texte comme :

De même, vous avez la possibilité d’ajuster la taille de la police, la couleur du texte, la famille de polices, le texte souligné, etc.

Collecte des entrées des utilisateurs via TextField

Un peu comme Éditer le texteCompose fournit Champ de texte et ChampTexte de base composants pour la gestion des entrées. Notamment, ChampTexte de base est actuellement expérimental et peut changer, y compris une suppression potentielle ou une inclusion permanente. Pour utiliser BaseTextField, le @ExperimentalFoundationApi l’annotation doit être appliquée.

L’exemple suivant présente une implémentation de base de ChampTexte de base:

Un BaseTextField est hébergé dans un conteneur Surface au sein de la fonction décrite précédemment. La fonction comprend également un rappel nommé surChangementValeurqui se déclenche chaque fois qu’il y a un changement dans l’entrée du ChampTexte de base. Le texte mis à jour est passé en paramètre via ce rappel.

Voici un exemple démontrant l’utilisation de ChampTexte de base. Material Design comprend un Composable appelé Champ de texte pour Éditer le texte Fonctionnalité. Une implémentation basique de Champ de texte est démontré ci-dessous :

Champ de texte fonctionne de la même manière que ChampTexte de base. Une chose supplémentaire que vous avez ici Champ de texte est une étiquette. Lorsqu’un Champ de texte est vide, une étiquette est le texte qui apparaît dans le Champ de texte.

En lui fournissant différents arguments, nous pouvons modifier à la fois ce ChampTexte de base et le Champ de texte. Par exemple,

• Pour afficher uniquement le clavier numérique :

• Pour ajouter un espace réservé dans TextField (sera affiché lorsque TextField est vide et focalisé)

De la même manière, nous pouvons préciser erreurCouleur, Couleur de l’arrière plan, État d’intraction, couleuractive, inactiveColor, ajouter des icôneset afficher les messages d’erreur dans Texte déposé.

Vous pouvez les expérimenter et afficher les résultats directement dans Android Studio. Vous avez bien entendu. Tout élément de l’interface utilisateur peut être prévisualisé directement dans Android Studio. Examinons comment.

Aperçu dans Android Studio

Une fonctionnalité fantastique d’Android Studio est la possibilité de prévisualiser dynamiquement les composants de votre interface utilisateur dans le studio. Ainsi, vous pouvez facilement prévisualiser les composants de l’interface utilisateur dans Android Studio en créant une fonction Composable et en utilisant l’annotation @Preview chaque fois que vous souhaitez les tester.

Voici une illustration de la même chose :

Vous pouvez maintenant examiner un aperçu de la fonction Composable susmentionnée dans l’onglet d’aperçu sur le côté droit du Studio.

Vous pouvez utiliser autant d’aperçus alternatifs de largeur et de hauteur que vous le souhaitez. Android Studio vous amènera à la ligne où cette interface utilisateur est créée si vous cliquez sur l’un des éléments de l’interface utilisateur dans l’aperçu.

REMARQUE : aucun paramètre ne peut lui être transmis à une fonction Preview Composable.

Colonne

UN colonne est une disposition modulaire qui dispose tous ses enfants dans une rangée verticale les uns après les autres. Avec son orientation verticale, il est comparable à Disposition linéaire.

Une illustration d’une colonne est la suivante :

Boîte

Un modèle composable appelé «Boîte » est utilisé pour organiser les enfants par rapport à ses bords. Au début, Stack était utilisé plutôt que Box. Maintenant, cependant, Box a été introduit et Stack est obsolète.

Les enfants sont hébergés chez le parent, comme le terme l’indique. Les enfants à l’intérieur d’une boîte sont dessinés dans l’ordre désigné et, en fonction de l’alignement, si les enfants sont plus petits que le parent, ils seront automatiquement à l’intérieur de la boîte.

Voici une illustration d’une boîte :

Bouton

Lorsqu’un bouton est cliqué, il est destiné à exécuter une fonction spécifique.

Une illustration d’un bouton de base est la suivante :

Dans ce cas, le texte est appliqué au bouton à l’aide de Text et l’événement de clic du bouton est entendu à l’aide du sur clic rappeler.

Vous pouvez entièrement configurer un Button en lui fournissant différents paramètres. Parmi eux figurent :

• Faire des coins arrondis Bouton :

• Créez un bouton avec des bordures :

De la même manière, vous pouvez ajouter une icône, changer la couleur d’un bouton, désactiver un bouton, décrire un bouton, créer un IcôneBoutoncréer un FABet ainsi de suite.

Carte

Une carte est une mise en page composable utilisée pour créer un Vue Carte. Ce qui suit en est un exemple :

Image

Pour afficher une image, on peut utiliser Image composable.

Vous pouvez également créer une image aux coins arrondis en utilisant le code ci-dessous :

Boîte de dialogue d’alerte

Comme le nom l’indique, Boîte de dialogue Alerte est utilisé pour présenter à l’utilisateur des messages vitaux sous la forme d’un dialogue pouvant inclure des actions.

Un AlertDialog a un titre, un texte, un bouton de confirmation et un bouton de rejet.

Matériau BottomNavigation

Navigation inférieure est une fonctionnalité qui place certaines des activités les plus cruciales de l’application en bas de l’écran pour plus de commodité. Nous devons utiliser le Élément de navigation inférieur composable afin d’ajouter un élément à une BottomNavigation.

Utiliser toujoursShowLabels = faux dans Élément de navigation inférieur utiliser Navigation inférieure sans étiquettes.

Barre de progression des matériaux

Une barre de progression est utilisée pour afficher les progrès réalisés actuellement dans l’application. Par exemple, charger des données depuis le serveur ou télécharger la progression. Une barre de progression linéaire ou circulaire peut être créée. Une illustration d’une barre de progression circulaire est la suivante :

Dans le même esprit, le Indicateur de progrès linéaire est également applicable.

Case à cocher Matériau

UN case à cocher est utilisé lorsque nous avons 2 options et que l’utilisateur peut sélectionner ou désélectionner les options.

Snack-bar matériel

Barre de céréales sont utilisés pour afficher des informations en bas de l’écran, couvrant tous les composants de l’interface utilisateur.

Ceci conclut le didacticiel. Vous pouvez utiliser Jetpack Compose pour essayer beaucoup plus d’exemples.

Garder Apprentissage! Garder Codage!