[iOS]UIView Mask를 이용해 view 일부만 표시하기

카메라 일부분만 바코드 인식이 되도록 제한을 줘서, 화면 ui를 위와 같이 바코드 인식이 제한된 범위만 어둡게 바꿔주고 싶었다. 구글링을 통해 UiView의 mask 함수를 찾았지만, 해당 함수를 사용하면 내가 원하는 ui가 아니라 정반대로 바코드 인식 범위만 어둡게 변했다. 

<mask 함수 실행 시 defult ui와(왼쪽) 원래 구현하려 한  ui(오른쪽)>

1. backgroundView 생성

Main.storyboard에서 예시 사진과 같이 정사각형 이외의 부분을 어둡게 처리해주기 위해서 alpha값(투명도) 0.5 정도의  backgroundView를 만들어준다.

2. 해당 Contoroller에서 소스코드 추가

import UIKit class ViewController:UIViewController{ override func viewDidLoad() { super.viewDidLoad() // 화면의 정가운데에 폰의 세로 모드 시 가로 길이(짧은 화면 길이)의 60퍼센트의 크기의 정사각형을 만든다 let rect = CGRect(x:view.frame.size.width*0.2,y:start,width:view.frame.size.width*0.6, height:view.frame.size.width*0.6) mask(viewToMask: backgroundView, maskRect: rect, invert: true) } func mask(viewToMask: UIView, maskRect: CGRect, invert: Bool = false) { let maskLayer = CAShapeLayer() let path = CGMutablePath() if (invert) { // invert True 시 Mask 반전 path.addRect(CGRect(x:0,y:0,width:view.frame.size.width, height:view.frame.size.height)) } path.addRect(maskRect) maskLayer.path = path if (invert) { maskLayer.fillRule = .evenOdd } // Set the mask of the view. viewToMask.layer.mask = maskLayer; } }