iOS 애플리케이션 개발 -2SwiftUI

개요

SwiftUI의 사용 방법을 요약했습니다.

Swift 버전: 5.5

Xcode 버전: 13.0

# Swiftのバージョン確認
$ swift --version
swift-driver version: 1.26.9 Apple Swift version 5.5 (swiftlang-1300.0.31.1 clang-1300.0.29.1)
Target: x86_64-apple-macosx11.0

# Xcodeのバージョン確認
$ xcodebuild -version
Xcode 13.0
Build version 13A233

# 対話型実行環境を起動
$ swift

Welcome to Apple Swift version 5.4.2 (swiftlang-1205.0.28.2 clang-1205.0.19.57).
Type :help for assistance.
  1> print("Hello Swift")
Hello Swift

`control` + `D` => 停止

SwiftUI 소개

SwiftUI is a modern way to declare user interfaces for any Apple platform. Create beautiful, dynamic apps faster than ever before.
인용자 https://developer.apple.com/tutorials/swiftui
https://developer.apple.com/tutorials/swiftui

Stacks

HStack

컨텐츠 수평 정렬

HStack {
    Text("こんにちは！")
    Text("田村たいようです！")
}

VStack

컨텐츠 수직 정렬

VStack {
    Text("こんにちは！")
    Text("田村たいようです！")
}

상태 관리

@State

[SwiftUI] @State 사용 방법 | 복제 통신

SwiftUI의 기능 @State, @ObserveObject, @EnvironmentObject의 차이는 개발자 블로그 |주식회사의 isso노선에 있다

State란 무엇입니까?swiftUI

[SwiftUI] @State의 기본 사용 방법 - It's now or never

State란

SwiftUI를 통해 속성 변경 사항을 모니터링하여 다시 그리기

@State에서 선언된 속성은 View 내부 및 하위 View를 통해서만 참조/변경

import SwiftUI

struct ContentView: View {
    @State private var greeting: String = "おはよう！"
    // @State private var プロパティ名: 型 = 初期値
    // 型には、基本型(String,Bool,...)とStruct型を指定可能
    
    var body: some View {
        VStack {
            GreetingText(greeting: $greeting)
	    // @Stateで宣言されたプロパティは`$`をつけて渡す
	    // 子View(引数: $プロパティ)

            Button(action: { self.changeGreeting() }) {
                Text("切り替える")
            }
        }
    }
    
    func changeGreeting() {
        if greeting == "おはよう！" {
            greeting = "こんばんは！"
        } else {
            greeting = "おはよう！"
        }
    }
}

struct GreetingText: View {
    @Binding var greeting: String
    // `@Binding` : 他のViewの@Stateで宣言されたプロパティを参照・変更する
    // @Binding var プロパティ名: 型
    
    var body: some View {
        Text(greeting)
            .padding()
    }
}

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

@ObservedObject

@State에 카테고리를 지정해도 더 이상 그려지지 않습니다.따라서 감시 클래스의 상태를 다시 그리려면 @ObservedObject 속성을 선포합니다.

[SwiftUI] @ObservedObject 사용 방법 | 복제 통신

import SwiftUI

struct ContentView: View {
    @ObservedObject var greeting: Greeting = Greeting()
    
    var body: some View {
        VStack {
            GreetingText(greeting: greeting)
	    // 子ビューには、インスタンスをそのまま渡せばよい

            Button(action: { self.changeGreeting() }) {
                Text("違う挨拶で！")
            }
        }
    }
    
    func changeGreeting() {
        if greeting.text == "おはよう！" {
            greeting.text = "こんばんは！"
        } else {
            greeting.text = "おはよう！"
        }
    }
}

struct GreetingText: View {
    @ObservedObject var greeting: Greeting
    
    var body: some View {
        Text("\(greeting.firstName)さん、\(greeting.text)")
            .padding()
    }
}

class Greeting: ObservableObject {
    @Published var firstName: String = "たいよう"
    @Published var text: String = "おはよう！"
    // 監視対象となるプロパティを`@Published`で宣言
}

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

@EnvironmentObject

@EnvironmentObject에서 전체 참조/갱신 값을 적용한다고 선언합니다.

[SwiftUI] @EnvironmentObject 사용 방법 | 복사 통신

SwiftUI의 기능 @State, @ObserveObject, @EnvironmentObject의 차이는 개발자 블로그 |주식회사의 isso노선에 있다

アプリ名App.swift

@main
struct アプリ名App: App {    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(クラス名())
        }
    }
}

ContentView.swift

import SwiftUI

class クラス名: ObservableObject {
    @Published var プロパティ名: 型 = 初期値
    // ...
}

struct ContentView: View {
    @EnvironmentObject var プロパティ名: クラス名
    
    var body: some View {
        // ...
    }
}

struct 別のView: View {
    @EnvironmentObject var プロパティ名: クラス名
    
    var body: some View {
        // ...
    }
}

이미지 디스플레이

Image | Apple Developer Documentation

[SwiftUI] 가로 세로 비율 유지하면서 이미지 크기 조정 | 프로그래머가 된'중학교 졸업'남자의 블로그

이미지 셀 표시

SwiftUI에 카셀 설치

참고 문헌

SwiftUI Tutorials | Apple Developer Documentation

[SwiftUI 시작] 구성 요소 요약 1 | am 10

[SwiftUI 시작] 구성 요소 요약 2 | am 10 뚜뚜