Formation Android

TP 2 - Jetpack Compose

Compose Activity

• Créez une nouvelle activity “Empty Activity” (en compose cette fois) appelez la ComposeActivity
• L’IDE devrait automatiquement compléter app/build.gradle.kts pour configurer Compose (buildFeatures, dependencies, etc) et l’ajouter au AndroidManifest.xml
• Adaptez votre AndroidManifest pour en faire notre activity principale à la place de l’ancienne, et relancez l’app pour vérifier: il faut déplacer <intent-filter>...</intent-filter> de l’ancienne activity à la nouvelle
• Renommez Greeting en ListScreen et GreetingPreview en ListPreview et supprimez l’argument name

Vous devriez avoir quelque chose comme ça:

class ComposeActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //...
        setContent {
            TodoTheme {
                ListScreen()
            }
        }
    }
}

• Personnalisez un peu votre Theme en fonction de votre projet perso !

• affichez une liste d’éléments avec Compose (utilisez LazyColumn et items), avec des éléments, c’est légerement plus simple qu’une RecyclerView 🙃 :

LazyColumn{
    items(100) {
        Text(text = "Item #$it")
    }
}

• Lancez l’app et essayez de scroller la liste: attention, on ne voit pas les contours de la liste, mais elle ne prends pas toute la largeur actuellement donc le scroll ne marche que si on scroll précisément sur les textes !
• Pour régler ça, ajoutez un Modifier.fillMaxWidth() à la LazyColumn
• Ajoutez un Modifier.padding(16.dp) à la LazyColumn pour ajouter un peu d’espace autour
• Essayez à nouveau de scroller, vous devriez pouvoir le faire aussi en dehors des textes maintenant
• Espacez un peu les éléments de la liste en lui passant verticalArrangement = Arrangement.spacedBy(8.dp) comme argument
• Personnalisez un peu l’affichage comme vous le souhaitez (couleurs, taille de texte, …)

Remember

On va maintenant ajouter un peu d’interactivité sur notre liste.

• Ajoutez une variable items en haut de ListScreen:

var items by remember { mutableStateOf(List(100) { "Item #$it" }) }

• faites les imports suggérés par l’IDE