Layout Guide Property

sanghoon Ahn·2024년 5월 25일

SafeArea()UILayoutGuide UIkit Xcode directionalLayoutMargins layoutMargins layoutMarginsGuide safeAreaInsets safeAreaLayoutGuide swift

iOS

목록 보기

20/20

오늘은 자주 보았지만 알쏭달쏭 헷갈리고 궁금한 내용이 있어 정리를 해보려합니다.

바로 safeAreaLayoutGuide vs safeAreaInsets 입니다.

둘이 좀 비슷하게 생겼고 .. 둘 다 UIView의 instance property라서 쉽게 목격할 수 있습니다.

그러면 어떤 차이점이 있고, 어떤 상황에서 사용할까요?

궁금해졌으니 알아봐야죠? 출발하시죠! 🏃🏻

SafeArea

차이를 알아보려면 먼저 공통 키워드인 safe area를 알아보겠습니다.

Apple에서 정의하는 safe area는 상단 Status bar와 하단 TabBar 영역을 제외한 영역을 safe area로 지칭하며, UI를 배치하는데 도움을 주는 영역이라고 합니다.

safe area는 상단 Notch가 생기면서 생긴 개념인데요,

상단 Notch가 없을 때에는 UILayoutGuide인 Top, Bottom LayoutGuide만으로도 NavigationBar 혹은 TabBar로 인한 View 배치에 영향이 없게 할 수 있었습니다.

UILayoutGuide

그러면 또 UILayoutGuide는 무엇이냐 ..!!!
단어 그대로 Layout을 위한 Guide라고 생각해주시면 될 것 같습니다.

실제 정의도 Auto Layout과 intreact할 수 있는 rectangular area거든요.

위와같이 NavigationBar 혹은 TabBar로 인한 영역 때문에 View가 가려지지 않게 배치하려면, Top/BottomLayoutGuide 까지 View를 배치하면 됬겠죠?

iPhone with TouchID	iPhone with FaceID

iOS 11이 등장하면서 상단 Notch가 생기고, Top/BottomLayoutGuide로는 충족되지 않는 영역이 존재하게 됩니다.

landscapeLeft	landscapeRight

TopLayoutGuide 로 잘 제한되었던 Notch 영역이 Landscape일 때는 침범하게 되었습니다.
따라서 새롭게 View를 배치할 영역을 지정해야 했고, 그에따라 safeAreaLayoutGuide이 생기게 되었습니다.

safeAreaLayoutGuide

직접 확인해보면 확실히 알겠죠?

portrait

iPhone with TouchID	iPhone with FaceID

landscapeRight

iPhone with TouchID	iPhone with FaceID

layoutMarginsGuide

그럼 다음으로 넘어가서 비스무리한 layoutMarginsGuide입니다.

동일하게 UILayoutGuide Type인것과 정의로 미루어보아 view를 배치할 때 도움이 되는 녀석일 것 같습니다.

위에서 직접 보았듯이 safeAreaLayoutGuide보다 portrait/landscape 상황에서의 좌/우 여백이 있습니다.

왜 있는거고, 어떤 상황에서 쓰일까요? 🧐

On iOS, what are the differences between margins, edge insets, content insets, alignment rects, layout margins, anchors...?

이곳에서 답을 얻을 수 있었는데요, layoutMarginsGuide는 View가 가지고 있는 임의의 area이며, margin을 가진 area이기 때문에 anchor를 사용하여 쉽게 margin을 나타낼 수 있다고 합니다.

즉 아래처럼 사용이 가능하다는것인데요

someButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8)

//can replace code with below

someButton.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor)

그렇다면 정말 8만큼의 여백이 있을까요?

let outer = UIView()
outer.layer.borderWidth = 1
outer.layer.borderColor = UIColor.blue.cgColor
view.addSubview(outer)
outer.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    outer.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    outer.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    outer.heightAnchor.constraint(equalToConstant: 100),
    outer.widthAnchor.constraint(equalToConstant: 100)
])

let inner = UIView()
inner.backgroundColor = .red
outer.addSubview(inner)
inner.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    inner.leadingAnchor.constraint(equalTo: outer.leadingAnchor),
    inner.trailingAnchor.constraint(equalTo: outer.trailingAnchor),
    inner.topAnchor.constraint(equalTo: outer.topAnchor),
    inner.bottomAnchor.constraint(equalTo: outer.bottomAnchor)
])

실제로 View를 만들고 딱 맞게 위치시켜보았습니다.
이제, layoutMarginsGuide로 anchor를 바꾸어보면..

NSLayoutConstraint.activate([
    inner.leadingAnchor.constraint(equalTo: outer.layoutMarginsGuide.leadingAnchor),
    inner.trailingAnchor.constraint(equalTo: outer.layoutMarginsGuide.trailingAnchor),
    inner.topAnchor.constraint(equalTo: outer.layoutMarginsGuide.topAnchor),
    inner.bottomAnchor.constraint(equalTo: outer.layoutMarginsGuide.bottomAnchor)
])

정말 여백이 생겼네요 ;;;
그러면 진짜 딱 8일까요..?

NSLayoutConstraint.activate([
    inner.leadingAnchor.constraint(equalTo: outer.leadingAnchor, constant: 8),
    inner.trailingAnchor.constraint(equalTo: outer.layoutMarginsGuide.trailingAnchor),
    inner.topAnchor.constraint(equalTo: outer.layoutMarginsGuide.topAnchor),
    inner.bottomAnchor.constraint(equalTo: outer.layoutMarginsGuide.bottomAnchor)
])