Fond d’écran iPhone SE 2022 dans Jetpack Compose

J’aime apprendre de nouvelles choses. C’était la raison pour laquelle je faisais des tutoriels, j’apprenais et ensuite je partageais ce que j’avais appris. Cela m’a permis d’évoluer en tant que designer. De temps en temps, j’y reviens et vous vous souvenez probablement qu’il y a quelques semaines, j’ai publié un tutoriel Photoshop sur la création du fond d’écran iPhone SE. Ensuite, j’ai décidé de le faire dans SwiftUI. J’ai partagé celui-là la semaine dernière. Cette semaine, j’ai décidé de faire la même chose mais cette fois dans Jetpack Compose pour Android. Je ne l’ai jamais utilisé auparavant, mais d’une certaine manière, il est assez similaire à SwiftUI, un peu plus verbeux, mais l’idée est la même. Alors vérifiez-le.

Étape 1

Démarrez un nouveau projet Android Studio et sélectionnez l’activité Composer.

Étape 2

Créons maintenant le rectangle à utiliser comme base.

@Composable
fun Bar() {
   Box(
       modifier = Modifier
           .fillMaxHeight()
           .fillMaxWidth()
           .clip(RectangleShape)
           )
   )
}

Étape 3

Afin d’ajouter le dégradé, j’ai découvert que j’avais besoin d’un moyen de convertir l’hexadécimal en couleur jetpack. Une bonne recherche Google et StackOverflow avaient la réponse. J’ai utilisé cet objet qui fait le travail.

object HexToJetpackColor {
   fun getColor(colorString: String): Color {
       return Color(android.graphics.Color.parseColor("#" + colorString))
   }
}

Étape 4

Pour le dégradé vous utilisez le modificateur .background avec « brush », puis ajoutez simplement les couleurs que vous voulez en hexadécimal.

@Composable
fun Bar() {
   Box(
       modifier = Modifier
           .fillMaxHeight()
           .fillMaxWidth()
           .clip(RectangleShape)
           .background(
               brush = Brush.verticalGradient(
                   colors = listOf(
                       getColor("005a3ec3"),
                       getColor("5a3ec3"),
                       getColor("eba5c5"),
                       getColor("e1d4b7"),
                       getColor("e9b74c"),
                       getColor("cf1403"),
                       getColor("00cf1403")

                   )
               )
           )
   )
}

Étape 5

Créons maintenant une autre composition et ajoutons les multiples barres. Pour ce faire j’ai ajouté une Row() puis à l’intérieur de la rangée j’ai ajouté une Column() dont je vais manipuler le poids et la hauteur. À l’intérieur de cette colonne, je vais ajouter la barre.

Voici le code. Remarquez que j’ai ajouté un arrière-plan dégradé pour que la rangée corresponde au papier peint d’origine.

@Composable
fun BarStackManual() {
   Row(
       verticalAlignment = Alignment.CenterVertically,
       modifier =
       Modifier
           .fillMaxSize()
           .background(
               brush = Brush.verticalGradient(
                   colors = listOf(
                       getColor("1a0047"),
                       getColor("300604")
                   )
               )
           )
   ) {
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(1f).zIndex((6).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
   }
}

Étape 6

Ajoutez autant de colonnes (barres) que vous le souhaitez. Assurez-vous de modifier la fraction .fillMaxHeight() et le .zIndex() afin que les plus grands soient au-dessus des plus petits. Voici l’échantillon :

@Composable
fun BarStackManual() {
   Row(
       verticalAlignment = Alignment.CenterVertically,
       modifier =
       Modifier
           .fillMaxSize()
           .background(
               brush = Brush.verticalGradient(
                   colors = listOf(
                       getColor("1a0047"),
                       getColor("300604")
                   )
               )
           )
   ) {
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(1f).zIndex((6).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(.9f).zIndex((5).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(.8f).zIndex((4).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(.7f).zIndex((3).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(.6f).zIndex((2).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(.7f).zIndex((3).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(.8f).zIndex((4).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(.9f).zIndex((5).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
       Column(
           modifier = Modifier.weight(1f).fillMaxHeight(1f).zIndex((6).toFloat())
       ) {
           Bar(shape = RectangleShape)
       }
   }
}

Conclusion

C’est à peu près tout. Vous pouvez rendre les barres dynamiques en créant une boucle for. Mais alors c’est à vous de décider. Ce n’était qu’un petit exemple de la façon dont il est amusant de construire quelque chose dans Jetpack Compose. Vous pouvez télécharger le code complet sur GithubGenericName.

Découvrez-le sur Github