본문 바로가기

학습 노트/Swift UI (2022)

01. Swift UI

Swift UI


  • Code(Swift)를 사용해 UI를 만든다.
  • git, 업무 분담 시 Conflict에서 자유롭다.
  • Storyboard - code가 Outlet, Action으로 연결되고 기능을 구현하는 것과 달리
    SwiftUI는 모든 것이 Code로 구현돼 코드가 간결해진다는 장점이 있다. (Animation, Transition에 특히 유리)
  • Simulator가 아닌 Xcode Preview를 사용해 결과를 실시간으로 확인하고 편집할 수 있다.
  • Swift의 View는 구조체로 돼있으며 덕분에 작게 쪼개져도 성능에 미치는 영향이 적다.
    따라서 View를 겹쳐 사용해도 효과적으로 동작할 수 있다.
  • 필수적이고 자주 사용하는 기능들은 자동으로 처리된다 (DynamicType, DarkMode, Animation...)
  • H/W 제한사항을 제외하면 기본적으로 모든 애플 기기에서 동작한다.
    즉 iOS의 UIKit, Mac의 AppKit의 구분이 사라진다.
  • SwiftUI는 iOS13 이상부터 동작하지만 실제 구동 및 구현 권장은 iOS15 이상이다.
    개발 환경도 XCode11, Catalina 이상부터 동작하지만 권장은 XCode13, Bigsur 이상이다.

 

Project


Storyboard와 차이점

  • Library에서 추가시 Preview로 드래그하는 것이 아닌 코드로 드래그한다.
  • Attribute Inspector 대신 Context 메뉴를 주로 사용한다. (CMD + Rclick, Shift + CMD + A)
  • Preview를 시작하기 위해 업데이트 시작을 눌러 줘야 한다. (Option +CMD + P)

Preview

  • Preview 시작은 'Resume' (Option + CMD + P)
  • Swift UI Inspector (CMD + Lclick, Ctrl + Option + CMD + Lclick)
  • Swift UI의 Library는 View의 Sample Code를 함께 표시함과 동시에 Modifier의 목록도 함께 표시함.
  • Preview에 View를 추가할 때는
    해당 위치에 추가하고 새로운 V-Stack를 생성하는지
    해당 위치에 추가하고 기존의 V-Stack에 추가되는지
    해당 View를 대테하는지
    잘 확인해야 함.
  • Body 속성 밖에서 코드를 수정하면 Update가 중단됨. 다시 Resume 해 줘야.
  • Preview의 좌상단에는 Pin Control과 Page Control이 존재한다.
    Pin Control로 고정할 수 있고, 추가된 Preview들은 Page Control의 Tab으로 동작한다.
  • Preview의 좌하단에는 Canvas Control리 존재한다.
    순서대로
    Live
    Selectable
    Variants
    Device Settings
    Preview on Device
    다.
  • Preview의 우하단에는 Zoom Control이 위치한다.
  • Canvas Control의 Selectable은 Preview 내의 View 등의 객체를 선택할 수 있도록 한다.
  • Canvas Control의 Variants는 Dynamic Type, Orientation, Scheme에 따른 변화를 전부 펼쳐 보여준다.
  • Canvas Control의 Device Settings는 Preview의 기기 설정을 변경한다.
  • Preivew on Device는 연결된 기기에서 Preview를 실행한다.

 

SwiftUI 구조

@main

import SwiftUI

@main
struct SwiftWeatherApp: App {
	let service = WeatherService()
	
    var body: some Scene {
        WindowGroup {
            MainView()
                .preferredColorScheme(.dark)
                .environmentObject(service)
        }
    }
}

 

해당 키워드가 존재하면 App 실행 시 OS가 해당 함수를 사장 먼저 실행한다.
초기화의 역할을 한다.

해당 구조체는 App Protocol을 새용 하고,
main의 기본 구현을 제공한다.
body 속성이 App Protocol이 요구하는 기본 속성이며, 해당 속성에 Scene Protocol을 채용한 Scene을 반환한다.

Scene Protocol은 View 계층을 담는 Container 역할을 한다.
WindowGroup에 반환하는 View가 첫 번째 화면이 된다.

App Level 작업

  • 시작화면 반환
  • 모든 View가 공유하는 Model 선언
  • App Delegate의 구현 (필요에 따라 Push Notification)
    class 선언
    NSResponder, NSObject 상속
    UIApplicationDelegate Protocol 채용
    Method 구현
    Adaptor로 연결

 

Scene

Scene Protocol을 채용한 객체를 의미한다

플랫폼과 현재 앱 상태에 따라 view 계층을 표시하는 시점, 표시하는 방식을 자동으로 결정한다.

예를 들어

  • Window Group
    기본 형태, iOS와 WatchOS는 화면 전체를 채우고, iPadOS와 MacOS는 여러 윈도우를 한 번에 표시한다.
  • Document Group
    문서 앱에 적합한 형태

Xcode의 Window 메뉴에는 OS가 제공하는 메뉴, Xcode가 제공하는 메뉴가 존재한다.
이 중 OS가 제공하는 메뉴는 Scene이 자동으로 추가한 것들이다.

Scene 수준의 작업

  • Code의 가독성을 위한 Custom Scene 구현
  • Scene의 상태에 따른 별도의 작업을 실행

Scene의 상태

Scene Phase라는 System의 공유 객체로 확인한다.

@Environment(\.scenePhase) private var scenePhase
  • active
    화면 표시 ⭕️, 이벤트 처리 ⭕️
  • inactive
    화면표시 ⭕️, 이벤트 처리 ❌
  • background
    화면표시 ❌, background에 존재

Scene은 OS에 따라 여러 인스턴스를 만들 수 있기 때문에 주의해야 한다.
Scene이 하나일 때와 복수일 때의 반환 값이 다르기 때문이다.
예를 들어 여러 Scene 중 하나라도 active라면 active를 반환한다.
따라서 모든 Scene이 inactive여야 inavtive를 반환한다.

 

 

'학습 노트 > Swift UI (2022)' 카테고리의 다른 글

08 ~09. Alert & Confirmation Dialog  (0) 2022.09.23
07. Overlay  (0) 2022.09.22
05 ~ 06. Scroll View & Form  (0) 2022.09.22
03 ~ 04. Spacer & Group  (0) 2022.09.22
02. Stack  (0) 2022.09.14