[Udemy iOS & Swift Bootcamp] SwiftUI란? 기본 사용법 !

*SwiftUI: Apple의 새로운 UI 프레임워크로 Declarative Swift Code 로 만들어짐.

 

초보자들을 위해 iOS 앱의 레이아웃을 만들기 쉽도록 드래그 앤 드롭 코드 생성 기능을 만든 것.

캔버스에 그냥 드래그 앤 드롭하면 필요한 코드가 자동으로 생성된다.

시뮬레이션 뷰가 제공되어 화면에서 미리 보고 테스트할 수 있다.

 

UI를 객체로 만들어서 재사용 가능한게 가장 큰 장점 !

 

SwiftUI를 만든 가장 큰 이유는 애플의 크로스 플랫폼(워치, 맥, iPhone) 사용자 인터페이스를 쉽게 구축하기 위함이다.

Project Catalyst로 Mac 앱으로 바로 변환이 가능하다.

 

iOS 14 이상을 실행할 수 있는 장치에서만 구동가능함. iPhone 6S 이상. iPad Air2 이상. 

 

https://developer.apple.com/kr/xcode/swiftui/

SwiftUI 개요 - Xcode - Apple Developer

---

*SwiftUI 사용법

1. SwiftUI Interface로 새 프로젝트 만들기

New Project 를 생성할 때 Interface 를 storyboard 가 아닌 SwiftUI 로 지정해준다.

 

초기 셋팅창은 프로젝트 폴더, 코드, 라이브 프리뷰로 이루어져 있다.

 

Resume 버튼을 누르면 build 및 미리보기가 가능하다.

 

위에 화면 조작버튼 누르다가 갑자기 Canvas 가 사라졌었는데, Canvas 체크하고 Layout > Canvas on Right 적용해주니 옆에 잘 생겼다.

 

2. 프리뷰 기기 변경

1) 코드로 변경하기

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 11")
    }
}

ContentView().previewDevice("iPhone 11") 으로 ContentView()에 previewDevice를 추가해주면 된다.

 

2) Content View 의 Device 변경

Content View 의 Device 변경으로도 바꿀 수 있다. 시뮬레이터가 설치된 단말기만 가능하다. 없으면 추가 다운로드해주기.

 

3. UI요소 추가하기

1) 버튼으로 추가하기

storyboard 인터페이스에서 했던 것 처럼 상단에 + 버튼을 누르고 Object 라이브러리를 연다.

마우스로 preview 나 코드에 드래그 앤 드롭하면 생성 & 배치된다.

화면 위로 차곡차곡 쌓아야할 때는 ZStack 을 이용해주자.

ZStack | Apple Developer Documentation

참고로 SwiftUI 의 Stack 에는 V, H, Z Stack 이 있다. VStack(수직으로 배열), HStack(수평으로 배열), ZStack(화면 위로 쌓기)

 

2) 코드에서 추가하기

코드상에서 추가하고 싶다면 Command +  클릭하면 원하는 객체를 추가할 수 있다.

 

4. Asset 추가하기

왼쪽 프로젝트 구조에서 Asset 아이콘 클릭 후, 기존 Asset 들을 삭제한 후 I am Rich Asset 들을 import 해준다.

 

5. 이미지 추가하고 비율 맞춰서 배치하기

Image 에 resize, ratio 등의 속성을 부여하고 싶으면 Object 라이브러리에서 Modifier를 추가해주면 된다.

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack{
            Color(.systemTeal)
                .edgesIgnoringSafeArea(.all)
            VStack {
                Text("I Am Rich")
                    .font(.system(size:40))
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
                Image("diamond")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 200, height: 200, alignment: .center)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 11")
    }
}

비율이 아닌 사이즈 자체를 지정할 땐 frame() 함수를 이용하자.