Une meilleure façon de créer des vues Android avec JetPackCompose

Un peu d'histoire

Les utilisateurs interagissent avec les applications mobiles via différents écrans, généralement composés de plusieurs vues. La manière dont les développeurs gèrent ces interactions avec les utilisateurs a beaucoup évolué au cours de la vie de la plateforme Android, grâce à l'utilisation de plusieurs modèles. Au début, les développeurs utilisaient le modèle Modèle-Vue-Contrôleur, puis le modèle Modèle-Vue-Présenteur (ou Modèle-Vue-Intensité). Enfin, nous sommes passés au modèle Modèle-Vue-VueModèle recommandé par Google. Le "gestionnaire de vues" a évolué (Contrôleur/Présentateur/ViewModèle), mais la partie "Vue" elle-même n'a pas beaucoup changé. Le changement le plus important a été l'utilisation de fragments comme blocs de construction pour l'interface utilisateur au lieu d'activités comme dans les premiers jours.

Pendant tout ce temps, nous avons principalement utilisé XML pour définir les dispositions des vues de l'application. Bien sûr, nous pourrions définir ces vues en utilisant uniquement du code, mais cette approche a ses inconvénients. En général, les applications peuvent avoir quelques vues complexes et dynamiques définies dans le code, mais la plupart des mises en page des applications sont encore définies dans des fichiers XML de nos jours.

Entre-temps, le langage Kotin a été introduit et disposait d'une fonctionnalité intéressante qui permettait de définir des vues à l'aide d'un DSL Kotln personnalisé. Cette fonctionnalité était un concept intéressant, mais elle n'a jamais attiré suffisamment l'attention de la communauté des développeurs Android. Il y avait des problèmes, mais les plus importants étaient la non prise en charge des cas d'utilisation avancés et l'absence de prise en charge officielle par Android Studio.

Pourquoi JetPack Compose

Il y a quelque temps, Google a décidé d'unifier la manière dont nous développons les applications Android. Dans le cadre du projet JetPack Google a unifié de nombreux aspects de la création d'applications Android. De la navigation à l'accès à la base de données, en passant par les tâches d'arrière-plan, et bien plus encore. En outre, Google a fourni une base solide pour aider les développeurs à suivre les meilleures pratiques et à réduire le code passe-partout. C'est dans cette famille que s'inscrit la solution JetPack Compose - une nouvelle façon de gérer l'interface utilisateur. JetPack Compose utilise Kotlin et un langage DSL personnalisé pour configurer les dispositions d'écran, définir les thèmes, gérer l'état de la vue et ajouter des animations d'interface utilisateur. Tout cela est réalisé via une approche déclarative qui est déjà largement répandue dans ReactNative, Flutter et les applications iOS.

JetPack Compose en pratique

Nous avons un peu de contexte, alors maintenant jetons un coup d'œil rapide à la façon dont nous pouvons utiliser JetPack Compose et ce que nous pouvons faire avec cette boîte à outils. Tout d'abord, nous devons utiliser Android Studio Arctic Fox 2020.3.1 (ou plus récent). Ensuite, nous devons créer un nouveau projet Android (fenêtre Select a Project Template, sélectionnez Empty Compose Activity et cliquez sur Next).

Des instructions détaillées peuvent être trouvées ci-dessous ici.

Ouvrir MainActivity et remarquez que Activity étend ComposantActivité:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // … view
    }
}

Au lieu d'utiliser des fichiers XML pour définir les vues, nous définirons les vues dans la lambda setContent (méthode personnalisée définie en Kotlin) qui est un élément de base du DSL JetPack Compose :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            // … view
        }
    }
}

Au lieu d'utiliser des balises XML pour définir les vues, nous utiliserons les dispositions et les vues personnalisées fournies par JetPack Compose - Column, Row, Box, etc :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column {
                Text("Alfred Sisley")
                Text("3 minutes ago")
              }
        }
    }

    @Preview
    @Composable
    fun SampleView() {
        
    }
}

Le code ci-dessus crée une colonne unique avec "deux lignes" (chaque ligne contient une vue unique avec le texte).

Nous apprendrons à générer l'aperçu dans quelques instants.

Chaque composant peut définir sa hiérarchie de vues pour permettre la création directe de vues plus complexes. Notre code de vue peut être extrait en "composants" composables en créant une méthode annotée avec l'annotation Composable :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleView()
        }
    }

    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

Ces méthodes (annotées avec Composable ) fournissent les éléments de base de l'interface utilisateur des Applications. Pour pouvoir voir l'aperçu dans Android Studio, nous devons annoter une méthode avec l'annotation Preview et construire l'application :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleView()
        }
    }

    @Preview
    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

Nous pouvons également modifier les propriétés d'éléments individuels. Modifions les couleurs d'arrière-plan pour chaque ligne du texte :

@Preview
@Composable
fun SampleView() {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text("Apple Juice")
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("100 ml")
        }
    }
}

Nous pouvons également ajouter des paramètres à ces vues pour rendre le nom du jus et le volume dynamiques :

@Composable
fun SampleView(name: String, volume: Int) {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text(name)
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("$volume ml")
        }
    }
}

Malheureusement, nous ne pouvons pas prévisualiser les vues paramétrées, nous devons donc créer une autre vue pour activer la prévisualisation. Maintenant SampleViewPreview est annotée avec l'annotation Preview, et elle utilise les éléments suivants définis précédemment SampleView:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleViewPreview()
        }
    }

    @Preview
    @Composable
    fun SampleViewPreview() {
        SampleView("Orange Juice", 50)
    }

    @Composable
    fun SampleView(name: String, volume: Int) {
        Column {
            Box(
                Modifier.background(Color.Green)
            ) {
                Text(name)
            }
            Box(
                Modifier.background(Color.Blue)
            ) {
                Text("$volume ml")
            }
        }
    }
}

JetPack Compose est axé sur la composition, de sorte que nous pouvons facilement utiliser plus d'une instance de notre SampleView :

@Preview
@Composable
fun SampleViewPreview() {
    Column {
        SampleView("Orange Juice", 50)
        SampleView("Mango Juice", 100)
    }
}

Résumé

JetPack Compose est facile à utiliser et a un grand potentiel. Vous pouvez l'utiliser pour construire des interfaces modernes, interactives et dynamiques. Vous pouvez même l'utiliser pour créer des interfaces utilisateur de bureau pour les applications (encore en alpha). Le seul inconvénient est que JetPack Compose n'est pas encore stable (en juin 2021), mais cela changera bientôt, et il est fort probable qu'il devienne un nouveau standard pour l'interface utilisateur Android. L'apprentissage de JetPack compose nécessite un changement d'état d'esprit, mais l'interface utilisateur devenant de plus en plus dynamique, cette approche de pilotage par l'état rendra la vie de tous les développeurs plus facile.

Liens

• JetPack Compose

• Composer des échantillons

• Exemples de JetBrains Compose