[SwiftUI] 3. View Layout: 내장된 View의 적절한 크기를 유지하기

Sean·2023년 5월 3일

iOS swift swiftui 공식문서 튜토리얼

SwiftUI_튜토리얼

목록 보기

3/11

참고 자료: SwiftUI 튜토리얼 공식문서

이제 막 SwiftUI를 배워보는 한 사람으로서, 코드 작성하고 내가 이해 한 대로 작성할것이다.

이 글의 내용은 위에 있는 참고자료의 공식문서를 번역하여 조금 더 내가 느끼기에 자연스럽게 만들어서 작성하는것이다.

누군가에게 알려주기보다 자신이 정리를 하면서 다시 문서를 보고 어버버거리지 않게 다시 참고하기 위함이기에 해당 문서를 읽는 사람은 swift에 대해서 어느 정도 안다는 가정하에 글을 작성할것이다

시작

앱이 표시하는 각 유형의 콘텐츠에 대해 모든 기기에서 앱의 view 레이아웃은 유동적으로 유지한다.
SwiftUI로 정의하는 view는 SwiftUI가 제공하는 view를 직접 포함하거나 기본 제공하는 view를 포함하는 커스텀 view를 사용한다.
SwiftUI view는 자체적으로 크기를 결정하고 내장된 view의 크기를 수정하며 view의 적응성을 유지하는 방법을 이해하는 것이 코드를 복잡하게 만들지 않으면서 유연한 레이아웃을 생성하는 가장 좋은 방법이다.

분석

1. Text & symbols

앱의 레이아웃을 정의할 때, text 와 symbols는 navigation link, button labels, tables, 등에서 사람들에게 정보를 전달하는데 중요한 역할을 한다.
text 와 symbols는 정보를 표시하거나 다른 요소의 레이블을 지정하려면 내용을 표시하기에 충분한 공간이 있어야 한다.

Text
Struct: Text

Text("Hamlet")
    .font(.largeTitle)
Text("by William Shakespeare")
    .font(.caption)
    .italic()

Text는 read-only 텍스트를 표시한다.
짧은 String일 수도 있고 훨씬 긴 문자열일 수도 있다.
레이아웃에서 Text view 를 선언 할 때 font 속성을 사용하여 텍스트에 대한 정보를 시스템에 제공한다.
Text view는 일부 공간 제약 조건에 따라 줄을 바꾸거나 잘라서 조정을 할 수 있지만, 크기가 사용 가능한 공간보다 크거나 작은 경우 폰트 크기를 조정하지 않는다.

symbols
SF Symblos

HStack {
    Image(systemName: "folder.badge.plus")
    Image(systemName: "heart.circle.fill")
    Image(systemName: "alarm")
}
.symbolRenderingMode(.multicolor)
.font(.largeTitle)

SF Symbols가 제공하는 아이콘과 같은 기호는 일반적인 앱 기능을 나타낸다.
효과적인 symbol은 앱의 UI를 간소화 하고 앱 사용자가 쉽게 알아보게 할 수 있고, SwiftUI가 제공하는 수정 방식을 통해 색상과 크기를 쉽게 조정할 수 있다.
Image에서 symbol을 지정하더라도, 텍스트와 유사하게 다루어야 한다.

Labels
Struct: Label

Label("Favorite Books", systemImage: "books.vertical")
    .labelStyle(.titleAndIcon)
    .font(.largeTitle)

Text 와 symbols를 모두 사용하여 앱의 단일 요소를 나타내려면 Label을 사용하면 된다.
Label은 제목과 아이콘의 크기 및 정렬을 맞춰준다.

2. Controls

VStack {
    HStack {
        Picker("Choice", selection: $choice) {
            choiceList()
        }
        Button("OK") {
            applyChanges()
        }
    }
    .controlSize(.mini)
    HStack {
        Picker("Choice", selection: $choice) {
            choiceList()
        }
        Button("OK") {
            applyChanges()
        }
    }
    .controlSize(.large)
}

사용자가 상호작용하는 view 들은 같은 유형의 여러 요소가 함께 나타날 때(설정창 처럼) 일관성을 유지하기 위해 개별적인 크기를 가진다.
control은 사용자가 정확하게 클릭 또는 탭 할 수 있을만큼 충분히 커야 한다.

Menu나 Link는 EditButton, ColorPicker와 같은 특수한 view가 존재하는데,
이러한 view를 사용하여 유지보수가 필요한 커스텀 view를 만들지 않고 익숙한 UI 요소를 제공한다.
Struct: Menu
Struct: Link

3. Images and shapes

이미지및 도형과 같은 그래픽 요소는 앱의 시작적 수준을 향상시킨다.

Images
Struct: Image

Image("Yellow_Daisy")
    .resizable()
    .scaledToFit()

이미지는 사진 및 기타 그래픽을 표시한다.
기본적으로 이미지는 에셋의 원래 크기로 표시된다.
modifier를 추가하여 사용 가능한 공간에 맞게 크기를 조정한다.

서버에서 이미지에 접근하는 경우 AsyncImage를 사용하여 앱의 응답을 유지하면서 다운로드를 처리한다.
Struct: AsyncImage

이미지 작업에 대한 자세한 내용은 다음 아티클을 참조
Article: Fitting images into available space

Shapes
Method: frame()

HStack {
    Rectangle()
        .foregroundColor(.blue)
    Circle()
        .foregroundColor(.orange)
    RoundedRectangle(cornerRadius: 15, style: .continuous)
        .foregroundColor(.green)
}
.aspectRatio(3.0, contentMode: .fit)

SwiftUI는 몇가지 일반적인 모양과 크기, 색등을 변경하는 기능을 제공한다.
단일 또는 여러 모양의 컴포지션을 사용하여 배경, 테두리 또는 기타 시각적인 요소를 만든다.
조금 더 자세한 내용은 다음 문서를 참조
Document: Drawing Paths and Shapes