Shadows In Compose | Jetpack Compose Tips

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

これらのプリセットを引き続き活用できますが、歴史的には、一般的なデザインツールにあるような、きめ細かな制御のための簡単な方法が不足していました。

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

しかし、最新のCompose APIにより、2つの新しい強力なモディファイア、ドロップシャドウとインナーシャドウを使用して、非常に高い精度が得られるようになりました。

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

これから数分間で、初歩的な高さを超えて、影を通して、真に魅力的なユーザーインターフェースを構築していきます。

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

さて、始めましょう。

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

[MUSIC PLAYING]

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

これから数分で、影を使い、基本的な高低差を超えて、本当に魅力的なユーザーインターフェースを構築していきます。

All right, let's dive in.

さて、始めましょう。

[MUSIC PLAYING]

[音楽再生中]

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

通常、影のデザイン仕様は、4つの基本的なパラメータを中心に展開されます。

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

これには、xとyのオフセット、ぼかし半径、広がり、そしてもちろん色が含まれます。

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

ドロップシャドウモディファイアは、影のパラメータを通じてこれらの各側面を制御するためのインターフェースを提供します。

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

ドロップシャドウの使い方を見てみましょう。半径パラメータは、ぼかしの柔らかさと拡散を決定します。