SwiftUI Blur 효과/ UIBlurEffect

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack{
            GeometryReader{ proxy in
                let frame = proxy.frame(in: .global)
                Image("yamon")
                    .resizable()
                    .frame(width: frame.size.width, height: frame.size.height)
                
            }
            
            GeometryReader{ proxy in
                BlurView(style: .light)
                
            }
        }
        .ignoresSafeArea(.all, edges: .all)
    }
}

struct BlurView: UIViewRepresentable {
    let style: UIBlurEffect.Style
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let view = UIVisualEffectView(
            effect: UIBlurEffect(style: style)
        )
        
        return view
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        // do nothing
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

No Blur Effect

BlurView(sytle: .light)

BlurView(style: .dark)

ZStack{
    GeometryReader{ proxy in
        let frame = proxy.frame(in: .global)
        Image("yamon")
            .resizable()
            .frame(width: frame.size.width, height: frame.size.height)

    }
    .ignoresSafeArea(.all, edges:.all

Image위에 Blur 효과를 중첩하여 시각효과를 나타낼 것이므로 ZStack안에서 설정한다.

GemometryReader를 사용하여 Image의 크기에 맞는 frame을 설정한다.

 

struct BlurView: UIViewRepresentable {
	...
}

UIViewRepresentable 프로토콜은 UIKit을 SwiftUI에서 사용하기 위해 SwiftUI 형태의 화면으로 만들기 위한 프로토콜이다.

UIViewd의 화면을 기본적으로 반환하는 makeUIView(context:) -> Self.UIVIewType 과 업데이트 할때 사용되는 updateUIView(Self.UIViewType, context: Self.Context)

두개의 메서드를 구현해야 한다.

    let style: UIBlurEffect.Style
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let view = UIVisualEffectView(
            effect: UIBlurEffect(style: style)
        )
        
        return view
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        // do nothing
    }

style 상수에 UIVlureEffect.Style을 선언해준 후

makeUIView와 updateUIView 메서드를 구현한다. 

이번 연습에서는 초기 화면에 Blur 효과만 적용하는 것을 연습해보기 위해서 updateUIVIew는 구현하지 않았다.

 

GeometryReader{ proxy in
	BlurView(style: .regular)
}

기존 Image위를 BlurView로 덮는다.