[iOS/SwiftUI] View, Stack 기본 정리

SwiftUI 는 UIKit 과 비슷하게 iOS 앱의 UI 를 그리기 위한 프레임워크입니다. iOS13 부터 사용가능하지만 iOS14 이상부터 가능한 기능들이 많아, 미니멈 iOS14 에서 주로 사용하는 걸로 알고 있습니다! 다음 사이드프로젝트나 클론코딩은 SwiftUI 로 꼭 해봐야겠어요!! 그러기 위한 스터디 시작~! 💪

SwiftUI 에 대한 특징

- 선언적 구문을 사용해 사용자 인터페이스의 기능을 명시하기만 하면 됩니다.

- 드래그 앤 드롭으로 UI 를 구성할 수 있고, 미리보기가 가능한 인터페이스가 있습니다. (과연 자주쓸지 의문이지만요)

- 사용자 인터페이스의 속성은 메소드 체이닝(Method Chaining) 문법을 이용해 설정합니다.

View 프로토콜의 Instance method 를 보면 반환값이 View 인것을 확인하실 수 있어요. 메소드가 객체를 반환해 여러 메소드를 순차적으로 선언할 수 있는 것입니다! (나중에 한번 정리해봐야겠어요) 관례적으로 객체의 선언과 설정은 엔터로 구분해 작성한다고 합니다.

 

View Protocol

• View 프로토콜은 앱의 UI 를 표현하고, view 를 설정하기 위한 modifiers 를 제공하는 타입입니다.
• Stack, Button, Text, Image, List, Spacker 모두 View 프로토콜을 채택하고 있습니다.
• View 프로토콜을 채택해 커스텀한 View 를 만들 수 있어요. computed property 인 body 는 반드시 구현해야 합니다. body 를 통해 커스텀한 뷰의 내용을 채워주는 것이에요. body 내부에는 여러 뷰들을 추가해줄 수 있습니다. 

👉 https://developer.apple.com/documentation/swiftui/view

 

📚 Building Layouts with Stack Views

SwiftUI 에서는 View 를 배치하기 위해서 Stack View 를 이용합니다. HStack, VStack, ZStack 세가지가 있는데 XYZ 축 기반이라고 생각하면 돼요. Stack 내부에는 View 를 배치할 수 있고, Stack 또한 배치할 수 있습니다! (Stack 도 View 프로토콜을 채택하기 때문)

• HStack : Horizontal Stack, 가로로 하위 뷰들을 배치합니다.
• VStack : Vertical Stack, 세로로 하위 뷰들을 배치합니다.
• ZStack : Z 축에서 하위 뷰들을 연달아 배치한다. 먼저 선언된 뷰는 가장 하단에 깔리고, 그 위로 뷰들이 배치됩니다. 

공식문서 이미지

👉 https://developer.apple.com/documentation/swiftui/building-layouts-with-stack-views

 

Stack 생성자

// Horizontal Stack
// VerticalAlignment - top, center, bottom, firstTextBaseline, lastTextBaseline
HStack(alignment: VerticalAlignment = .center, spacing: CGFloat? = nil, content: () -> Content)

// Vertical Stack
// HorizontalAlignment - leading, center, trailing
VStack(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, content: () -> Content)

// Z-axis
// Alignment - topLeading, top, topTrailing, leading, center, trailing, bottomLeading, bottom, bottmTrailing
ZStack(alignment: Alignment = .center, content: () -> Content)

• alignment 를 갖는 건 동일하지만, HStack 은 가로로 배치되는 중 세로의 정렬을 기준잡고, VStack 은 세로로 배치되는 중 가로의 정렬을 기준 잡고, ZStack 은 가로 세로 둘 다 정렬을 기준잡는 점이 다릅니다.
• spacing 의 기본값은 nil 이지만, 0으로 설정되는게 아닌 서브뷰들 조합에 따른 기본 값이 설정됩니다! 의도하지 않은 빈칸이 있다면 spacing 을 조절해보세요 👀

 

View - Instance Method

Layout 설정에 대한 메소드, 접근성 제공 및 Input 이나 Event 설정할 수 있는 메소드를 제공하고 있어요. 아직 많이 사용해보진 않아서, 강의들으면서 나온 몇개만 정리해둘게요! 

// 특정 사이즈로 크기를 지정하는 메소드
// width, height 가 nil 인 경우는 가능한 최대 사이즈로 지정된다.
func frame(width: CGFloat? = nil, height: CGFloat? = nil, alignment: Alignment = .center) -> some View

// safe area 밖으로 뷰를 배치하기 위한 메소드
// 뷰는 기본적으로 safe area 내부에 배치된다.
func ignoresSafeArea(_ regions: SafeAreaRegions = .all, edges: Edge.Set = .all) -> some View

// 뷰의 엣지 전체에 일정한 패딩을 더하는 메소드
func padding(_ length: CGFloat) -> some View

// 뷰의 특정 엣지에 일정한 패딩을 더하는 메소드
// length 가 nil 일 경우, 플랫폼에서 지정한 기본 값을 사용한다.
func padding(_ edges: Edge.Set = .all, _ length: CGFloat? = nil) -> some View

// 뷰의 특정 엣지마다 다른 패딩값을 더하는 메소드
func padding(_ insets: EdgeInsets) -> some View

frame 메소드

View.frame 메소드는 특정 사이즈로 크기를 지정하는 메소드에요. 

width, height 가 nil 인 경우는 가능한 최대 사이즈로 지정됩니다! 파란색과 주황색 타원을 보면 비교가 될거에요.

ZStack 활용 & ignoresSafeArea 메소드

View 는 기본적으로 safe area 내부에 배치되기 때문에, 노치나 하단 바를 덮도록 배치하고싶다면, ignoresSafeArea 메소드를 사용해주면 됩니다! 왼쪽과 오른쪽이 다른점을 보실 수 있을거에요.

그리고 아래 코드에서 색상을 입히기 위해서는 ZStack 을 이용하는 점도 참고하시면 됩니다! UIKit 에서 addSubview 로 사용됐던 걸 ZStack 을 사용해서 좀더 명확하게 나타낼수가 있는 것 같아요 👍

 

View padding & background

뷰에 대해 padding, background 를 함께 적용할 때는 순서에 유의해야합니다! 메소드를 적용하고 반환된 객체에 다시 메소드를 적용하는 것이기 때문에 원하는 결과가 나오지 않을수도 있어요. 

background > padding 는 text 에 background 설정된 후 padding 적용이므로 padding 영역에는 색상이 없게 됩니다! padding 까지 색상을 지정하고 싶다면, padding > background 순서로 설정해야해요 😮

 

---

참고 문서

• SwiftUI 개요
• SwiftUI 인프런 강의
• Apple 공식 문서