Créer une application simple avec des composables textuels

1. Avant de commencer

Dans cet atelier de programmation, vous allez utiliser Jetpack Compose pour créer une application Android simple qui affiche un message d'anniversaire à l'écran.

Conditions préalables

• Savoir créer une application dans Android Studio
• Savoir exécuter une application sur un émulateur ou sur votre appareil Android

Points abordés

• Écrire des fonctions composables telles que Text, Column et Row
• Afficher le texte de votre application dans une mise en page
• Mettre en forme le texte (par exemple, modifier la taille)

Objectifs de l'atelier

• Une application Android affichant un message d'anniversaire au format texte. Le résultat ressemble à la capture d'écran suivante :

Ce dont vous avez besoin

• Un ordinateur sur lequel est installé Android Studio

2. Regarder la vidéo du code pas à pas (facultatif)

Si vous souhaitez voir un formateur réaliser cet atelier de programmation, regardez la vidéo ci-dessous.

Nous vous recommandons d'afficher la vidéo en plein écran. Dans le lecteur vidéo, cliquez sur l'icône Plein écran pour afficher Android Studio et le code plus clairement.

Cette étape est facultative. Vous pouvez également ignorer la vidéo et passer immédiatement aux instructions de l'atelier de programmation.

3. Configurer l'application "Happy Birthday"

Dans cette tâche, vous allez configurer un projet dans Android Studio avec un modèle Activité Compose vide et remplacer le texte par un message d'anniversaire personnalisé.

Créer un projet Activité Compose vide

1. Dans la boîte de dialogue Bienvenue dans Android Studio, sélectionnez Nouveau projet.
2. Dans la boîte de dialogue New Project (Nouveau projet), sélectionnez Empty Compose Activity (Activité Compose vide), puis cliquez sur Next (Suivant).
3. Saisissez Happy Birthday dans le champ Name (Nom), sélectionnez un niveau d'API minimal de 24 (Nougat) dans le champ Minimum SDK (SDK minimal), puis cliquez sur Finish (Terminer).

4. Attendez qu'Android Studio crée les fichiers et le projet.
5. Cliquez sur Run 'app' (Exécuter 'application').

L'application devrait se présenter comme suit :

Lorsque vous avez créé cette application avec le modèle Empty Compose Activity, Android Studio a configuré des ressources pour une application Android de base, y compris le message Hello Android! à l'écran. Dans cet atelier de programmation, vous allez découvrir comment le message s'affiche, remplacer son texte par un message d'anniversaire, mais aussi ajouter et mettre en forme des messages supplémentaires.

Qu'est-ce qu'une interface utilisateur (UI) ?

L'interface utilisateur d'une application correspond à ce que vous voyez à l'écran : texte, images, boutons et bien d'autres types d'éléments, ainsi que la façon de les organiser. En d'autres termes, il s'agit de la manière dont l'application présente les éléments à l'utilisateur et la façon d'interagir avec elle.

Cette image contient un bouton cliquable, un message textuel et un champ de saisie de texte dans lequel les utilisateurs peuvent saisir des données.

Bouton cliquable

Message textuel

Champ de saisie de texte

Chacun de ces éléments est appelé un composant d'interface utilisateur. Presque tout ce que vous voyez à l'écran est un élément d'UI (également appelé composant d'UI). Ces éléments peuvent être interactifs, comme un bouton cliquable ou un champ de saisie modifiable, mais ils peuvent également être de simples images décoratives.

Dans les applications suivantes, essayez de trouver autant de composants d'UI que possible.

Dans cet atelier de programmation, vous allez utiliser un élément d'UI qui affiche du texte, appelé "élément Text".

4. Qu'est-ce que Jetpack Compose ?

Jetpack Compose est un kit d'outils moderne permettant de créer des interfaces utilisateur Android. Compose simplifie et accélère le développement d'UI pour Android en utilisant moins de code, des outils puissants et des fonctionnalités Kotlin intuitives. Avec Compose, vous pouvez créer votre UI en définissant un ensemble de fonctions, appelées fonctions composables, qui reçoivent des données et émettent des éléments d'UI.

Fonctions composables

Les fonctions composables sont les éléments de base d'une UI dans Compose. Une fonction composable :

• décrit une partie de votre interface utilisateur ;
• ne renvoie aucune information ;
• reçoit des entrées et génère ce qui s'affiche à l'écran ;
• peut parfois émettre plusieurs éléments d'UI.

Annotations

Les annotations permettent d'ajouter des informations supplémentaires au code. Ces informations aident les autres développeurs et les outils tels que le compilateur Jetpack Compose à comprendre le code de l'application.

Une annotation est appliquée en ajoutant un préfixe, le caractère @, à son nom (l'annotation) au début de la déclaration. Différents éléments de code peuvent être annotés : les propriétés, les fonctions, les classes, etc. Nous aborderons les classes plus loin dans cette formation.

Le schéma suivant présente un exemple de fonction annotée :

L'extrait de code suivant contient des exemples de propriétés annotées. Vous aurez l'occasion de les utiliser dans les prochains ateliers de programmation.

// Example code, do not copy it over

@Json
val imgSrcUrl: String

@Volatile
private var INSTANCE: AppDatabase? = null

Annotations avec paramètres

Les annotations peuvent recevoir des paramètres. Les paramètres fournissent des informations supplémentaires aux outils qui les traitent. Voici quelques exemples d'annotation @Preview avec et sans paramètres.

Annotation sans paramètres

Annotation permettant d'afficher un aperçu de l'arrière-plan

Annotation permettant d'afficher un aperçu d'un titre

Vous pouvez transmettre plusieurs paramètres à l'annotation, comme indiqué ici.

Annotation permettant d'afficher un aperçu d'un titre et de l'UI du système (l'écran du téléphone)

Jetpack Compose comprend un large éventail d'annotations intégrées. Jusqu'ici, vous avez déjà vu les annotations @Composable et @Preview. Vous découvrirez d'autres annotations et la façon de les utiliser dans la dernière partie du cours.

Exemple de fonction composable

La fonction composable est annotée avec @Composable. Toutes les fonctions composables doivent comporter cette annotation. Elle informe le compilateur Compose que cette fonction est destinée à convertir des données en UI. Pour rappel, un compilateur est un programme spécial qui prend le code que vous avez écrit, l'examine ligne par ligne et le traduit en un langage compréhensible par l'ordinateur (langage machine).

Cet extrait de code est un exemple de fonction composable simple qui reçoit une donnée (le paramètre de fonction name) et l'utilise pour afficher un élément textuel à l'écran.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

Quelques remarques sur les fonctions composables :

• Les fonctions composables peuvent recevoir des paramètres, ce qui permet à la logique d'application de décrire ou de modifier l'UI. Dans ce cas, votre élément d'interface utilisateur reçoit un élément String afin de pouvoir accueillir les utilisateurs en les appelant par leur nom.
• Ces fonctions ne renvoient aucune information. Les fonctions composables qui émettent l'interface utilisateur n'ont pas besoin de renvoyer quoi que ce soit, car elles décrivent l'état souhaité de l'écran au lieu de construire des éléments d'UI. En d'autres termes, les fonctions composables ne font que décrire l'interface utilisateur, elles ne la construisent pas et ne la créent pas. Il n'y a donc rien à renvoyer.

Identifier les fonctions composables dans du code

1. Dans Android Studio, ouvrez le fichier MainActivity.kt.
2. Faites défiler la page jusqu'à la fonction DefaultPreview(), puis supprimez-la. Ajoutez la fonction composable BirthdayCardPreview() pour créer un aperçu de la fonction Greeting(), comme indiqué ci-dessous. Les fonctions doivent toujours être nommées ou renommées pour décrire leur fonctionnalité.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Android")
    }
}

Les fonctions composables peuvent appeler d'autres fonctions composables. Dans cet extrait de code, la fonction d'aperçu appelle la fonction composable Greeting().

Notez que la fonction précédente comporte également une autre annotation avant @Composable, à savoir @Preview, avec un paramètre. Plus loin dans ce cours, nous aborderons les arguments transmis à l'annotation @Preview.

Noms des fonctions composables

Une fonction composable qui ne renvoie aucun élément et qui contient l'annotation @Composable DOIT être nommée en utilisant la casse Pascal. Il s'agit d'une convention d'attribution des noms selon laquelle chaque mot d'un mot composé commence par une majuscule. La différence la casse Pascal et le camel case est que dans le premier cas, tous les mots commencent par une majuscule. Dans le second, le premier mot commence par une minuscule.

La fonction Compose :

• DOIT être un nom : DoneButton()
• NE DOIT PAS ÊTRE un verbe ou un groupe verbal : DrawTextField()
• NE DOIT PAS ÊTRE une préposition accompagnée d'un nom : TextFieldWithLink()
• NE DOIT PAS ÊTRE un adjectif : Bright()
• NE DOIT PAS ÊTRE un adverbe : Outside()
• Les noms PEUVENT être précédés d'adjectifs descriptifs : RoundIcon()

Cette règle s'applique dans tous les cas, que la fonction émette ou non des éléments d'UI. Pour en savoir plus, consultez la page Attribuer un nom aux fonctions composables.

Exemple de code. Ne pas copier.

// Do: This function is a descriptive PascalCased noun as a visual UI element
@Composable
fun FancyButton(text: String) {}

// Do: This function is a descriptive PascalCased noun as a non-visual element
// with presence in the composition
@Composable
fun BackButtonHandler() {}

// Don't: This function is a noun but is not PascalCased!
@Composable
fun fancyButton(text: String) {}

// Don't: This function is PascalCased but is not a noun!
@Composable
fun RenderFancyButton(text: String) {}

// Don't: This function is neither PascalCased nor a noun!
@Composable
fun drawProfileImage(image: ImageAsset) {}

5. Volet de conception dans Android Studio

Android Studio vous permet de prévisualiser vos fonctions composables dans l'IDE, ce qui évite de devoir installer l'application sur un appareil Android ou un émulateur. Comme vous l'avez appris dans le parcours précédent, vous pouvez prévisualiser votre application dans le volet Design (Conception) d'Android Studio.

Pour pouvoir être prévisualisée, une fonction composable doit fournir des valeurs par défaut pour tous les paramètres. Par conséquent, vous ne pouvez pas prévisualiser la fonction Greeting() directement. Pour ce faire, vous devez ajouter une autre fonction, BirthdayCardPreview() dans le cas présent, qui appelle la fonction Greeting() avec un paramètre approprié.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Android")
    }
}

Pour afficher votre aperçu :

1. Compilez votre code.

L'aperçu devrait se mettre à jour automatiquement.

Vous pouvez également mettre à jour ou actualiser l'aperçu en cliquant sur Compiler et actualiser dans le volet Conception.

2. Dans la fonction BirthdayCardPreview(), remplacez l'argument "Android" de la fonction Greeting() par votre nom.

fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("James")
    }
}

3. Cliquez sur Build & Refresh (Compiler et actualiser) dans le volet Design (Conception).

L'aperçu se met à jour.

6. Ajouter un élément de texte

Dans cette tâche, vous allez supprimer le message d'accueil Hello $name! et ajouter un message d'anniversaire.

Ajouter une fonction composable

1. Dans le fichier MainActivity.kt, supprimez la définition de la fonction Greeting(). Dans la suite de l'atelier de programmation, vous ajouterez votre propre fonction pour afficher le message d'accueil.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

2. Pointez sur la fonction Greeting(). Notez qu'Android Studio met en évidence l'appel de fonction Greeting(). Vous pouvez passer la souris dessus pour identifier l'erreur.

3. Supprimez l'appel de fonction Greeting() ainsi que ses arguments provenant des fonctions onCreate() et BirthdayCardPreview(). Votre fichier MainActivity.kt doit ressembler à l'exemple suivant :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview(){
    HappyBirthdayTheme {
    }
}

4. Avant la fonction BirthdayCardPreview(), ajoutez une fonction appelée BirthdayGreetingWithText(). N'oubliez pas d'ajouter l'annotation @Composable avant la fonction, car il s'agit d'une fonction Compose qui émet un composable Text.

@Composable
fun BirthdayGreetingWithText() {
}

5. Il est recommandé de faire en sorte que le composable accepte un paramètre Modifier et transmette ce modifier à son premier enfant qui émettra l'UI. Vous vous familiariserez avec Modifier et les éléments enfants dans les tâches et ateliers de programmation suivants. Pour l'instant, ajoutez un paramètre Modifier à la fonction BirthdayGreetingWithText().

@Composable
fun BirthdayGreetingWithText(modifier: Modifier = Modifier) {
}

6. Ajoutez un paramètre message de type String à la fonction composable BirthdayGreetingWithText().

@Composable
fun BirthdayGreetingWithText(message: String, modifier: Modifier = Modifier) {
}

7. Dans la fonction BirthdayGreetingWithText(), ajoutez un composable Text qui transmet le message textuel sous la forme d'un argument nommé.

@Composable
fun BirthdayGreetingWithText(message: String, modifier: Modifier = Modifier) {
    Text(
       text = message
    )
}

Cette fonction BirthdayGreetingWithText() affiche du texte dans l'interface utilisateur en appelant la fonction composable Text().

Afficher un aperçu de la fonction

Dans cette tâche, vous allez afficher un aperçu de la fonction BirthdayGreetingWithText() dans le volet Conception.

1. Appelez la fonction BirthdayGreetingWithText() dans la fonction BirthdayCardPreview().
2. Transmettez un message d'anniversaire à votre ami sous la forme d'un argument String ajouté à la fonction BirthdayGreetingWithText(). Vous pouvez personnaliser ce message en utilisant son nom, par exemple "Happy Birthday Sam!".

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayGreetingWithText(message = "Happy Birthday Sam!")
    }
}

3. Dans le volet Design (Conception), cliquez sur Build & Refresh (Compiler et actualiser) et attendez la fin de la compilation pour voir l'aperçu de votre fonction.

7. Modifier la taille de la police

Vous avez ajouté du texte à votre interface utilisateur, mais nous sommes encore loin de l'application finale. Dans cette tâche, vous allez apprendre à modifier la taille et la couleur du texte, mais aussi d'autres attributs qui affectent l'apparence de l'élément textuel. Vous pouvez également tester différentes tailles et couleurs de police.

Pixels indépendants de l'échelle

Les pixels indépendants de l'échelle (SP) sont une unité de mesure de la taille de la police. Dans les applications Android, les éléments textuels de l'UI peuvent utiliser deux unités de mesure différentes : les pixels indépendants de la densité (DP), que vous utiliserez plus tard pour la mise en page, et les pixels indépendants de l'échelle (SP). Par défaut, l'unité en SP est identique à celle en DP, mais elle s'adapte aux préférences de taille de police définies par l'utilisateur dans les paramètres de son téléphone.

1. Dans le fichier MainActivity.kt, faites défiler la page jusqu'au composable Text() dans la fonction BirthdayGreetingWithText().
2. Transmettez à la fonction Text() un argument fontSize sous la forme d'un second argument nommé et définissez-le sur la valeur 36.sp.

Text(
   text = message,
   fontSize = 36.sp
)

Android Studio met en évidence le code .sp, car vous devez importer des classes ou des propriétés pour compiler votre application.

3. Cliquez sur .sp, qui est mis en évidence par Android Studio.
4. Dans la fenêtre pop-up, cliquez sur Importer pour importer androidx.compose.ui.unit.sp, qui permet d'utiliser la propriété de l'extension .sp.

5. Faites défiler la page jusqu'en haut du fichier et notez les instructions import. Elles doivent contenir une instruction import androidx.compose.ui.unit.sp, ce qui signifie que le package est ajouté à votre fichier par Android Studio.

6. Cliquez sur Compiler et actualiser dans le volet Conception pour afficher l'aperçu mis à jour. Notez la modification de la taille de la police dans l'aperçu du message d'accueil.

Vous pouvez désormais tester différentes tailles de police.

8. Ajouter un autre élément textuel

Au cours de vos tâches précédentes, vous avez ajouté un message d'accueil pour un ami. Dans cette tâche, vous allez signer votre message avec votre nom.

1. Dans le fichier MainActivity.kt, faites défiler la page jusqu'à la fonction BirthdayGreetingWithText().
2. Transmettez à la fonction un paramètre from de type String, qui représente votre signature.

fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier)

3. Après le composable Text du message d'anniversaire, ajoutez-en un autre qui accepte un argument text défini sur la valeur from.

Text(
   text = from
)

4. Ajoutez un argument nommé fontSize défini sur une valeur de 24.sp.

Text(
   text = from,
   fontSize = 24.sp
)

5. Faites défiler la page jusqu'à la fonction BirthdayCardPreview().
6. Ajoutez un autre argument String pour signer votre carte, par exemple "- from Emma".

BirthdayGreetingWithText(message = "Happy Birthday Sam!", from ="- from Emma")

7. Cliquez sur Compiler et actualiser dans le volet de conception.
8. Consultez l'aperçu.

Une fonction composable peut émettre plusieurs éléments d'interface utilisateur. Toutefois, si vous ne fournissez pas d'instructions de mise en page, Compose peut organiser les éléments d'une façon qui n'est pas souhaitable. Par exemple, le code précédent génère deux éléments de texte qui se chevauchent, car il n'existe aucune consigne permettant de les organiser.

Dans la prochaine tâche, vous découvrirez comment organiser les composables sur des lignes et des colonnes.

9. Disposer les éléments de texte sur des lignes et des colonnes

Hiérarchie de l'interface utilisateur

La hiérarchie de l'UI est basée sur des conteneurs. En d'autres termes, un composant peut contenir un ou plusieurs autres composants, et les termes "parent" et "enfant" sont parfois utilisés. Les éléments d'UI parents contiennent des éléments enfants, qui peuvent eux-mêmes contenir d'autres éléments enfants. Dans cette section, vous allez découvrir les composables Column, Row et Box, qui peuvent servir d'éléments d'interface utilisateur parents.

Dans Compose, les trois éléments de mise en page standard les plus simples sont les composables Column, Row et Box. Dans le prochain atelier de programmation, vous vous familiariserez avec le composable Box.

Column, Row et Box sont des fonctions composables qui peuvent recevoir des composables comme arguments, de sorte que vous pouvez placer des éléments dans ces conteneurs de mise en page. Par exemple, les éléments enfants d'un composable Row sont placés horizontalement, les uns à la suite des autres, sur une même ligne.

// Don't copy.
Row {
    Text("First Column")
    Text("Second Column")
}

Ces éléments de texte s'affichent l'un à côté de l'autre, comme illustré sur cette image.

Les bordures bleues ne sont utilisées qu'à titre de démonstration et ne sont pas visibles en conditions réelles.

Syntaxe lambda de fin

Dans l'extrait de code précédent, vous remarquerez que des accolades sont utilisées à la place des parenthèses dans la fonction composable Row. C'est ce qu'on appelle la syntaxe "lambda de fin". Vous en apprendrez plus sur les lambdas et sur la syntaxe lambda de fin dans la suite de ce cours. Pour l'instant, familiarisez-vous avec cette syntaxe Compose communément utilisée.

Kotlin propose une syntaxe spécifique pour transmettre des fonctions sous forme de paramètres à d'autres fonctions, lorsque le dernier paramètre est justement une fonction.

Si vous souhaitez transmettre une fonction en tant que paramètre, vous pouvez utiliser la syntaxe lambda de fin. Au lieu de placer le corps de la fonction avec le nom de la fonction entre parenthèses ({}), vous placez les parenthèses avec le corps de la fonction après son nom. Il s'agit d'une pratique communément utilisée dans Compose, il est donc recommandé de vous familiariser avec ce type de code.

Par exemple, le dernier paramètre de la fonction composable Row() est le paramètre content, qui émet les éléments d'UI enfants. Imaginons que vous souhaitiez créer une ligne avec trois éléments de texte. Le code suivant fonctionne, mais est très fastidieux à écrire :

Row(
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)

Étant donné que le paramètre content est le dernier du prototype de la fonction et que vous transmettez sa valeur sous la forme d'une expression lambda (pour l'instant, ce n'est pas grave si vous ne savez pas ce qu'est un lambda, familiarisez-vous simplement avec la syntaxe), vous pouvez supprimer le paramètre content et les parenthèses comme suit :

Row {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}

Disposer des éléments de texte sur une ligne

Dans cette tâche, vous allez réorganiser les éléments de texte de votre application de façon à éviter les chevauchements.

1. Dans le fichier MainActivity.kt, faites défiler la page jusqu'à la fonction BirthdayGreetingWithText().
2. Ajoutez le composable Row autour des éléments de texte afin d'afficher une colonne avec deux éléments textuels.

La fonction doit maintenant ressembler à l'extrait de code suivant :

@Composable
fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier)  {
    Row{
        Text(
            text = message,
            fontSize = 36.sp,
       )
        Text(
            text = from,
            fontSize = 24.sp,
       )
   }
}

3. Dans l'extrait de code, cliquez sur Row, qui est mis en évidence.
4. Vous verrez qu'Android Studio propose plusieurs options d'importation pour Row.
5. Cliquez sur Importer.

6. Dans le package androidx.compose.foundation.layout, sélectionnez la fonction commençant par Row(androidx.compose.ui.Modifier, androidx.compose.foundation.layout.Argument.Horizontal, androidx....

7. Cliquez sur Build & Refresh (Compiler et actualiser) pour mettre à jour l'aperçu dans le volet Design (Conception).

L'aperçu affiche désormais un bien meilleur résultat : il n'y a plus de chevauchement. Ce n'est toutefois pas encore ce que vous voulez, car l'espace est insuffisant pour votre signature. Dans la tâche suivante, pour résoudre ce problème, vous allez réorganiser les éléments de texte sous la forme d'une colonne.

Disposer des éléments de texte sur une colonne

Dans cette tâche, c'est à votre tour de modifier la fonction BirthdayGreetingWithText() pour réorganiser les éléments de texte sur une colonne. Une fois que vous avez terminé, n'oubliez pas de cliquer sur Compiler et actualiser pour mettre à jour l'aperçu, qui devrait alors ressembler à ceci :

Maintenant que vous avez essayé d'effectuer cette opération vous-même, n'hésitez pas à comparer votre code à la solution fournie dans l'extrait suivant :

@Composable
fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier) {
   Column {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

Importez ce package lorsque vous y êtes invité par Android Studio :

import androidx.compose.foundation.layout.Column

1. Rappelez-vous que vous devez transmettre le paramètre de modificateur aux éléments enfants dans les composables. Autrement dit, vous devez transmettre le paramètre de modificateur au composable Column.

@Composable
   fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier) {
   Column(modifier = modifier) {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

10. Afficher le résultat sur l'appareil

Une fois que l'aperçu vous convient, vous pouvez exécuter l'application sur votre appareil ou émulateur.

1. Dans le fichier MainActivity.kt, faites défiler la page jusqu'à la fonction onCreate().
2. Appelez la fonction BirthdayGreetingWithText() à partir du bloc Surface.
3. Transmettez la fonction BirthdayGreetingWithText(), votre message d'anniversaire et votre signature.

La fonction onCreate() terminée devrait ressembler à ceci :

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           HappyBirthdayTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   BirthdayGreetingWithText( message = "Happy Birthday Sam!", from = "- from Emma")
               }
           }
       }
   }
}

4. Créez et exécutez votre application sur l'émulateur.

11. Télécharger le code de solution

Le fichier MainActivity.kt final :

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           HappyBirthdayTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   BirthdayGreetingWithText( message = "Happy Birthday Sam!", from = "- from Emma")
               }
           }
       }
   }
}

@Composable
   fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier) {
   Column(modifier = modifier) {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
   HappyBirthdayTheme {
       BirthdayGreetingWithText(message = "Happy Birthday Sam!", from ="- from Emma")
   }
}

12. Conclusion

Vous avez créé votre application "Happy Birthday".

Dans l'atelier de programmation suivant, vous allez améliorer son apparence en ajoutant une image et en modifiant l'alignement des éléments de texte.

Résumé

• Jetpack Compose est un kit d'outils moderne permettant de créer une interface utilisateur Android. Il simplifie et accélère le développement d'UI pour Android en utilisant moins de code, des outils puissants et des API Kotlin intuitives.
• L'interface utilisateur (UI) d'une application correspond à ce que vous voyez à l'écran : texte, images, boutons, etc.
• Les fonctions composables sont les éléments de base de Compose. Une fonction composable décrit une partie de votre interface utilisateur.
• Une fonction composable est accompagnée de l'annotation @Composable, qui informe le compilateur Compose que cette fonction est destinée à convertir les données en UI.
• Dans Compose, les trois éléments de mise en page standard les plus simples sont Column, Row, et Box. Ce sont des fonctions composables qui requièrent des contenus composables, ce qui permet de placer des éléments à l'intérieur. Par exemple, chaque enfant à l'intérieur d'un élément Row est placé horizontalement.

En savoir plus

• Composables
• Principes de base de la mise en page dans Compose
• Densité de pixels
• Texte dans Compose
• Kotlin pour Jetpack Compose