[iOS - swift] 블러 효과, 색상 필터링 효과 주는 방법 (UIVisualEffectView, UIBlurEffect, UIVibrancyEffect)

UIVisualEffectView 개념

• 블러 효과나 뷰에 생동감을 구현하는 뷰
• UIVisualEffectView를 aView에 addSubview하게되면, aView에 효과가 적용되는 원리
  • ex) 블러효과 UIVisualEffectView를 aView에 addSubview하면 aView에 블러효과가 적용

https://developer.apple.com/documentation/uikit/uivisualeffectview

블러 효과 UIBlurEffect

• 예제 코드)

class ViewController: UIViewController {
    let backgroundImageView = {
        let backgroundImageView = UIImageView(image: UIImage(systemName: "circle.fill"))
        backgroundImageView.contentMode = .scaleAspectFill
        return backgroundImageView
    }()
    let label = {
        let titleLabel = UILabel()
        titleLabel.text = "iOS 앱 개발 알아가기 Blur 효과"
        titleLabel.textColor = .black
        titleLabel.font = UIFont.boldSystemFont(ofSize: 24)
        titleLabel.sizeToFit()
        return titleLabel
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(backgroundImageView)
        backgroundImageView.frame = view.bounds
        
        setLightBlur(blurEffect: .light)
    }
    
    private func setLightBlur(blurEffect: UIBlurEffect.Style) {
    	// TODO: 
    }
}

• UIVisualEffectView를 만든 후 UIBlurEffect 프로퍼티를 주입해주고 이 뷰를 backgroundImageView에 addSubview하여 블러효과 적용

setLightBlur(blurEffect: .light)

private func setLightBlur(blurEffect: UIBlurEffect.Style) {
    let blurEffect = UIBlurEffect(style: blurEffect)
    let effectView = UIVisualEffectView(effect: blurEffect)
    effectView.frame = view.bounds
    
    backgroundImageView.addSubview(effectView)
    effectView.contentView.addSubview(label)
    label.center = view.center
}

 

• 블러 스타일 UIBlurEffect.Style
  • UIBlurEffect.Style 타입이 존재

let blurEffect = UIBlurEffect(style: .light) // <-
let effectView = UIVisualEffectView(effect: blurEffect)

UIBlurEffect 스타일

• 크게 4가지로 분류: Adatpable / Light / Dark / Addtional
• Adatpable: 네이밍이 -Material 로 끝나는 것들
  • 주로 밝은 배경에 사용
  • 텍스트와 같은 내용을 강조하는 데 적합
  • 뒷 배경이 모호하게 흐릿하게 표시

Adatpable 스타일: 이름이 -Material 로 끝나는 것들

• Light
  • 어두운 배경에 사용
  • 주로 밝은 텍스트를 포함하는 뷰 위에 적용하여 텍스트의 가독성을 높이기 위해 사용
  • 뒷 배경이 어둡게 흐릿하게 표시

Light 스타일: 이름이 -Light로 끝나는 것들

• Dark
  • 밝은 배경에 사용
  • 다른 요소와 대비를 높이는 데 사용
  • 뒷 배경이 가장 밝고 흐릿하게 표시

Dark 스타일: 이름이 -Dark로 끝나는 것들

• Additional
  
  • 객체의 주변을 강조하려는 경우에 사용
  • 객체 주변에 더 강력한 블러 효과를 생성하여 객체를 부각시키는 효과

Additional 스타일: 이름이 간결한 것들

컬러 효과 UIVibrancyEffect

• 검정색의 UILabel 폰트 색상을 뒷 배경의 blur와 연관지어 색상을 변경되도록 하는 효과
  • 폰트 색상에 영향받지 않고 오직 뒷 배경의 색상에 영향이 받으로 폰트 색상이 black이건, blue이건 영향 x

• UIVisualEffectView의 blurEffect 값에 UIVibrancyEffect인스턴스를 주입해주면 구현 완료

setColorEffect(blurEffectStyle: .dark)

private func setColorEffect(blurEffectStyle: UIBlurEffect.Style) {
    let blurEffect = UIBlurEffect(style: blurEffectStyle)
    let colorEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let effectView = UIVisualEffectView(effect: colorEffect)
    effectView.frame = view.bounds

    backgroundImageView.addSubview(effectView)
    effectView.contentView.addSubview(label)
    label.center = view.center
}

• 뒷 배경을 흐리게 만들고, 컬러 효과까지 사용하면 UILabel이 더욱 부각시킬 수 있는 효과

setLightBlur(blurEffectStyle: .light)
setColorEffect(blurEffectStyle: .dark)

private func setLightBlur(blurEffectStyle: UIBlurEffect.Style) {
    let blurEffect = UIBlurEffect(style: blurEffectStyle)
    let effectView = UIVisualEffectView(effect: blurEffect)
    effectView.frame = view.bounds
    
    backgroundImageView.addSubview(effectView)
    effectView.contentView.addSubview(label)
    label.center = view.center
}
private func setColorEffect(blurEffectStyle: UIBlurEffect.Style) {
    let blurEffect = UIBlurEffect(style: blurEffectStyle)
    let colorEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let effectView = UIVisualEffectView(effect: colorEffect)
    effectView.frame = view.bounds
    
    backgroundImageView.addSubview(effectView)
    effectView.contentView.addSubview(label)
    label.center = view.center
}

블러 효과와 컬러 효과를 사용하여 UILabel 돋보이게 구현

* 전체 코드: https://github.com/JK0369/ExUIVisualEffectView

* 참고

https://developer.apple.com/documentation/uikit/uiblureffect/style#3234054

https://developer.apple.com/documentation/uikit/uivisualeffectview