[iOS App Dev Tutorials] SwiftUI - SwiftUI Essentials

Apple Developer Documentation

개요

SwiftUI는 모든 애플 플랫폼을 위한 앱 구축 선언형 프레임 워크이다.

단일 언어와 공통된 API를 사용하여 동작과 UI를 정의한다.

다음 특징이 SwiftUI를 더 빠르고 오류를 적게 만든다.

• 선언 구문
  • 간단한 Swift 구조를 사용해서 View를 정의한다.
• 구성 API
  • 기본 제공 View와 Modifiers(한정자)를 사용해 UI를 빠르게 만들고 반복한다.
  • 간단한 View 들을 구성함으로써 복잡한 View를 만든다.
• 강력한 레이아웃 시스템
  • 존재하는 View와 Control들이 필요에 맞지 않는다면 직접 만들 수 있다.
• 앱 데이터를 반영하는 View
  • Data가 변경되면 View를 자동으로 업데이트하여 잘못된 View States를 방지한다.
• 자동 접근성 지원
  • SwiftUI는 최소화의 노력으로 향상 시킬 수 있는 접근성을 추가한다.

1. Using Stacks to Arrange Views

Structure

SwiftUI의 기본 View 파일은 2개의 구조로 이루어져 있다.

1. 첫 번째 구조는 단일 요구사항을 가진 View Protocol 을 준수한다.
   • 단일 요구사항Body Property는 내용, 레이아웃, 동작을 설명한다.
   • View를 리턴하는 Body Property
2. 두 번째 구조는 캔버스에 보여줄 뷰를 위한 프리뷰를 선언한다.

View

ProgressView

작업의 진척도를 나타내는 View

ProgressView(value: 5, total:15)

Stack

수평, 수직, 앞뒤로 나열 가능한 View 그룹이다.

HStack : 수평으로 나열

VStack : 수직으로 나열

ZStack : 앞뒤로 나열

옵션

// trailing - 오른쪽 정렬 (트레일러 : 꼬리가 긴 차)
VStack(alignment: .trailing){
	...
}
.padding() // 기본 값 10

Circle

Circle()
	.strokeBorder(lineWidth: 24)
// view가 가득찬 모습

Supplement Accessibility Data

SwiftUI는 접근성 기능이 내장되어 있다. 따라서 추가적인 작업 없이 기능을 추가할 수 있다.

HStack{
	...
}
.accessibilityElement(children: .ignore) // 자식에게 접근하는 것을 제한한다
.accessibilityLabel("Time remaining") // 사용 목적을 이해할 수 있는 내용을 넣어야 한다. 
.accessibilityValue("10 minutes") // 자식 값을 무시 했으므로 값을 추가해줘야 한다.

Button(action: {}) {
    Image(systemName: "forward.fill")
}
.accessibilityLabel("Next speaker")

https://developer.apple.com/tutorials/app-dev-training#swiftui-essentials

Apple Developer Documentation