（初心者向け） SwiftUIのビュー要素集

これは、`SwiftUI` の共通のビュー要素のコレクションです。`SwiftUI` を学び始めた初心者向けです。

[SwiftUI ビューの基本フォーマット](#swiftui-ビューの基本フォーマット)

[変数の型](#変数の型)

[プレビュー](#プレビュー)

[出発点](#出発点)

[iOS 14 の新機能](#ios-14-の新機能)

[文字](#文字)

[画像](#画像)

[Table](#table)

[Navigations](#navigations)

[アクションを実行するにはユーザーに別のビューを表示するには](#アクションを実行するにはユーザーに別のビューを表示するには)

[タブバー](#タブバー)

[指定したオプションから1つの値を選択](#指定したオプションから1つの値を選択)

[画面に複数の要素を表示](#画面に複数の要素を表示)

[アラート / アクションシート](#アラート--アクションシート)

[View modifiers](#viewmodifier-ビューモディファイア)

[UIKit + SwiftUI](#uikit--swiftui)

[プログラミング言語のSwiftUIに関する記事 (10)](https://mszmagic.com/ioskiji/#swiftui)

# iOS 14 の新機能

| TextEditor | ColorPicker | ToolbarItem |
|---|---|---|
| 長いテキストを表示および編集 | 色を選択できるようにします。 | バーにアイテムを表示します。 |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/TextEditor.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/ColorPicker.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/BarItem.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/TextEditor_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/ColorPicker_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/ToolBar_Example.swift) |
 
| Map | DisclosureGroup | ProgressView |
|---|---|---| 
| 注釈付きのマップを表示 | コンテンツを表示および非表示 | 進捗状況を表示 |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/Map.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/DisclosureGroup.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/ProgressView.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Map_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/DisclosureGroup_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/ProgressView_Example.swift) |
 
| TextEditor | DatePicker | Sign in with Apple |
|---|---|---|
| 長い文字列を表示して編集 | 日付を選択します | Appleでサインイン  |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/TextEditor.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/DatePicker.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/SignInWithApple.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/TextEditor_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/DatePicker_Example.swift)| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/SignInWithAppleButton_Example.swift) |

# 文字

| Text  | TextField  | SecureField  |
|---|---|---|
| 1つの文字列を表示  |  編集可能なテキストフィールド | パスワード入力用の編集可能 |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/Text.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/TextField.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/SecureField.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Text_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/TextField_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/SecureTextField_Example.swift) |

# 画像

| Image (ローカルファイル) | Image (SFSymbol) |
|---|---|
| 画像を表示 | システム画像を表示 |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/LocalImage.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/SFSymbolImage.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/LocalImage_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/SFSymbolImage_Example.swift) |

# Table

| List | ForEach | Form |
|---|---|---|
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/List.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/List.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/FormList.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/List_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/ForEachList_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/FormList_Example.swift) |

# Navigations

| NavigationView |
|---|
| ナビゲーションビュー内に自前のViewを埋め込み |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/NavigationView.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/NavigationView_Example.swift) |

# アクションを実行するには/ユーザーに別のビューを表示するには

| Button | NavigationLink | ビューシート |
|---|---|---|
| クリックしてアクションを実行 | クリックして別のビューに移動 | ビューシートを表示 |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/Button.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/NavigationLink.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/PresentedSheet.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/ButtonAction_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/NavigationLink_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/ButtonSheet_Example.swift)  [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/ButtonItemSheet_Example.swift) |
 
# タブバー

| TabView |
|---|
| 画面の最下部にタブバーを表示 |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/TabBar.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/TabView_Example.swift) |
 
# 指定したオプションから1つの値を選択

| Toggle | Picker |
|---|---|
| ユーザーが機能をオン/オフできるようにする | 指定したオプションから1つの値を選択 |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/Toggle.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/Picker.png?raw=true"> |
|  [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Toggle_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Picker_Example.swift) |

# 画面に複数の要素を表示

上記ビューの複数を1つのビューに組み合わせて表示できます。

| HStack | VStack | Form |
|---|---|---|
| 水平配置 | 垂直配置 | ログインフォームの例 |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/HStack.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/VStack.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/LoginForm.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/HStack_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/VStack_Example.swift)  | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/LoginForm_Example.swift) |
 
| ZStack |
|---|
| 奥行き配置（前後） | 
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/ZStack.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/ZStack_Example.swift) |

# アラート / アクションシート

| Alert | ActionSheet |
|---|---|
| アラートウィンドウを表示 | アクションシートを画面の最下部に表示 |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/Alert.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/ActionSheet.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Alert_Example.swift) [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/AlertItems_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/ActionSheet_Example.swift) |
 
 
 
# ViewModifier ビューモディファイア
 
ビューモディファイアを使ってビューの外観を変更することができます。
 
例：
 
```swift
Image(systemName: "wand.and.stars")
    .font(.largeTitle)
    .foregroundColor(.blue)
```
 
以下は一般的なビューモディファイアのリストです：
 
| 変数名 | 使用法 |
|---|---|
| .font | 文字とSFシンボル (SF Symbol) 画像のフォントサイズを変更 |
| .frame | 表示されるオブジェクトのサイズを変更 |
| .padding() | オブジェクトの周囲にスペースを追加 |
| .foregroundColor(.blue) | オブジェクトの色を変更 |
| .onAppear | 画面にビューが表示されたときに実行するアクション |
| .onTapGesture | ユーザーがビューをタップしたときにアクションを実行する |
 
#  UIKit + SwiftUI
 
##  UIHostingController
 
UIHostingControllerを使用して、UIKitビュー内にSwiftUIビューを表示することも可能です。
 
```swift
let swiftuiView = Map_Example()
let uiKitViewController = UIHostingController(rootView: swiftuiView)
self.present(uiKitViewController, animated: true, completion: nil)
```

## UIViewControllerRepresentable

SwiftUI は新しいフレームワークであるので、フィーチャー UIKit の幾らかを欠いています。そららフィーチャー UIKit を活用する為には、UIViewControllerRepresentable を使用しなければなりません。

こちらのコード例は、`SwiftUICompatible` と呼ばれるフレームワークを使用しています。

[`SwiftUICompatible` へアクセスするにはこちらをクリックしてください。](https://github.com/mszmagic/SwiftUICompatible)

| QuickLookView | PhotoPickerView | MailComposeView |
|---|---|---|
| ファイル内容をプレビュー | フォトピッカー | メールコンポーザー |
| <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/PreviewController.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/PhotoPicker.png?raw=true"> | |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Competible/PreviewController_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Competible/PhotoPickerController_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Competible/EmailCompose_Example.swift) |


| TextMessageComposerView | SafariView | DocumentPicker |
|---|---|---|
| テキストメッセージコンポーザー | ウェブ表示 | ドキュメントピッカー |
| | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/SafariView.png?raw=true"> | <img width="300" alt="image" src="https://raw.githubusercontent.com/mszmagic/SwiftUI-Components-Library/main/Image/FileBrowser.png?raw=true"> |
| [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Competible/MessageCompose_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Competible/SafariView_Example.swift) | [コード例を見る](https://github.com/mszmagic/SwiftUI-Components-Library/blob/main/Code/Competible/FileBrowser_Example.swift) |

# SwiftUI ビューの基本フォーマット

SwiftUI ビューの基本構造は次のとおり：

```swift
import SwiftUI

struct TextField_Example: View {
    
    // 変数
    
    var body: some View {
        
        //UIコンポーネント
        //Text, Image, Form, VStack, List, ...
        
    }
    
}
```

`var body: some View` セクションで、ビューコードを入力。

このWebページで提供されているサンプルコードでは、`body` コードブロック内のコンテンツに注意を払う必要がある。

`// 変数` セクションで、変数を宣言する。

# 変数の型

お気づきになられたかもしれませんが、`SwiftUI` にはいくつもの型の変数があります。最もよく使われている変数の型2つを以下でご紹介します。

## `@State`

```swift
struct ButtonSheet_Example: View {

    @State var showAnotherView: Bool = false
    
    var body: some View {
        
        Button(action: {
            self.showAnotherView = true
        }, label: {
            Text("別のビューを表示")
        })
        .sheet(isPresented: $showAnotherView, content: {
            AnotherView(textContent: "Hello World.")
        })
        
    }
}
```

`@State` の値を変更することで、ビューの見た目に影響を与えることができます。

例えば、もしプログラムのどこかで `showAnotherView`が `true` に設定されていれば、ビュー `AnotherView` が表示されます。

プログラムの中で `@State` 変数を使う時は、変数名の前に `$` 記号を付け加える必要があるかもしれません。そうすることで、ビューにその変数を監視（および変数が変更されればビューのコンテンツを更新）させることができます。

`@State` 変数の値を次の3つの方法で初期化できます：

1. `@State var showAnotherView: Bool = false`
2. ビュー `ButtonSheet_Example` を初期化すると、変数を初期化できます。 `ButtonSheet_Example(showAnotherView: true)`
3. `init` 関数の中で変数を初期化できます：

```swift
struct ButtonSheet_Example: View {

    @State var showAnotherView: Bool
    
    init(...) {
        self.showAnotherView = .init(initialValue: false)
    }
    
    var body: some View {
        // TODO
    }
    
}
```

## 正規変数

正規変数は値を格納するために利用されます。正規変数を更新してもプログラムの見た目に影響はありません。

```swift
struct ButtonSheet_Example: View {

    var userTappedButton: () -> Void
    
    var body: some View {
        
        Button(action: {
            self.userTappedButton()
        }, label: {
            Text("別のビューを表示")
        })
        
    }
}
```

# プレビュー

XcodeではSwiftUIファイルに加えた変更を直接プレビューすることができます。プレビューは以下のように宣言します。

```swift
struct TextField_Example_Previews: PreviewProvider {
    static var previews: some View {
        TextField_Example(textEntered: "SwiftUI_Components-Library")
    }
}
```

`static var previews: some View` 内で、SwiftUI表示を初期化していただけます。Xコードの右側にある `Resume` ボタンをクリックするとプレビューが表示されます。

# 出発点

新規 `Xcode` プロジェクトを作成し、`SwiftUI App` の使用を選択することをお勧めします。それにより、練習用プロジェクトで上記のコンポーネントをお試しいただけます。

---

takoikatakotakoさんが書いた良い記事もあるので、読むことをお勧めします。

[SwiftUI100本ノック](https://qiita.com/takoikatakotako/items/0838d1bb7a15ad1edb87)

---

[Github ウェブページ](https://swiftui.mszmagic.com)

---

:relaxed: [Twitter @MszPro](https://twitter.com/MszPro)

:sunny: [私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。](http://mszpro.com/ioskiji/)
<img width="150" src="https://cdn.mszmagic.com/static-web-content/AppClipImage_small.png">