• 2022/12/5
• 3分

【Swift UI】影をつける方法！shadowの使い方

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIでビューに影をつける方法

参考文献：shadow

Swift UIではshadowモディファイアを使用することで指定したビューに対して影のような背景色を簡単に付与することができます。

func shadow(
    color: Color = Color(.sRGBLinear, white: 0, opacity: 0.33), // カラー
    radius: CGFloat, // ぼかし具合
    x: CGFloat = 0, // X方向へのオフセット
    y: CGFloat = 0  // Y方向のオフセット
) -> some View

引数から影の色やぼかし具合、サイズを指定できます。色は未指定の場合は自動で影っぽい色(半透明の黒)が適応されます。

shadowモディファイアの使い方

shadowモディファイアはTextなどのビューから呼び出して使用します。

Text("content")
.shadow(color: .gray,radius: 3, x: 2, y: 2)

複数重なった要素に影をつける

参考文献：compositingGroup

VStackなどで複数の要素が連なっているビュー(親ビューの中に子ビューがある場合)に対して影を付与したい場合はcompositingGroupを使ってビューを1つのグループとしてからshadowを呼び出します。

.compositingGroup()
.shadow(color: .gray,radius: 3, x: 2, y: 2)

clipped

また別の方法としてclippedでも同様に親ビューの中に子ビューがある場合でも親のみに影をつけることが可能です。

.clipped()
.shadow(color: .gray,radius: 3, x: 2, y: 2)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。