Help us understand the problem. What is going on with this article?

(初心者向け) SwiftUIのビュー要素集

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

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

変数の型

プレビュー

出発点

iOS 14 の新機能

文字

画像

Table

Navigations

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

タブバー

指定したオプションから1つの値を選択

画面に複数の要素を表示

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

View modifiers

UIKit + SwiftUI

iOS 14 の新機能

TextEditor ColorPicker ToolbarItem
長いテキストを表示および編集 色を選択できるようにします。 バーにアイテムを表示します。
image image image
コード例を見る コード例を見る コード例を見る
Map DisclosureGroup ProgressView
注釈付きのマップを表示 コンテンツを表示および非表示 進捗状況を表示
image image image
コード例を見る コード例を見る コード例を見る
TextEditor DatePicker Sign in with Apple
長い文字列を表示して編集 日付を選択します Appleでサインイン
image image image
コード例を見る コード例を見る コード例を見る

文字

Text TextField SecureField
1つの文字列を表示 編集可能なテキストフィールド パスワード入力用の編集可能
image image image
コード例を見る コード例を見る コード例を見る

画像

Image (ローカルファイル) Image (SFSymbol)
画像を表示 システム画像を表示
image image
コード例を見る コード例を見る

Table

List ForEach Form
image image image
コード例を見る コード例を見る コード例を見る

Navigations

NavigationView
ナビゲーションビュー内に自前のViewを埋め込み
image
コード例を見る

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

Button NavigationLink ビューシート
クリックしてアクションを実行 クリックして別のビューに移動 ビューシートを表示
image image image
コード例を見る コード例を見る コード例を見る コード例を見る

タブバー

TabView
画面の最下部にタブバーを表示
image
コード例を見る

指定したオプションから1つの値を選択

Toggle Picker
ユーザーが機能をオン/オフできるようにする 指定したオプションから1つの値を選択
image image
コード例を見る コード例を見る

画面に複数の要素を表示

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

HStack VStack Form
水平配置 垂直配置 ログインフォームの例
image image image
コード例を見る コード例を見る コード例を見る
ZStack
奥行き配置(前後)
image
コード例を見る

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

Alert ActionSheet
アラートウィンドウを表示 アクションシートを画面の最下部に表示
image image
コード例を見る コード例を見る コード例を見る

ViewModifier ビューモディファイア

ビューモディファイアを使ってビューの外観を変更することができます。

例:

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ビューを表示することも可能です。

let swiftuiView = Map_Example()
let uiKitViewController = UIHostingController(rootView: swiftuiView)
self.present(uiKitViewController, animated: true, completion: nil)

UIViewControllerRepresentable

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

QuickLookView PhotoPickerView MailComposeView
ファイル内容をプレビュー フォトピッカー メールコンポーザー
image image
コード例を見る コード例を見る コード例を見る
TextMessageComposerView SafariView DocumentPicker
テキストメッセージコンポーザー ウェブ表示 ドキュメントピッカー
image image
コード例を見る コード例を見る コード例を見る

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

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

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

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 の値を変更することで、ビューの見た目に影響を与えることができます。

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

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

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

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

    @State var showAnotherView: Bool

    init(...) {
        self.showAnotherView = .init(initialValue: false)
    }

    var body: some View {
        // TODO
    }

}

正規変数

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

struct ButtonSheet_Example: View {

    var userTappedButton: () -> Void

    var body: some View {

        Button(action: {
            self.userTappedButton()
        }, label: {
            Text("別のビューを表示")
        })

    }
}

プレビュー

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

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本ノック

⭐️

Github ウェブページ

こちらのウェブページにアクセスすると、私の公開されているQiitaの記事のリストをカテゴリー別にご覧いただけます。

MaShunzhe
、😎ソフトウェアエンジニア、#Swift #iOS, 👨🏼‍💻 #WWDC Scholarship 17/18、🤩コーディング、U^ェ^U
https://mszmagic.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away