Textes

Aussi banal qu’il puisse paraître, un texte est un élément central dans une interface. Il a de multiples caractéristiques personnalisables comme son style, sa couleur, sa taille ou encore sa police de caractères. Nous devons également avoir la possibilité de laisser l’utilisateur interagir avec celui-ci. Par exemple, en le sélectionnant ou en cliquant dessus.

Compose UI fournit deux composants permettant de créer un texte personnalisable :

Le composant BasicText qui, comme son nom l’indique, propose une implémentation de base.
Le composant Text qui repose sur le composant BasicText, mais qui permet en plus d’appliquer un style qui repose sur les recommandations de Material Design.

Dans ce livre, nous utiliserons le composant Text. D’ailleurs, nous avons déjà utilisé ce composant dans de précédents exemples. Voyons maintenant en détail ce qu’il est possible de faire avec.

Les paramètres de la fonction Composable Text

Pour commencer, voyons comment utiliser la fonction Composable Text de la manière la plus simple :

@Composable 
fun SingleText() { 
    Text(text = "We all live in a yellow submarine") 
}

En effet, le seul paramètre obligatoire de cette fonction est text.

Néanmoins, dans notre exemple, nous pouvons déjà faire une première amélioration en externalisant notre chaîne de caractères dans le fichier de ressources strings.xml. Pour cela, il suffit d’utiliser la fonction Composable stringResource qui prend en paramètre un id de ressource et qui retourne la chaîne de caractères correspondante correctement localisée.

@Composable 
fun SingleTextWithRessource() { 
    Text( 
        text...

Boutons

Nous venons de voir dans la section précédente comment afficher un texte. Le second élément, sans doute le plus commun au sein d’une application, est un bouton. La représentation visuelle la plus simple que l’on se fait d’un bouton est un élément cliquable qui contient du texte. Il peut pourtant prendre une multitude de formes :

contenant une icône
contenant plusieurs éléments comme du texte, des icônes, une image
flottant comme le Floating Action Button issue de Material Design
etc.

Nous allons voir dans cette section comment réaliser ces différents types de boutons.

Pour commencer, Compose UI fournit trois composants permettant de développer un bouton classique tout en s’appuyant sur Material Design :

Le composant Button qui est l’implémentation de base.
Le composant OutlinedButton qui repose sur le composant Button, et qui adopte un style de type Outlined (https://material.io/components/text-fields#outlined-text-field).
Le composant TextButton qui repose sur le composant Button, et qui a un style moins prononcé.

Rendu visuel de base des composants Button, OutlinedButton et TextButton

Les paramètres du composant Button

Introduction

Les composants OutlinedButton et TextButton utilisent en réalité le composant Button, avec comme seule différence le style qui est appliqué par défaut. C’est pourquoi nous étudierons en détail uniquement les paramètres du composant Button.

Voyons comment utiliser la fonction Composable Button de la manière la plus simple possible :

@Composable 
fun SimpleButton(){ 
    Button( 
        onClick = { /*TODO*/ }, 
        content = { 
            Text(text...

Images

Il n’est pas rare de devoir manipuler des images dans le code d’une application, qu’elles soient liées à une fonctionnalité spécifique, associées à une action de clic ou simplement présentent pour améliorer l’esthétique d’une application. Pour cela, la fonction Composable Image permet d’afficher une image qui provient soit d’un fichier local, soit d’une URL.

Les paramètres de la fonction Image

Il existe en fait trois fonctions Composables Image. C’est en particulier le premier paramètre qui différencie ces trois fonctions. Voici les trois types possibles pour ce paramètre :

Un objet de type ImageBitmap, représentant une image matricielle.
Un objet de type ImageVector, représentant une image vectorielle.
Un objet de type Painter, obtenu à l’aide de la fonction painterResource(). Il permet de gérer des images vectorielles ou matricielles, en particulier dans les cas où nous n’avons pas besoin de personnalisation particulière de l’image.

Par exemple, les deux implémentations d’images ci-dessous sont équivalentes :

Image(  
    bitmap = ImageBitmap.imageResource( 
        id = R.drawable.wood_background 
    ), 
    contentDescription = null 
) 
 
Image(  
    painter = painterResource( 
        id = R.drawable.wood_background 
    ), 
    contentDescription = null 
)

Une image matricielle est une image qui contient des pixels comme par exemple des images aux formats JPEG, PNG ou WEBP. Une image vectorielle est composée de plusieurs formes géométiques...

Textes, boutons et images