관리 메뉴

김종권의 iOS 앱 개발 알아가기

[iOS - swift] 2. CALayer 마스킹 활용 - 특정 뷰 음영 효과 주는 방법 본문

iOS 응용 (swift)

[iOS - swift] 2. CALayer 마스킹 활용 - 특정 뷰 음영 효과 주는 방법

jake-kim 2023. 2. 13. 23:15

1. CALayer 마스킹 활용 - 마스킹하는 기본 방법 (mask, .evenOdd)

2. CALayer 마스킹 활용 - 특정 뷰 음영 효과 주는 방법 <

3. CALayer 마스킹 활용 - 뷰 합치는 방법

가운데 label을 뺀 나머지에는 shadow 이펙트 주기

특정 뷰 음영 효과 구현 방법

  • 1번 글에서 알아본 CAShapeLayer의 .evenOdd를 사용하여 파라미터로 넣어주는 CGRect 영역만 마스킹 되도록 구현
// 1번글 참고: https://ios-development.tistory.com/1273

extension UIView {
    func mask(rect: CGRect, isRectMasking: Bool) {
        // 1. path 인스턴스로 경로 정보 획득
        let path = CGMutablePath()
        if isRectMasking {
            let allRect = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
            path.addRect(allRect)
        }
        path.addRect(rect)
        
        // 2. CAShapeLayer 인스턴스에 위 path 인스턴스 사용
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path
        if isRectMasking {
            shapeLayer.fillRule = .evenOdd
        }
        
        // 3. mask에 shapeLayer 인스턴스 사용
        layer.mask = shapeLayer
    }
}
  • UIImageView를 맨 아래에 놓고, 그 위에 shadowView와 label을 삽입
view.addSubview(imageView)
imageView.addSubview(shadowView)
imageView.addSubview(label)

(현재 상태)

  • 위 UILabel만 shadowView를 마스킹처리
override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    shadowView.mask(rect: label.frame, isRectMasking: true)
}

(완료)

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

* 참고

https://developer.apple.com/documentation/quartzcore/cashapelayerfillrule/1521843-evenodd

Comments