SwiftUI

SwiftUI란?

• 모든 애플 플랫폼(iOS, iPadOS, macOS, watchOS, tvOS)에서 사용자 인터페이스를 만들 수 있게 해주는 새로운 개발 패러다임
• 한 번의 개발로 모든 애플 기기의 사용자 인터페이스 만들기 가능!
  

Chapter 1

참고 자료
https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

Section 1

Create a New Project and Explore the Canvas

새로운 프로젝트를 만들고 캔버스를 살펴보기

• macOS Monterey 이후 버전 필요

1. 새로운 프로젝트 생성
   
2. Interface -> SwiftUI
   
3. 'projectName'App.swift 파일
   

• SwiftUI life cycle은 'App protocol'을 갖고 있음
• 구조의 프로퍼티는 하나 이상의 scenes을 리턴함
• @main 속성은 앱의 시작점을 나타냄

4. ContentView.swift 파일

• structure 1 - view protocol & view content and layout
• structure 2 - struct1의 view 선언
• ContentView : 화면을 그리는 구조체고,
• ContentView_Previews : Preview를 그리는 구조체

5. canvas의 Resume 버튼 -> 프리뷰
   

• canvas가 보이지 않을 경우 : Editor > Canvas
  
• 단축키를 사용하여 preview 컨트롤이 가능
• Canvas 닫기/열기: cmd + option + enter
• Resume: cmd + option + P

6. 뷰의 body property 코드 수정시 프리뷰에 반영
   

• GUI를 사용하여 속성을 바꾸면 코드에도 자동으로 변경
• GUI: Graphical User Interface

Section 2

Customize the Text View

텍스트뷰 커스터마이징하기

1. 코드 사용

• .font(.title)
• .foregroundColor(.color)

2. 인스펙터 사용

• Command-click -> Show SwiftUI Inspector
  
• 뷰의 타입에 따라 다른 특성의 popover이 나타남
  
• Text : 타이틀 수정
• Font : 폰트 수정

Section 3

Combine Views Using Stacks

Stacks를 이용한 뷰 결합

• body property는 오직 하나의 single view만 리턴하기 때문에

• 다중의 뷰를 결합하기 위해 'stacks' 사용

• VStacks : Vertical Stacks

• HStacks : Horizontal Stacks

• 예제
  

1. text view의 생성자를 Command-click > "Embed in VStack" or (+) 버튼 클릭
   

• VStack(alignment: .leading) : VStack initializer 수정
  - 기본값은 center

2. 라이브러리에서 Text view 드래그해서 text view 추가
   

• .font(.title/.subheadline) : font 특성

3. text view의 생성자를 Command-click > "Embed in HStack" or (+) 버튼 클릭
   
4. HStack 안에 text view 두 개 넣고 간격 주기

• Spacer()
  

5. 테두리 간격 주기

• .padding()
  

Section 4

Create a Custom Image View

custom image view 만들기

1. Assets에 image 추가
   
2. Image View 추가

• file > new > file > SwiftUI View
  

3. Image("asset name")
   
4. Circle type으로 바꾸기
   
5. image에 테두리 & 그림자 추가
   

Section 5

Use SwiftUI Views From Other Frameworks

프레임워크를 사용해 SwiftUI View 사용하기

• MapKit 프레임워크 사용

1. MapView 추가

• file > new > file > SwiftUI View
  

2. MapKit 프레임워크 추가
   
3. 지도에 대한 지역 정보를 저장하는 개인 상태 변수 만들기
   
4. 지역 정보 map에 binding하기
   

Section 6

Compose the Detail View

상세 뷰 작성

1. ContentView의 body에 Map과 Image 추가

• layout 수정
  

2. 구분선 추가

• Divider()
  

최종

문제/정답

1. 

2. 

3.

4.