Intégration de Jetpack Compose dans un projet

Pour commencer avec Compose, assurez-vous d'utiliser Android Studio comme environnement de développement. La version la plus récente génère par défaut des projets compatibles Compose.

Création d'une nouvelle application compatible Compose

Lors de la création d'un nouveau projet, sélectionnez Kotlin comme langage, car Jetpack Compose est exclusivement conçu pour Kotlin. Le niveau d'API minimum recommandé est 21 ou supérieur.

Configuration de Compose pour une application existante

Pour intégrer Compose dans un projet Android existant, ajoutez les configurations suviantes dans le fichier build.gradle :

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.9"
    }
}

L'activation de la fonctionnalité compose permet le support de l'UI déclarative. La version de l'extension du compiltaeur doit correspondre à la version de Kotlin utilisée.

Ajout des dépendances nécessaires

Les dépendances typiques pour un projet Compe incluent :

dependencies {
    val composeBill = platform("androidx.compose:compose-bom:2024.02.01")
    implementation(composeBill)
    androidTestImplementation(composeBill)

    // Composants Material Design 3
    implementation("androidx.compose.material3:material3")
    // Outils de prévisualisation
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
    // Intégration avec les activités et les ViewModels
    implementation("androidx.activity:activity-compose:1.8.2")
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
}

Un exemple de base généré automatiquement :

class EcranPrincipal : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ThemeApplication {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MessageAccueil("Android")
                }
            }
        }
    }
}

@Composable
fun MessageAccueil(nom: String) {
    Texte("Bonjour, $nom!")
}

@Preview(showBackground = true)
@Composable
fun ApercuMessageAccueil() {
    ThemeApplication {
        MessageAccueil("Android")
    }
}

Principes de conception de l'API Compose

Tout est fonction

L'UI dans Compose est construite à l'aide de fonctions composible, annotées avec @Composable. Ces fonctions prennent des données en entrée et génèrent des éléments d'interface. Par exemple :

@Composable
fun Salutation(utilisateur: String) {
    Texte("Bienvenue, $utilisateur")
}

Les fonctions composable doivent être appelées dans le contexte d'autres fonctions composable. L'exécution répétée de ces fonctions permet de mettre à jour l'arborescence de l'interface, un processus appelé recomposition.

Composition plutôt qu'héritage

Les composants Compose sont conçus pour être assemblés plutôt que dérivés par héritage. Par exemple, un bouton avec du texte est créé en combinant un Bouton et un Texte :

Column {
    MessageAccueil("Utilisateur")
    BoutonClickable(onClick = { /* Action */ }) {
        Texte("Cliquez ici")
    }
}

Cette approche favorise la réutilisation et la modularité, évitant les problèmes de composition tels que les composants surchargés.

Source unique de données

Les composants d'entrée, comme ChampTexte, suivent le principe d'une source de données unique. L'état contrôlé garantit que l'interface reflète systématiquement les données :

var contenuTexte by remember { mutableStateOf("") }
ChampTexte(
    value = contenuTexte,
    onValueChange = { nouveauContenu ->
        contenuTexte = nouveauContenu
    }
)

Seule la variable contenuTexte détermine l'affichage, et les modifications sont gérées via des rappels.

Interopérabilité entre Compose et les Views traditionnelles

Utilisation de Views dans Compose

Pour intégrer des composants View dans Compose, utilisez VueAndroid :

@Composable
fun TexteLegacy(texte: String) {
    VueAndroid(
        fabrique = { contexte ->
            TextView(contexte).apply {
                setText(texte)
            }
        },
        miseAJour = { vue ->
            vue.setText(texte)
        }
    )
}

Cette fonction agit comme un pont, créant et mettant à jour les vues traditionnelles.

Réutilisation de layouts XML dans Compose

Pour intégrer des layouts XML existants, activez le ViewBinding et utilisez LiaisonVueAndroid :

@Composable
fun DispositionPersonnalisee() {
    LiaisonVueBinding(LayoutTestBinding::inflate) {
        boutonTest.setOnClickListener {
            // Gestion des clics
        }
    }
}

Intégration de Compose dans des Views

Pour ajouter du contenu Compose dans une interface traditionnelle, utilisez VueCompose :

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/vue_compose"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

// Dans le code Kotlin
findViewById<VueCompose>(R.id.vue_compose).setContent {
    Texte("Contenu Compose")
}

Cette approche permet une migration progressive entre les systèmes d'interface.