[멋쟁이사자처럼] 앱스쿨 1기 - SwiftUI (22일차 22.10.18)

17일차 이후부터 Swift 언어에 대한 강의가 끝났고, X-code 실습을 시작하면서 블로그에 작성할 내용보다 실습 및 직접 익혀야 하는 내용이 위주여서 블로그를 작성하지 않았었다.

그동안 Objective-C 및 UIKit로 앱을 만드는 작업을 진행했고, Github에 코드 및 로직을 정리해 두었다.

https://github.com/l1004ga/SwiftCalculator

GitHub - l1004ga/SwiftCalculator

오늘부터는 드디어 대망의 SwiftUI로 앱개발 배우기를 시작하게 되었고, 정리가 필요한 내용이 있어서 블로그를 작성하였다.

---

1. 오전일정 : SwiftUI를 들어가며

수업 참고 교재

• p.137 ~ 

http://www.yes24.com/Product/Goods/89421220

핵심만 골라 배우는 SwiftUI 기반의 iOS 프로그래밍 - YES24

 

 

WWBC 2019

• 2:06:22 부터 영상을 확인하면 SwiftUI의 센세이션을 확인할 수 있다.

https://www.youtube.com/watch?v=psL_5RIBqnY 

---

2. 오후일정 : Swift UI 실습

SwiftUI

VStack

• body에 Stack은 1개만 들어갈 수 있음(2개 이상 넣으면 최상단에 정의된 Stack만 출력해줌)
• VStack은 내부의 항목을 10개까지만 받을 수 있다.
  -> 스크롤뷰 등 항목이 많아짐에 따라 변화해야 하는 상황 발생을 피하기 위하여

 

font()

• .font()사용 시 숫자로 폰트 크기를 고정시키기 보다, Apple에서 제공하는 프로퍼티(title, largeTitle 등)을 사용 권고
• 숫자로 폰트 크기를 고정시키면, 설정의 사용자별로 글자 크기를 조정해도 크기가 변하지 않고 고정된다.

 

Preview

• PreviewProvider 프로토콜을 상속받는 preview코드는 개발자 도구를 열면 자동으로 생성된다.(없으면 오른쪽 창이 안뜬다)
• 2줄의 previews 안에 ContentView()는 기본적으로 1개만 들어갈 수 있으나, Group으로 묶어주면 여러개의 Preview를 생성할 수 있다.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group{
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 14"))
                .previewDisplayName("iPhone 14")
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 14 pro"))
                .previewDisplayName("iPhone 14 pro")
        }
    }
}

• 위 코드에 따라 Preview창에 iPhone 14, iPhone 14 pro라는 2개의 contentView를 미리보여주는 화면이 생성된다.
• .previewDisplayName("")을 사용하여 Preview창에 생성되는 다수의 화면 이름을 알 수 있게 된다.(아래 사진에 빨간 화살표)

첫번째 Preview

• 가로화면이나, 다크모드 등은 Preview 왼쪽 하단 설정에서 변경할 수 있다.물론 코드상에서도 변경 가능.(아래 사진에 빨간 화살표)
• .previewDevice(PreviewDevice(rawValue: "iPhone 14"))를 사용해서 Preview기종을 변경할 수 있다.
  -> 다만 기종명을 매우매우 정확하게 써야한다. (iPhone SE = 안됨, iPhone SE (3rd generation) = 됨) 하하하

2번째 Preview

Scene

• 앱에 따라서 창이 여러개 있을 수 있기에 Scene 프로토콜을 가지는 body안에 WindowGroup을 사용하여 여러개의 ContentView()를 묶어준다.

import SwiftUI

@main
struct iphoneCalcAppApp: App {
    var body: some Scene {
        WindowGroup {                //앱에 따라서 창이 여러개 있을 수 있다.
            ContentView()
        }
    }
}

 

기본색상 외 색상 적용

• 상단탭바 > edit -> format -> show colors
• 원하는 색상 선택하고 색상을 넣을 코드에 드래그하여 사용
• .init()은 직접 작성해 줘야 함

.foregroundColor(.init(#colorLiteral(red: 1, green: 0.743478775, blue: 0.002885967959, alpha: 1)))

•  

 

APPLE 심볼

https://developer.apple.com/sf-symbols/

Apple Developer

• X-code에서 Apple에서 기본으로 제공하는 symbols 이미지들을 사용하는 방법은 아주 간단하다.
• 터미널창에 아래 명령어를 입력하면 자동으로 설치가 완료된다.
• 사용시에는 command + space 후 sf symbols를 검색하여 프로그램을 열고 사용하고자 하는 symbol 이름을 찾아서 X-code상의 코드에 붙여서 사용하면 된다.

<터미널>

brew install --cask sf-symbols

<X-code>

Image(systemName: "globe.americas")

공통 CSS부분 Struct로 분류하여 사용

 

<기존코드>

struct NamesView: View {
    var body: some View {
        VStack {
            Text("조원1").padding()
             .foregroundColor(.orange)
            .bold()
            .padding()
            Text("팀장").font(.title).foregroundColor(.green)
             .foregroundColor(.orange)
            .bold()
            .padding()
            Text("조원3").padding()
             .foregroundColor(.orange)
            .bold()
            .padding()
            Text("조원4").padding()
             .foregroundColor(.orange)
            .bold()
            .padding()
            Text("조원5").padding()
             .foregroundColor(.orange)
            .bold()
            .padding()
            Text("조원6").padding()
            Text("조원7").padding()
            Text("조원8").padding()
        }
    }
}

• StandardName 구조체를 생성하고 공통사용되는 CSS 내용들을 묶은 후 content로 반환하였다.
• 이를 modifier() 메소드를 사용해서 StandardName()을 적용해주었다.

<분리 코드>

struct NamesView: View {
    var body: some View {
        VStack {
            Text("조원1").padding()
            Text("팀장").font(.title).foregroundColor(.green)
            Text("조원3").padding()
            Text("조원4").padding()
            Text("조원5").padding()
            Text("조원6").padding()
            Text("조원7").padding()
            Text("조원8").padding()
        }.modifier(StandardName())               //CSS Struct 사용
    }
}

struct StandardName : ViewModifier {
    func body(content: Content) -> some View {
        content
            .foregroundColor(.orange)
            .bold()
            .padding()
    }
}

 

삽입한 이미지 색상 바꾸기(그라데이션)

• 아래 코드는 green ~ blue로 그라데이션을 진행하고, 위에서부터 아래방향으로 진행된다는 뜻이다.
• mask에 이미지 처리를 해주지 않으면 해당 이미지에 gradient가 적용되지 않는다. 폰트도 마찬가지이다.

LinearGradient(gradient: Gradient(colors: [.green, .blue]), startPoint: .top, endPoint: .bottom)
                    .mask(Image(systemName: "leaf"))
                    .font(.system(size: 100))

• 아래 그림처럼 오른쪽이 Gradient가 적용되지 않은 일반적인 apple이 제공하는 이미지이고, 왼쪽이 Gradient가 적용된 이미지다.

apple sf-symbols 중 leaf symbol

 

이미지를 버튼 배경으로 만들기

• Button을 생성하고 action을 통해서 Button 함수가 실행될 때 실행될 코드를 작성해준다.
• 그리고 Button함수가 끝나고 이미지와 이미지에 대한 CSS 코드를 {}로 적어주면, 해당 이미지에 Button 기능이 적용된다.

Button(action : {print("Eat carrot")})
                {
                    Image(systemName: "hare.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .foregroundColor(.init(#colorLiteral(red: 1, green: 0.743478775, blue: 0.002885967959, alpha: 1)))
                        .padding()
                }

 

테두리 둥글게 만들기

• 그냥 넣어도 되지만.... 테두리 둥글게는 많이 사용될 것 같아서 구조체로 만들어버렸다. 

struct RoundBorder : ViewModifier {
    func body(content: Content) -> some View {
        content
            .overlay(
                RoundedRectangle(cornerRadius: 16)
                    .stroke(.yellow, lineWidth:  3)
            )
    }
}

---

3. 오늘의 리뷰

처음 SwiftUI를 배운 날이다. 기존에는 UIKit만 사용해봐서 두려움 반, 기대 반이였는데 생각보다 쉬운 것 같기도 하고, 복잡한 것 같기도 하고 아직은 잘 모르겠다. 진도를 따라가기에 어렵다기보다 앞으로 어떻게 나아갈지에 대해 궁금함이 많이 남는 것 같다. 

확실히 html, CSS를 다루는 듯한 느낌이 조금 들었다. 그리고 코드에 즉각적으로 반응해서 미리보기를 해주는 preview는 정말 센세이션 한 것 같다.