SwiftUI 레이아웃 관련 속성들

2021년 10월 20일 수정

≡ 목차 (Table of Contents)

frame

크기를 지정한다.

Image("image_20x20")
    .frame(width: 30, height: 30)

최대 크기를 지정하는 maxWidth 와 maxHeight 매개변수도 제공되는데 아래와 같이 .infinity 값을 이용해서 부모 뷰를 가득 채울 수 있는 뷰를 만들 수 있다.

Text("Foobar")
    .frame(maxWidth: .infinity,
           maxHeight: .infinity)

물론 maxWidth 와 maxHeight 는 둘 중 하나만 사용할 수도 있다.

이 외에도 alignment 매개변수도 지원되니 필요하면 찾아보자.

padding

기본 패딩 용도로 쓸 수 있다.

Text("foo bar").padding()

물론 어떤 방향에 패딩을 줄지 고를 수 있다.

Text("foo bar").padding([.leading, .trailing])

패딩 수치도 당연히 고를 수 있다.

Text("foo bar").padding(10)

특정 한 방향에 음수로도 줄 수 있는 트릭도 있다.

Text("foo bar").padding(.bottom, -130)

lineLimit

Text("foo bar").font(.caption).lineLimit(1)

참고로 Stack에도 쓸 수 있다.

HStack {
    ...
}
.lineLimit(1)

layoutPriority

HStack {
    Text("foo")
    Text("bar").layoutPriority(1)
}
.lineLimit(1)

우선순위가 낮으면 텍스트가 넘칠 경우 ... 으로 단축될 수 있다.

alignmentGuide

베이스라인을 수동으로 맞춰준다.

Image("some_image").alignmentGuide(.lastTextBaseline) {
    d in d[.bottom] * 0.927
}

aspectRatio

SomeView {
    ...
}
.aspectRatio(1, contentMode: .fit)

offset

레이아웃 위치에서 임의로 벗어나게 만들 수 있다.

Circle().offset(y: -130)

clipped

내용물(?)을 부모 프레임 크기에 맞게 잘라서 표시한다.

Rectangle().offset(x:10, y: 10).clipped()

clipShape

특정 모양으로 잘라서 표시한다.

Rectangle().clipShape(Circle())

mask

Circle().overlay(
    Circle().mask(
        Circle().frame(width: 200, height: 200)
    )
)

이미지 마스크도 가능하다.

VStack(spacing: 0) {
    Color.red
    Color.green
    Color.yellow
}
.mask(
    Image(systemName: "applelogo")
        .resizable()
        .aspectRatio(contentMode: .fit)
)
.frame(width: 128, height: 128)

이 글을 링크하는 글들

❏ SwiftUI

SwiftUI의 소개와 관련된 글 정리 Updated on 2022년 11월 2일