SwiftUI 基礎 1

はじめに

SwiftUIとは？

SwiftUIは、Swiftの力を活用して、できるだけ少ないコードでAppleプラットフォーム全体にわたる優れたアプリを構築するのに役立ちます。SwiftUIを使用すると、1つのツールとAPIセットだけで、あらゆるAppleデバイスのすべてのユーザーにさらに優れた体験を提供できます。SwiftUI

環境とソフトウェア

MacOS(64bit)
Xcode13
オプション：iPadOS

推奨チュートリアル

オンライン

The 100 Days of SwiftUI

ZHHEO_Swift

DesignCode

Youtube

Learn SwiftUI online for FREE | Bootcamp #0

Building your first iOS app - SwiftUI Livestream

Build your first iOS app with SwiftUI

Build a Recipe App from scratch with SwiftUI - Part 1

Reality School

宣言的構文

SwiftUIは宣言的構文を使用するため、ユーザーインターフェイスが何をすべきかを単純に記述できます。たとえば、テキストフィールドで構成されるアイテムのリストが必要であることを記述し、各フィールドの配置、ォント、色を記述できます。コードはこれまでになくシンプルで読みやすくなり、時間とメンテナンスを節約できます。

import SwiftUI

struct SwiftUIView: View {
  var body: some View {
    Text(/@START_MENU_TOKEN@/"Hello, World!"/@END_MENU_TOKEN@/)
  }
}

struct SwiftUIView_Previews: PreviewProvider {
  static var previews: some View {
    SwiftUIView()
  }
}

SwiftUI

パート1

TabView

struct ContentView : View {

    var body: some View {
        
        ZStack {
        TabView {
            
            FirstView()
                .tabItem {
                    Image(systemName: "gamecontroller.fill")
                        
                    Text("Game")
                        .font(.largeTitle)
                    
                }
                .navigationViewStyle(.stack)
            
            SecondView()
                .tabItem {
                    Image(systemName: "allergens")
                    
                    Text("Sculpture")
                        .font(.largeTitle)
                }
                .navigationViewStyle(.stack)
        
            
            ThirdView()
                .tabItem {
                    Image(systemName: "heart.text.square")
                    
                    Text("Protection Mode")
                        .font(.largeTitle)
        }
        .accentColor(.blue)
        .navigationViewStyle(.stack)
            
            FourthView()
                .tabItem {
                    Image(systemName: "person.circle")
                        
                    Text("About")
                        .font(.largeTitle)
                    
                }
                .navigationViewStyle(.stack)
            
}
        }
}
}

FirstView()からFourthView()も準備する必要があります

ビューの1つを見てみましょう：

このビューに関連付けられたタブバーアイテムを設定します。

TabView {
    ContentView()
        .tabItem {
            Label("Menu", systemImage: "list.dash")
        }

ThirdView()
   .tabItem {
        Image(systemName: "heart.text.square")
        Text("Protection Mode")
                   .font(.largeTitle)

Labelの方が良いです

tabItem(_:)

パート1の参考文献

Adding TabView and tabItem()

パート2

NavigationView

シンプルなNavigationView

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("SwiftUI tutorials")
        }
    }
}

タイトルも追加する必要があります。

NavigationTitle

1	.navigationTitle("TEXT")

ナビゲーションビューのボタン

navigationBarItems()モディファイアを使用して、ナビゲーションバーに先頭と末尾のボタンを追加します。先頭のボタンはSF Symbolです（そこからダウンロードできます）

NavigationView {
    Text("SwiftUI tutorials")
    .navigationBarTitle("Master view")
    .navigationBarItems(leading:
            Button(action: {
                print("SF Symbol button pressed...")
            }) {
                Image(systemName: "calendar.circle").imageScale(.large)
            },
        trailing:
            Button(action: {
                print("Edit button pressed...")
            }) {
                Text("Edit")
            }
    )
}

Stack

一度に1つのトップビューのみを表示するビュースタックで表されるナビゲーションビュースタイル。

iPadバージョンの開発を行っている場合、iPadとiPhoneのビューの間に違いが見られる場合があります。タイトルに問題があるように見えます。

これを解決するには：

1	.navigationViewStyle(.stack)

NavigationLink

ナビゲーションプレゼンテーションを制御するビュー。

宣言

1	struct NavigationLink<Label, Destination> where Label : View, Destination : View {

概要

ユーザーはナビゲーションリンクをクリックまたはタップして、NavigationView内にビューを表示します。リンクの末尾のクロージャでビューコンテンツを提供することで、リンクの視覚的な外観を制御できます。たとえば、Labelを使用してリンクを表示できます：


```swift
NavigationView {
    NavigationLink(destination: DetailView()) {
        Label("Show Detail View", systemImage: "person")
    }
}

NavigationLinkの例

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: Text("Detail View")) {
                Text("Show Detail View")
            }
            .navigationTitle("Navigation")
        }
    }
}

パート2の参考文献

NavigationView

NavigationLink

NavigationBarItems

パート3

List

データのスクロール可能な行を表示するコンテナビュー。

struct ContentView: View {
    var body: some View {
        List {
            Text("First Row")
            Text("Second Row")
            Text("Third Row")
        }
    }
}

動的なリスト

struct ContentView: View {
    let names = ["John", "Apple", "Tim"]
    
    var body: some View {
        List(names, id: \.self) { name in
            Text(name)
        }
    }
}

セクション付きリスト

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Important tasks")) {
                Text("Eat chocolate")
                Text("Watch movies")
                Text("Drink water")
            }

            Section(header: Text("Other tasks")) {
                Text("Walk the dog")
                Text("Do homework")
            }
        }
    }
}

カスタムリストスタイル

List {
    ForEach(items) { item in
        Text(item.name)
    }
}
.listStyle(GroupedListStyle())

パート3の参考文献

List

Working with Lists and Navigation

パート4

Form

設定画面やデータ入力画面などのグループ化されたコントロールを表示するコンテナビュー。

struct ContentView: View {
    @State private var username = ""
    @State private var email = ""
    
    var body: some View {
        Form {
            TextField("Username", text: $username)
            TextField("Email", text: $email)
            
            Section(header: Text("Notifications")) {
                Toggle("Email notifications", isOn: .constant(true))
                Toggle("Push notifications", isOn: .constant(false))
            }
        }
    }
}

Picker

オプションのリストから選択できるコントロール。

struct ContentView: View {
    @State private var selectedColor = 0
    let colors = ["Red", "Green", "Blue"]
    
    var body: some View {
        Form {
            Picker("Select a color", selection: $selectedColor) {
                ForEach(0..<colors.count) { index in
                    Text(colors[index])
                }
            }
        }
    }
}

DatePicker

日付と時刻を選択するためのコントロール。

struct ContentView: View {
    @State private var date = Date()
    
    var body: some View {
        Form {
            DatePicker("Select a date",
                      selection: $date,
                      displayedComponents: [.date, .hourAndMinute])
        }
    }
}