Maintaining the adaptable sizes of built-in views

SwiftUI Concept Tutorials

SwiftUI에서 제공하는 뷰를 적응가능 한 크기로 유지하기

앱이 표시할 컨텐츠의 타입에 따라 모든 디바이스에 뷰에 유동적으로 레이아웃이 적용되도록 유지해야 합니다. Swift UI가 뷰의 크기를 자체적으로 결정하는데, 적응성(뷰의 크기가 어떠하든 뷰가 해당 디스플레이에 유동적으로 표시되는 특성)을 유지하면서 기본적으로 제공되는  뷰의 크기를 수정하는 방법을 이해해하는 것이 레이아웃을 유동적으로 동작하게 하여 코드를 복잡하지 않게 만드는 가장 좋은 방법입니다.

텍스트와 심볼 

텍스트와 심볼은 앱의 레이아웃을 정의할 때  NavigationLink, Button Label, Table 등에서 사용자에게 정보를 전달하는 중심적인 역할을 합니다. 정보를 표시하거나 다른 요소에 레이블을 표시하는 텍스트 및 심볼은 내용을 표시하기에 충분한 공간이 있어야 합니다

텍스트 

Text 뷰는 읽기 전용으로 텍스트를 화면에 표시합니다. Text에 표시할 내용은 연극의 제목이나 섹션의 제목과 같이 짧은 문자열일 수도 연극의 한 장면에 대한 모든 배우의 대사처럼 훨씬 더 긴 문자열일 수도 있습니다.

레이아웃에서 Text 뷰를 선언할 때 Font 속성을 사용하여 텍스트에 대한 시스템 정보를 설정할 수 있습니다. 시스템은 글꼴과 크기를 선택할 수 있는데 title 폰트로 설정된 텍스트가 body 또는 caption으로 설정된 텍스트보다 더 두드러져 보이도록 합니다.

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

 

 

Text 뷰는 줄 바꿈 또는 잘라내기를 사용하여 일부 공간에 대한 제약 조건을 조정할 수 있지만 이상적인 크기가 사용 가능한 공간보다 작거나 큰 상황에 맞게 글꼴 크기를 자동으로 변경하지 않습니다.

현지화에 대한 자세한 내용은 "Preparing views for localization" 을 동적 유형 지원에 대한 자세한 내용은 "Applying custom fonts to text" 를 참조하십시오.

심볼 

SF 심볼이 제공하는 아이콘그래피와 같은 기호는 폴더, 즐겨찾기 하트 모양 또는 카메라에 액세스하기 위한 카메라 아이콘과 같이 일반적인 앱 기능을 표현할 수 있습니다. 효과적인 심볼은 앱의 UI를 간소화하고 사용자가 해당 기능을 쉽게 인식할 수 있게 합니다. SwiftUI는 표준 뷰 수정자를 통하여 심볼의 색상과 크기를 변경할 수 있습니다. Image에서 시스템 또는 사용자 지정 기호를 지정하더라도 SF 심볼을 Text처럼 처리할 수 도있습니다. 심볼의 크기와 두께를 조정하려면 Text 뷰와 마찬가지로 title 글꼴을 설정합니다. 다음 예제에서는 HStack을 사용하여 SF 심볼의 아이콘을 표시하는 세 개의 Image 뷰를 가로로 생성합니다

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

레이블 

텍스트와 심볼 모두를 사용하여 앱의 단일 요소를 표현하기 위해 레이블을 사용합니다. 레이블은 제목과 아이콘 크기 및 정렬을 일치시킵니다. 다음 코드는 몇권의 책을 표현하는 SF 심볼과 타이틀을 표현하는 텍스트를 결합한 레이블을 정의합니다. 레이블은 아이콘과 타이틀 모두에 large title 폰트를 적용했습니다. titleAndIcon 스타일과 같은 제공되는 스타일을 사용거나  사용자가 직접 LabelStyle을 재정의하여 사용할 수 있습니다.

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

컨트롤

설정 창에서와 같이 사용자와 상호 작용하는 뷰(컨트롤)들은  동일한 유형의 여러 요소가 함께 나타날 때 일관성을 유지하기 위해 개별적으로  크기를 설정할 수 있습니다. 또한 컨트롤은 사용자가 정확하게 클릭하거나 탭할 수 있도록 충분히 커야 합니다. 뷰 한정자를 사용하여 이러한 크기를 선택할 수 있습니다. 예를 들어 controlSize(_:) 한정자를 사용하여 컨트롤을 더 작거나 더 크게 만들거나 progressViewStyle(_:) 한정자를 사용하여 진행 상황을 선형 또는 원형 모양으로 선택할 수 도 있습니다.

다음 예제에서 다른 크기를 갖는 컨트롤러인 Picker 와 Button를 볼 수 있습니다. 

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

컨트롤에는 Menu 나 Link와 같은 범용 컨트롤 에서 EditButton 이나 ColorPicker와 같이 특수한 목적에 사용되는 컨트롤까지 다양합니다.  유지 관리해야할 필요가 있는 사용자 지정 컨트롤을 만드는 대신 친숙한 제공된 UI 요소를 사용하는 게 좋습니다. 이러한 기본 제공 뷰에 대한 자세한 내용은 "Controls and Indicators"를 참조하십시오.

이미지 와 도형 

이미지 나 도형과 같은 그래픽 요소는 앱을 시각적으로 더 높은 수준으로 보여줍니다. 이러한 요소는 쇼핑 앱의 제품 이미지, 게임의 성취도 나 다양한 도형을 계층화하고 정렬하여 생성하는 동적 배경 패턴등 다양한 형태로 나타납니다. 

이미지

Image 뷰는 사진이나 풍부한 그래픽을 표시합니다. 기본적으로, 이미지는 원래 에셋의 크기를  그대로 이미지 뷰에 표시합니다. resizable(capInsets:resizingMode:) 및 scaleToFit() 또는 scaleToFill()과 같은 한정자를 추가하여 사용 가능한 공간으로 크기를 조정할 수 있습니다.

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

서버에 있는 이미지에 액세스하는 경우 AsyncImage를 사용하여 앱이 응답성을 유지하면서 다운로드를 처리할 수 있습니다. 이미지 작업에 대한 자세한 내용은 "Fitting images into available space"를 참조하십시오.

도형(Shape)

SwiftUI는 일반적인 도형과 크기, 색상 또는 도형의 모양을 변경할 수 있는 한정자를 제공합니다. 하나의 도형 또는 여러 도형을 조합해서  배경, 테두리 또는 기타 시각적 요소를 구현할 수 있습니다.

도형은 frame(minWidth:idealWidth:dealWidth:maxWidth:minHeight:dealHeight:maxHeight:alignment:) 한정자를 사용하여 도형의 크기를 정의하거나 사용 가능한 모든 공간을 채우도록 할 수 있습니다.

다음 예제에서는 세 가지 다른 도형을 보여 줍니다. 각각의  도형은 foregroundColor(_:) 한정자를 사용하여 해당 도형의 채우기 색을 적용합니다. RoundedRectangle에는 둥근모서리 각도를 정의하기 위한 cornerRadius 및 여러 스타일 매개변수 값이 포함됩니다. HSack은 각 Shape 사이에 기본 간격을 제공하며, 각 도형에 채울 정사각형 공간을 제공하기 위해 aspectRatio(_:contentMode:) 한정자로 HSack의 너비를 높이의 3배로 만듭니다.

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

 

도형 구성의 다양한 가능성에 대해서는 "Drawing Paths and Shapes" 를 참조하세요.