iOS) SwiftUI 시작하기

해당 시리즈는 스윗한 SwiftUI책을 보면서 중요하다 생각되는 내용을 정리합니다.

View 프로토콜 살펴보기

SwiftUI의 View프로토콜은 다음과 같이 이루어져있다.

public protocol View {
    associatedtype Body : View
    @ViewBuilder var body: Self.Body { get }
}

var body는 Self.Body를 재귀적으로 호출하기 때문에 View를 재귀적으로 호출한다. 그렇다면 재귀함수의 끝은 어디일까?
Text, Image같이 실제 컨텐츠를 표현하는 Primitive ViewStack, Group등과 같은 Container View는 다음과 같이 Never 타입을 사용해서 재귀를 끝낸다.

extension Text : View {
    public typealias Body = Never
}

수식어 적용 시 주의사항

TextView의 extension 함수, 즉 수식어를 사용할 때 각각 어느 타입을 반환하는지 주의하여야한다.
예를 들어 .padding()some View를 반환한다. 하지만 extension Text안에 있는 .font()Text를 반환한다.
따라서 순서를 넣는 순서에 주의해야한다.

이미지 처리

이미지의 경우 .resizable()처리를 해주어야 이미지의 원본 크기가 바뀐다.
그렇지 않으면 이미지를 가진 프레임의 크기만 바뀐다.
.resizable()은 이미지에만 적용이 가능하므로 frame을 먼저 설정해주고 하면 안된다.

UIKit에서 contentMode는 .scaledToFit()과 같이 동작한다.

.clipShape()를 통해 원하는 도형으로 짜를 수 있다.

스택 뷰

스택뷰에는 HStack, VStack, ZStack 3가지 종류가 있다.
View타입의 Content를 제네릭하게 받을 수 있다.
View프로토콜을 준수하고 있으며, Text등과 마찬가지로 Primitive View이기 때문에 Body = Never를 정의한다.
initializer를 통해 alignment와 spacing을 설정해줄 수 있다.

struct HStack<Content>: View where Content: View {
    init(
      alignment: VerticalAlignment = .center,
      spacing: CGFloat? = nil,
      @ViewBuilder content: () -> Content
    )
    typealias Body = Never
}

Overlay & Backgroud

ZStack처럼 한 View위에 다른 View를 덮을 때 Overlay를 사용한다.
Overlay는 해당 도형의 앞에 다른 도형을 덮고, background는 해당 도형의 뒤에 덮는다.

좋은 웹페이지 즐겨찾기