SwiftUI | View 의 사이즈 조절. Frame, Padding, Spacer, GeometryReader

iPhone 사이즈가 다양해지고 나타난 AutoLayout 의 격변기를 지나,
SwiftUI의 레이아웃을 다시 처음부터 배워야 할 필요가 생겼네요 😇

SwiftUI의 View의 배치와 구성, 레이아웃은 UIKit에서의 StackView와 비슷하게 생각하시면 쉬울 것 같아용

View 의 사이즈 조절에 대해 알아보러 가시죠 ! 고고씽 ~


Frame

SwiftUI는 AutoLayout 과 달리, 본인이 속한 부모뷰와 본인의 콘텐츠에 동시에 영향을 받아 자동으로 Layout 이 결정됩니다.


View 자체가 본인의 사이즈를 조절하기 위해서는 frame 조절자를 사용하여야 합니다.

💫 frame 조절자는 기본 설정으로 Safe area을 준수해요.
Safe area 를 무시할 필요가 있을 때에는 edgesIgnoringSafeArea 를 사용해주세용


frame 조절자에는 두 종류가 있습니다.
1. 고정된 사이즈 정의
2. 최소/최대/이상적 사이즈 정의

물론 본인의 구현하고자 하는 View에 따라 적절하게 사용해야되겠지요 ~

1. 고정된 사이즈 정의

func frame(width: CGFloat? = nil, height: CGFloat? = nil, alignment: Alignment = .center) -> some View

– UIKit 에서와 같이 View에게 고정된 가로, 세로 값을 지정할 수 있습니다.


2. 최소/최대/이상적 사이즈 정의

func frame(minWidth: CGFloat? = nil, idealWidth: CGFloat? = nil, maxWidth: CGFloat? = nil, minHeight: CGFloat? = nil, idealHeight: CGFloat? = nil, maxHeight: CGFloat? = nil, alignment: Alignment = .center) -> some View

– 1 보다는 조금 더 SwiftUI스러운 방식이라 생각해요 !
– 이미지와 텍스트처럼 내용물에 따라 사이즈가 유동적으로 변해야할 때 사용하는 메소드예요.

– 직접 사용해보니 ideal, min 보다는 max가 우선되네요 !




Padding, Spacer

Padding과 Spacer를 알기위해 StackView에 대해 같이 알아보죠.


구조체(struct) View의 body에 복수의 View를 넣기 위해서는 Stack 을 사용해야해요.

복수의 View 사이의 간격, 사이즈를 조절하기 위해서는 Stack 내에서의 간격을 조절하는 Spacer.
Stack 내 특정한 View가 주변의 간격을 설정할 때에는 padding 이 필요해요.


Stack
VStack(세로), HStack(가로), ZStack(3차원) 의 세 종류가 있어요.
– 소속될 수 있는 하위 View의 갯수는 10개로 제한되어 있어요.
– 10개 이상의 View가 필요할 경우. Group으로 따로 묶어서 소속시켜야 해요.
Stack 에 소속된 View들의 간격은 Spacer로 동일하게 조정할 수 있어요.
Stack 내 특정한 뷰의 상하좌우 간격을 각각 조정할 때에는 padding 수정자를 사용해요.


SpacerPadding 활용 예.

Spacer
Stack에서 View들 사이의 공간을 추가하기 위한 컴포넌트예요.
최솟값만 지정할 수 있습니다.
– 간격은 최솟값을 지키면서 부모 Stack의 Width와 함께 추가된 View에 따라서 자유자재로 늘어나거나 줄어들어요.



GeometryReader

https://developer.apple.com/documentation/swiftui/geometryreader

GeometryReader는 SwiftUI 에서 View가 포함된 부모뷰(컨테이너)의 크기를 기준으로
View의 frame 조절하는 방법입니다.

GeometryReader 활용 예.



마치며

Frame 은 View 본인의 height, width. 사이즈를 지정할 때.
Padding 은 View 의 top, bottom, leading, trailing 를 지정할 때.
Spacer 는 Stack 에 소속된 View들 사이의 일정한 거리를 지정할 때.
GeometryReader 는 View의 부모뷰의 사이즈를 기준으로 본인의 사이즈를 조절할 때.

이렇게 구분하시면 될 것 같아요.

저도 익숙하지 않아서 원하는 뷰를 만들때 Frame을 사용했다 Padding 을 사용했다 대혼란이지만,
AutoLayout 때처럼 몇 번 사용해보면 익숙해질거라 믿어요 !


그럼 ~ 안녕히계세요 여러분 ~ 😇

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중