[iOS - swift] overlay 주는 방법, 색상 섞는 방법, 뷰 위에 딤드효과 주는 방법 (compositingFilter, screenBlendMode)

overlay 주는 방법

• 보통 아래와 같은 뷰가 있을 때, 아래 뷰에 흰색을 섞고 싶은 경우?

• 보통은 black색상에 alpha값을 낮추어 위에 올리는 형태로하는데, 이 방법 외에도 색상을 혼합할 수 있는 방법이 존재

compositioningFilter 개념

• compositioningFilter는 CALayer의 프로퍼티이며, 이 값을 사용하여 계층상 이 layer 앞에 있는 뷰와의 혼합이 가능

https://developer.apple.com/documentation/quartzcore/calayer/1410748-compositingfilter

• 아래처럼 overlayView를 만들고, 이 layer의 compositingFilter에 "screenBlendMode"를 입력해주고 이 뷰를 addSubview하면 색상이 혼합됨

let overlayView = UIView()
overlayView.backgroundColor = .lightGray
overlayView.frame = aView.bounds
overlayView.layer.compositingFilter = "screenBlendMode"
targetView.addSubview(overlayView)

(색상이 섞인것을 확인 가능)

(전체 코드)

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let aView = UIView()
        aView.backgroundColor = .red
        aView.frame = CGRect(x: 50, y: 50, width: 200, height: 200)
        self.view.addSubview(aView)
        
        let label = UILabel()
        label.text = "김종권의 iOS 앱 개발\n알아가기"
        label.textColor = .white
        label.textAlignment = .center
        label.frame = aView.bounds
        aView.addSubview(label)
        
        let overlayView = UIView()
        overlayView.backgroundColor = .lightGray
        overlayView.frame = aView.bounds
        overlayView.layer.compositingFilter = "screenBlendMode"
        aView.addSubview(overlayView)
    }
}

• 이 밖에도 compositingFilter에는 여러가지 값을 사용할 수 있는데, 이 값은 애플 문서 참고

https://developer.apple.com/library/archive/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/uid/TP30000136-SW71

* 참고

https://developer.apple.com/library/archive/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/uid/TP30000136-SW71