Shadows In Compose | Jetpack Compose Tips

ADHITHYA RAMAKUMAR: Users love apps with depth, dimension, and realism.

Un des moyens les plus simples mais efficaces pour y parvenir, ce sont les ombres.

One of the easiest, yet effective, ways to achieve this is shadows.

Pendant longtemps, nos mécanismes de rendu des ombres étaient limités à différents niveaux d'élévation.

For a long time, our mechanisms for rendering shadows were constrained to different elevation levels.

Même si tu peux toujours utiliser ces préréglages, ils manquaient historiquement d'un moyen simple pour un contrôle fin comme celui que tu as dans les outils de design populaires.

While you can still leverage these presets, they historically lacked a straightforward bot for fine-grained control that you have in popular design tools.

Cependant, nos dernières API Compose nous offrent maintenant un excellent niveau de précision avec deux nouveaux modificateurs puissants, les ombres portées et les ombres intérieures.

However, our latest Compose APIs now grant us a great level of precision with two new powerful modifiers, drop shadows and inner shadows.

Dans les prochaines minutes, on va aller au-delà de l'élévation rudimentaire pour construire des interfaces vraiment réjouissantes, tout grâce aux ombres.

In the next few minutes, we will go beyond rudimentary elevation to construct truly delightful user interfaces, all through shadows.

Très bien, plongeons dedans.

All right, let's dive in.

[MUSIC PLAYING]

[MUSIC PLAYING]

En général, les spécifications de design pour les ombres tournent autour de quatre paramètres fondamentaux.

Typically, design specs for shadows revolve around four fundamental parameters.

Ils incluent les décalages x et y, le rayon de flou, l'étendue et, bien sûr, la couleur.

These include the x and y offsets, the blur radius, the spread, and, of course, the color.

Le modificateur d'ombre portée fournit une interface pour contrôler chacun de ces aspects via son paramètre shadow.

The drop shadow modifier provides an interface for you to control each of these aspects through its shadow parameter.

Voyons comment utiliser l'ombre portée. Le paramètre radius dicte la douceur et la diffusion de ton flou.

Let's look at how to use drop shadow. The radius parameter dictates the softness and diffusion of your blur.

Spread contrôle l'expansion ou la contraction de la géométrie de l'ombre.