SwiftUI와 친해지기

프로젝트 구성

---

새로운 프로젝트를 만들 때 Stoyboard가 아니라 SwiftUI를 선택해서 생성하면 아래와 같은 파일들이 뜨게 된다.

1. 프로젝트 이름App.swift
2. ContentView.swift
3. Assets.xcassets
4. Preview Content
   1. Preview Assets.xcassets

1. 프로젝트 이름App.swift

SwiftUI로 된 프로젝트를 생성하면 Stoyboard로 된 프로젝트와 다른 점이 있다.

AppDelegate와 SceneDelegate가 없다는 점이다. 

물론 애플도 생각 없이 없애진 않았다. AppDelegate와 SceneDelegate의 역할은 "프로젝트 이름App.swift"의 파일에서 주어진 메서드를 통해서 해결할 수 있다. (자세한 내용은 추후 배우면서 알아보겠다.)

 

 

 

2. ContentView.swift

해당 파일은 Main.storyboard + ViewController라고 생각하면 편할거 같다. (내 생각일 수도 있다.)

 

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

즉, 위의 코드에서 ContentView는 하나의 View를 만들어주는 것이다. 내부에는 여러 UI 컴포넌트와 그 속성을 추가하여 UI 구성할 수 있다.

 

Q. 그럼 아래의 ContentView_Previews는 뭘까? 

 

해당 부분은 아래의 사진의 우측화면처럼 ContentView에서 구성한 UI를 Priview를 통해서 띄워주게 된다. 

 

 

 

활용하기

---

ContentView에서 기본적으로 작성된 body를 보면 Text("Hello, world!")가 작성되어 있다.

프리뷰를 보면 알 수 있듯이 화면 중앙에 Hello, world!를 보여주고 있다.

 

Q. 이제 이 Text의 굵기를 변경하려면 어떻게 해야할까?

 

아래의 코드처럼 Text뒤에 .fontWeight(굵기정도)를 추가하면 된다. 

.import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

폰트 사이즈도 같은 방식으로 .font(.system(size: 크기)) 를 추가하면된다.

 

Q. 만약 해당 텍스트를 여러개 두고 싶으면 어떻게 해야할까?

 

VStack을 사용하면된다. VStack은 VerticalStack를 뜻한다. VerticalStack이 있으면 당연히 Horizon도 있다. 

HorizonStack은 HStack으로 쓰인다. 

 

 

[VStack의 활용]

 

VStack은 아래의 코드 처럼 사용하면된다.

VStack {
	//UI
}

 

-실제 사용-

 

HStack도 마찬가지이다.

VStack과 HStack도 뒤에 .(dot)을 통해서 속성을 변경할 수 있다.

 

Q. VStack안에 HStack을 넣을 수 없을까? 또는 HStack안에 VStack을 넣을 수 없을까?

 

가능하다. 하나의  HStack(VStack) 내부에 여러개의 HStack(VStack)를 넣으면 된다. 

 

Q. 여러개의 HStack(VStack)의 크기로 하나의 HStack(VStack)의 크기가 정해질까?

아니다. padding()을 통해서 하나의 HStack(VStack)의 크기를 정할 수 있다. 

 

 

1. 한번에 padding주기

2. 한 방향만 padding주기

3. inspector로 padding주기 

이 부분은 맨 오른쪽 inspector를 통해서 padding을 주는데 네 방향중 padding을 주고 싶은 방향을 체크하면 자동으로 padding을 주고 코드도 자동으로 입력한다. 

 

 

[자주쓰이는 View 만들어 놓기]

 

1. ContentView 내부에서 만들기

 

현재 코드를 보면 아래의 코드가 3번이나 연속적으로 쓰인것을 볼 수 있다.

작성할 때는 아무생각 없을지 몰라도 나중에 보면 가독성도 좋지 않아 헷갈릴 수 있다. 따라서 아래처럼 새로운 struct를 만들어 사용해준다. 

 

struct MyVStackView: View {
    var body: some View {
        VStack {
            Text("1!")
                .fontWeight(.bold)
                .font(.system(size: 30))
            Text("2!")
                .fontWeight(.bold)
                .font(.system(size: 30))
            Text("3!")
                .fontWeight(.bold)
                .font(.system(size: 30))
        }.background(Color.blue)
    }
}

 

 

2. ContentView 외부에서 만들기

 

외부에 Swift 파일을 만들어주고  ContentView 내부에서 만들었던 MyVStackView를 복붙해준다. 

 

⚠️ 만약 프리뷰가 뜨지 않는다면 Adjust Editor Options - Canvas를 선택해준다. 

 

그후 해당 코드를 작성해준다. 

struct Previews: PreviewProvider {
    static var previews: some View {
        MyVStackView()
    }
}

 

이렇게 하면 일정한 반복된 코드 없이 단순하게 여러 View를 만들 수 있다. 

 

 

[UIKit vs SwiftUI]

View & Controls

 

 

ViewControllers