Auto Layout 을 통해 상호 작용할 수 있는 직사각형꼴의 영역

언제 쓸 수 있는가?

• 빈 UIView 를 제약 잡기용 컨테이너로 사용해본적이 있나요? 저는 있어요...✋🏻
  • 이런 빈 View 를 공식 문서에서는 ‘Empty PlaceHolder View’ 라고 표현해요.
• 빈 UIView 대신 UILayoutGuide 를 사용하면, 뷰 생성에 필요한 오버헤드를 줄일 수 있습니다.
• 레이아웃 가이드는 정확히 제약잡기용 역할만을 수행해줍니다!!!

가까이서도 레이아웃 가이드를 발견할 수 있다 👀

• 스크롤 뷰
  • 자세히는 몰라도 저저 레이아웃가이드에 제약을 잡아주어야하겠다는 감이 이제는 와야한다

간단한 레이아웃 가이드를 구현해보자 🧪

구현 내용

• 루트 뷰에 [ leading, top, trailing, bottom ] 에서 10씩 여백을 둔 LayoutGuide 를 만든다.
• RedView 를 이 LayoutGuide 에 [ leading, top , trailing, bottom ] 여백 0 으로 맞추어보자!

결과물

class ViewController: UIViewController {
    
    var layoutGuide: UILayoutGuide!
    
    var redView: UIView = {
        $0.backgroundColor = .red
        return $0
    }(UIView())
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
				/// 🔥 기본적으로 전달인자 없는 생성자를 사용하며 인스턴스를 생성한다.
        self.layoutGuide = UILayoutGuide()

				/// 🔥 LaytoutGuide 를 view 에 등록해준다.
        view.addLayoutGuide(layoutGuide)
        
        view.addSubview(redView)
        
        redView.translatesAutoresizingMaskIntoConstraints = false
        
        /// 🔥 LayoutGuide 내부 제약 잡기
				/// - 레이아웃 가이드를 이용해 내부 뷰의 레아이웃을 잡는다.
        let redLeaingConstraint = redView.leadingAnchor.constraint(equalTo: layoutGuide.leadingAnchor)
        
        let redTrailingConstraint = redView.trailingAnchor.constraint(equalTo: layoutGuide.trailingAnchor)
        
        let redTopConstraint = redView.topAnchor.constraint(equalTo: layoutGuide.topAnchor)
        
        let redBottomConstraint = redView.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor)
        
        NSLayoutConstraint.activate([redLeaingConstraint, redTopConstraint, redBottomConstraint, redTrailingConstraint])
        
        /// 🔥 LayoutGuide 외부 제약 잡기
        /// - 레이아웃가이드 자체의 레이아웃을 잡아준다.
        let leadingConstraint = layoutGuide.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10)
        
        let topConstraint =
            layoutGuide.topAnchor.constraint(equalTo: view.topAnchor, constant: 10)
        
        let trailingConstraint =
            layoutGuide.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10)
        let bottomConstraint =
            layoutGuide.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10)
        
        NSLayoutConstraint.activate([leadingConstraint, topConstraint, trailingConstraint, bottomConstraint])
    }
}

Interface Builder Library 에서는 발견할 수 없었습니다