2023/11/22

【Swift UI】Viewにぼかし(blur)をつける方法！background/Material型

この記事からわかること

Swift UIでViewにぼかしをつける方法
blurモディファイアの使い方
backgroundモディファイアでぼかしを実装するには？
Material型の種類

index

[open]

Viewにぼかしをつける方法
backgroundを使用してぼかしをつける

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

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

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.1
Swift：5.9
macOS：Sonoma 14.1

Viewにぼかしをつける方法

公式リファレンス：blur

Swift UIでViewにぼかしをつけるにはblurモディファイアを使用します。引数radiusにはぼかし度合いをopaqueでは透明にするか否かを指定することができます。

定義

func blur(
    radius: CGFloat,
    opaque: Bool = false
) -> some View

使用例

ZStack {
    Color.orange
        .ignoresSafeArea()
    
    Text("Hello")
        .foregroundStyle(.black)
        .padding()
        .background(.white)
        .blur(radius: 2)
}

backgroundを使用してぼかしをつける

公式リファレンス：Material

backgroundモディファイアにMaterial型の値を渡すことでも半透明のぼかしのような実装が可能です。

ZStack {
    
    HStack {
        Color.gray
            .ignoresSafeArea()
        Color.orange
            .ignoresSafeArea()
    }
    
    VStack {
        Text("ultraThinMaterial")
            .padding()
            .background(.ultraThinMaterial)
        Text("thinMaterial")
            .padding()
            .background(.thinMaterial)
        Text("regularMaterial")
            .padding()
            .background(.regularMaterial)
        Text("thickMaterial")
            .padding()
            .background(.thickMaterial)
        Text("ultraThickMaterial")
            .padding()
            .background(.ultraThickMaterial)
    }
}