Ce support s'adresse aux développeuses et développeurs qui souhaitent apprendre à développer des interfaces pour Android en utilisant Jetpack Compose, le kit d’outils recommandé par Google, basé sur le langage Kotlin. Il porte un regard soucieux sur les bonnes pratiques d'accessibilité qui intéresseront également toute personne désireuse d'améliorer le quotidien numérique des personnes en situation de handicap. Des connaissances de base sur le développement Android...
Ce support s'adresse aux développeuses et développeurs qui souhaitent apprendre à développer des interfaces pour Android en utilisant Jetpack Compose, le kit d’outils recommandé par Google, basé sur le langage Kotlin. Il porte un regard soucieux sur les bonnes pratiques d'accessibilité qui intéresseront également toute personne désireuse d'améliorer le quotidien numérique des personnes en situation de handicap. Des connaissances de base sur le développement Android sont requises.
Dans ce support, l'autrice détaille pas à pas la manière de prendre en main la bibliothèque Jetpack Compose pour d'une part développer des interfaces qui répondent aux besoins de modernité des applications actuelles, et d'autre part pour répondre à la nécessité de développer des applications accessibles à toutes et à tous.
Après une explication des raisons motivant la création de Jetpack Compose et des nouveaux concepts ainsi apportés au développement d'interfaces pour Android tels que la programmation déclarative ou le mécanisme de Recomposition, le lecteur découvre comment l’utiliser au sein d'un projet Android et initie son premier composant. Il est invité à parcourir les composants de base de cette bibliothèque en réalisant des textes, des boutons et des champs de formulaires, et à les mettre en page. Un chapitre est ensuite dédié à la gestion des états et des effets, deux notions importantes qui permettront au lecteur de concevoir ses composants dans les règles de l’art. Pour finir, l'autrice explique comment afficher des listes de manière optimisée et comment effectuer des mises en page plus avancées. Pour finir, le lecteur apprend à animer simplement une interface et à la tester de manière automatisée.
Dans chaque chapitre de ce support, l'autrice partage des bonnes pratiques
Avant-propos
Introduction
Parti pris de ce livre
Ce qui ne sera pas abordé
Choix techniques
Choix d’écriture
Introduction
Des applications accessibles
Qu’est-ce que l’accessibilité numérique ?
Quatre formes de handicap
Le handicap auditif
Le handicap moteur
Le handicap cognitif
Le handicap visuel
Responsabilités des développeurset développeuses
Les référentiels d’accessibilité
Savoir utiliser Talkback
Des applications modernes
Des challenges uniques spécifiques au mobile
Des appareils de plus en plus puissants menant à desinterfaces de plus en plus complexes
Un UI Toolkit original qui n’est plus à lahauteur
Prérequis
Kotlin
Fonctions
Traitement asynchrone
Android
La genèse de Jetpack Compose
Introduction
Les raisons motivant la création de Jetpack Compose
Pouvoir mettre à jour le UI toolkit en dehorsdu cycle de mise à jour de la plateforme
Améliorer la maintenabilité du UIToolkit original
Se débarrasser des choix d’implémentationcontraignants, liés au principe d’héritage
Simplifier le développement de composantsréutilisables
Prendre en compte l’accessibilité dèsla conception
Appliquer une meilleure séparation des responsabilités
Les lacunes de la programmation impérative
Conclusion
Les partis pris techniques de Jetpack Compose
Avant-propos
La structure d’un composant Jetpack Compose
Un composant est une fonction
La piste écartée de l’utilisationdes classes
L’utilisation de fonction
Un composant est une fonction qui prend en entréedes paramètres
Des données qui circulent dans un sens
Des événements qui circulent dansl’autre sens
Une fonction Composable ne gère pas l’étatdu composant mais le représente
L’annotation @Composable
Comment fonctionne cette annotation ?
Comment utiliser le mot-clé @Composable ?
L’arbre de composition
La recomposition
Les optimisations du processus de recomposition
Règle nº1 : une fonctionComposable ne doit pas générer d’effetde bord
Règle n°2 : une fonction Composabledoit être idempotente
Le nommage des fonctions Composables
Une fonction @Composable ne retourne rien
La programmation déclarative
L’arbre sémantique pour gérer l’accessibilité
Représentation de l’arbre sémantique
Propriétés sémantiques
Propriétés sémantiquesdes composants de la bibliothèque Compose UI
Visualiser l’arbre sémantique etses propriétés avec Android Studio
De l’annotation @Composable au rendu visuel à l’écran
Interprétation de l’annotation Composablepar le compilateur
Mise en mémoire de l’interface dansla Slot table lors de l’exécution
Les trois phases de rendu d’un écran
Conclusion
Les bases de Compose UI
Premiers pas
Les dépendances Jetpack Compose
Créer un nouveau projet Android avec JetpackCompose
Ajouter Jetpack Compose à un projet existant
Le composant racine
Une activité Jetpack Compose
Jetpack Compose au sein d’une vue XML
Aperçu d’un composant utilisant Compose UI
Prévisualiser un composant avec Android Studio
Modifier
Définition
À quoi sert un Modifier ?
Les Modifiers peuvent se chaîner
L’ordre des Modifiers a une importance
Certains Modifiers sont type safe
Le Modifier .semantics() pour gérer l’accessibilité
Des Modifiers qui s’enchaînent
Bonne pratique : tout composant doit exposerun paramètre Modifier
Les thèmes
Création d’un MaterialTheme
La notion de thème au sein de Material Design
La fonction Composable MaterialTheme
Définir un thème propre à notreapplication
Personnalisation des couleurs
Personnalisation de la typographie
Personnalisation des formes
L’objet MaterialTheme pour accéder aux attributsde notre thème
Appliquer les couleurs "On" par défaut
Le composant Surface
CompositionLocal
Bonnes pratiques d’accessibilité
Des couleurs avec des niveaux de contraste suffisammentprononcés
Associer un texte alternatif aux composants de typeIconButton
Veillez à ce que les boutons flottants soientbien atteignables avec un lecteur d’écran
Annoncer les informations affichées temporairementsuite à une action
Annoncer les changements d’état d’un composantsuite à une action
Personnaliser le nom de l’action associéeau bouton avec la propriété onClickLabel
Images
Les paramètres de la fonction Image
Charger une image à partir d’une URL
La fonction Icon
Bonnes pratiques d’accessibilité
Quand faut-il écrire un texte alternatif?
Comment écrire un texte alternatif ?
Champs de formulaire
Introduction
Champs de saisie
Aperçu du composant TextField
Les paramètres de la fonction ComposableTextField
Style
Styles multiples au sein d’un champ de saisie
Faciliter la saisie des douze chiffres d’une cartebancaire
Bonnes pratiques d’accessibilité pour leschamps de saisie
Donner la possibilité à l’utilisateurd’afficher et masquer le contenu d’un champ de type mot de passe
Informer suffisamment tôt l’utilisateur descontraintes d’un champ de saisie
Informer l’utilisateur s’il y a une erreur dans sasaisie
Permettre le remplissage automatique dans certainstypes de champs
Utiliser un label et pas seulement un placeholder
Boutons de type radio, cases à cocher et switchs
Boutons de type radio
Cases à cocher
Switch
Amélioration du contraste du composant Switch
Associer un texte à un Switch
Mise en page standard
Introduction
Le processus de mise en page
La phase de layout
Le processus de mesure
Le processus de positionnement
Mise en page en ligne ou en colonne
Le layout Row
Le layout Column
Modifiers affectant la mise en page
La taille
Le positionnement
Alignement
Alignement sur la ligne de base
Poids
Marge
Le défilement
Mise en page en superposition
Les paramètres du layout Box
Cas d’usage du layout Box
Alignement unitaire des composants en superposition
Taille relative d’un enfant
Mise en page selon l'espace disponible avec BoxWithConstraints
Cas d’usage
Impact sur le processus de mise en page
Les mesures intrinsèques
Introduction
Définition des mesures intrinsèques
Cas d’usage en largeur
Cas d’usage en hauteur
Bonnes pratiques d'accessibilité
Redimensionnement sans dégradation jusqu’à 200 %
Exemple
Comment détecter ce type d’anomalies ?
Correction
Navigation facilitée grâce aux titres
Exemple
Correction
Navigation facilitée grâce aux regroupementsde composant
Exemple
Correction
Gestion des états et des effets
Qu'est-ce qu'un état ?
Introduction
Différents types d’états
Production d’un Screen UI State
Production d’un UI Element State
Cas n°1 : la logique UI est simple
Cas n°2 : la logique UI est complexe et impliqueun ou plusieurs états
Résumé
Composant sans état interne
Origine de cette pratique
Conception de composants sans état
Unidirectional Data Flow (UDF)
États et événements dansles paramètres
Résumé
Composants avec état interne
La fonction remember
Composant avec état immutable
Cas pratique
Composant avec état mutable
La fonction mutableStateOf()
Cas pratique
Différentes manières de déclarerun état mutable
La fonction rememberSaveable
Autres états Android supportés
Cas pratique
Résumé
Arbre de décision : où gérer l'état ?
Gestion des effets de bord
Introduction
Gestion d’effet de bord synchrone
DisposableEffect
SideEffect
Gestion d’effet de bord asynchrone
rememberCoroutineScope
LaunchedEffect
Effets de bord produisant un état
rememberUpdatedState
produceState
derivedStateOf
remember
Les listes
Introduction
Définition du contenu via un DSL
DSL : définition
Accès au DSl via LazyListScope
Les fonctions du DSL
La fonction item
Les fonctions items
La fonction itemsIndexed
La fonction stickyHeader
LazyColumn et LazyRow
Introduction
Paramètres
Cas d’usage
Point de vigilance : imbrication de Lazy layout dansun layout standard défilable
Grilles
Paramètres de LazyVerticalGrid et LazyHorizontalGrid
Cas d’usage de LazyVerticalGrid et LazyHorizontalGrid
Grille verticale adaptative
Grille horizontale avec un nombre de lignes fixe
Grilles contenant des éléments dehauteur ou largeur différente
Cas d’usage
Contrôler et réagir à l'état de défilement
Le State Holder d’un lazy layout
Cas d’usage
Observer la position de défilement
Actionner le défilement vers une position
Une interface riche et animée
Les composants Materials
Une librairie de composants personnalisables
Le slot API Pattern
Définition
Principes de conception du Slot API Pattern
Prise en main du composant Scaffold
Signature et paramètres
Squelette
Analyse
Cas pratique
Les animations
Animer la visibilité
Animer la taille d’un contenu
Animer une valeur
Les effets négatifs des animations sur l’accessibilité
Mouvement, clignotement, défilement
Animation de mouvement lors d’une interaction
Personnaliser le comportement d’une animation
Différents comportements
Accélérer ou ralentir
Personnaliser le comportement d’une animation et savitesse d’exécution
Aller plus loin
Les tests automatisés
Introduction
Installation
Différents types de tests
Définir l'interface à tester avec createComposeRule
Les fonctions permettant de tester une interface
Rechercher, actionner, vérifier
Matcher
Associer un tag à un composant
Tester au sein d'une activité
Accéder aux ressources
Tester de bout en bout une activité
Arbre sémantique
Deux versions de l’arbre sémantique :fusionné et non fusionné
Imprimer l’arbre sémantique dans les logspour déboguer
Cas d’usage : arbre non fusionné dansun test
Synchronisation des tests
Cas d’usage : synchroniser manuellement l’interfaceet contrôler le temps
Cas d’usage : attendre un traitement
Conclusion
Fanny DEMEY
Développeuse Android indépendante, Fanny DEMEY travaille exclusivement sur des projets ayant un impact social ou environnemental fort. Spécialiste de l'accessibilité mobile, elle partage ses connaissances sur ce sujet à travers d'articles, de podcasts et de conférences à l'international. Elle anime également la communauté Android et tech en général en organisant des conférences comme le Devfest Lille. Son envie de transmettre son engouement pour Jetpack Compose tout en appliquant une pédagogie qui prend en compte l'accessibilité à chaque étape, l'a mené à l’écriture de ce livre sur le développement d’interfaces accessibles et modernes pour Android.