[AutoLayout] LayoutGuide 활용하기

@MainActor class UILayoutGuide : NSObject

공식문서에 따르면 LayoutGuide는 AutoLayout과 상호 작용할 수 있는 직사각형 영역입니다. 이전에 'dummy view', 'placeholder view'와 같이 원하는 Layout을 위해 만들었던 View들 대신, 더 안전하고, 효율적인 직사각형 영역을 만들어주는 방식입니다.

 

주로 사용해본 UIKit의 Layout Guide 들은 간단하게 살펴보고, 직접 UILayoutGuide를 만드는 것을 중점적으로 글을 작성하겠습니다.

 

제공해주는 Layout Guides

Safe Area layout guide

첫 번째로 가장 많이 사용하고 있는 Safe Area layout guide입니다. navigation bar, tab bar, tool bar를 덮지 않는 영역이고, notch 또한 덮지 않는 영역을 제공해 주며, 아주 유용하게 사용되고 있습니다. 

Layout Margin guide

이름에서 알 수 있듯 약간의 margin이 들어간 View를 배치할 수 있게 도와주는 Layout Guide입니다. 

Readable Content guide

이 Layout Guide는 글이 많은 앱에서 아주 유용하게 사용됩니다. 사람이 머리를 돌리지 않고 읽을 수 있는 글의 길이 까지만 보여줄 수 있게 View를 배치할 수 있게 도와주는 Layout Guide입니다.

 

직접 Layout Guide를 만들어보자

두 View 사이에 공간을 주는 Layout Guide를 직접 만들어 보겠습니다. 

 

우선 UILayoutGuide를 선언하고, 해당 Layout Guide에 가운데 공간을 줄 수 있게 constraint를 만들어줍니다.

let space = UILayoutGuide()
view.addLayoutGuide(space)

space.widthAnchor.constraint(equalToConstant: 16).isActive = true
space.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

그리고 좌, 우에 있을 View를 만들어 constraint를 만들어 줍니다.

leftView.translatesAutoresizingMaskIntoConstraints = false
leftView.backgroundColor = .systemRed

rightView.translatesAutoresizingMaskIntoConstraints = false
rightView.backgroundColor = .systemBlue

view.addSubview(leftView)
view.addSubview(rightView)

NSLayoutConstraint.activate([
  leftView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
  leftView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
  leftView.trailingAnchor.constraint(equalTo: space.leadingAnchor),
  leftView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  
  rightView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
  rightView.leadingAnchor.constraint(equalTo: space.trailingAnchor),
  rightView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
  rightView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
])

 

 

여기서 중요한 부분은 

`leftView.trailingAnchor.constraint(equalTo: space.leadingAnchor)`

`rightView.leadingAnchor.constraint(equalTo: space.trailingAnchor)`

이 두 부분입니다. leftView의 trailing은 space의 leading, rightView의 leading은 space의 trailing에 걸어준 것을 확인할 수 있습니다. 실행하면

 

이런 화면을 볼 수 있습니다! 👍

 

dummy view, placeholder view 대신에 UILayoutGuide를 사용해야하는 제일 큰 이유는 UILayoutGuide를 사용하면 View를 view hierarchy에 추가하지 않고도, 그 역할을 수행할 수 있기 때문인 것 같습니다. 이로 인해 dummy view를 그리는 비용도 감소하고, 실수도 줄일 수 있을 것 같습니다.