[Swift-TIL] SwiftUI의 View Layout 결정 원리

UIKit은 Auto Layout이 있는데 반면,

SwiftUI의 경우는 Auto Layout 시스템을

직접적으로 사용하지 않고

차체 레이아웃 시스템을 가지고 있다.

이는 선언형 패러다임에 맞게

설계가 된 것이다.

 

struct ContentView: View {
 var body: some View {
   Text("Hello world!")
	•padding(20)
	.background(Color.red)
 }
}

SwiftUI의 경우는 이런식으로

단순한 텍스트에 패딩값과 백그라운드(배경)값을

Modifier로 붙어서 지정되어 있음을 알 수 있다.

 

구조상으로 보면 Root View가 있고,

그 안에 텍스트를 감싸는 Content View가 있다.

여기까지는 단순히 겉과 속의 관계라고 보면 되는데

 

SwiftUI에서 중요한 건,

Content View는

“레이아웃 중립” 상태라는 점이다.

 

레이아웃 중립이란,

그 뷰가 자기 크기를 직접 결정하지 않고

안에 들어 있는 Body의 크기를

그대로 따른다는 뜻이다.

 

struct ContentView: View {
 var body: some View {
   Text("Hello world!")
	•padding(20)
	.background(Color.red)
 }
}

위에서 작성한 코드를 보면

• Text(“Hello world!”)가 먼저 자기 크기를 정하고 (폰트 크기, 글자 길이 등)
• padding(20)이 적용되면서, 텍스트 주변에 20pt 여백 추가
• background(Color.red)는 크기를 바꾸지 않고, 패딩까지 포함한 영역 배경색 입힘
• Content View는 이렇게 완성된 내부 뷰의 크기를 그대로 따라감
• Root View는 다시 Content View의 크기를 반영

결국, 부모 뷰가 크기를 강제로 지정하지 않으면,

자식 뷰의 크기에 따라 부모 뷰의 크기가 결정되는것

이게 SwiftUI 레이아웃의 기본 흐름임을 알아야 한다.

 

 

Root View가 Content View라고 볼때

레이아웃 중립이기에

화면에서 세이프 에어리어를 제외한

전체영역만큼 하위에 제공해 주고자 제한합니다.

 

그럼 Content View도 Layout 중립이기에 정하지 않고

동일하게 하위로 일관합니다.

 

그다음 마주치는건 텍스트에 정의된

Modifier들입니다.

백그라운드와 패딩이죠

먼저마주한 백그라운드도 Layout 중립입니다.

그렇기에 이렇게 또 제한을 Padding에게 넘겨줍니다.

 

Padding은 여기서 각 영역의 20만큼 지정했기에

실제 하위 텍스트에 전체영역에서 20만큼 줄어드는

Layout을 제공하게 됩니다.

 

텍스트는 이제 제공받을 Layout을 이제 다 사용해도 되지만,

별도 프레임으로 크기가 잡혀있지 않다면,

해당 텍스트에 나타낼 글자만큼 필요한 크기를 가져옵니다.

 

또한 별도 위치를 잡지 않는다면

하위View는 Layout에서

센터에 배치하게 됩니다.

 

이제 Text의 크기가 지정되었으니

해당 크기를 다시 Padding에게 반환합니다.

 

Padding은 텍스트의 지정된 크기에서

각영역의 20만큼 더큰 크기로 잡아서

Background에 반환해줍니다.

 

Background는 중립이기에 하위에서 제한받은 크기를 사용합니다.

컬러 또한 해당 크기로 사용되고 적립됩니다.

 

이제 Content View, Root View를 거쳐서

여기서도 해당 하위View에 위치를 별도로 설정하지 않았습니다.

Root View는 하위View를 자신의 center에 배치하게 됩니다.

 

이렇게 SwiftUI의 결정 원리를 알아봤다.

 

이 원리를 잘 이해하였고

알았다면은 쉽게 UI를 구성하고

배치하고 사용하는데 무리는 없을 것이다.