これは、SwiftUI の共通のビュー要素のコレクションです。SwiftUI を学び始めた初心者向けです。
プログラミング言語のSwiftUIに関する記事をさらに読むには、こちらをクリックしてください
| TextEditor | ColorPicker | ToolbarItem |
|---|---|---|
| 長いテキストを表示および編集 | 色を選択できるようにします。 | バーにアイテムを表示します。 |
| image | image | image |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
| Map | DisclosureGroup | ProgressView |
|---|---|---|
| 注釈付きのマップを表示 | コンテンツを表示および非表示 | 進捗状況を表示 |
| image | image | image |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
| TextEditor | DatePicker | Sign in with Apple |
|---|---|---|
| 長い文字列を表示して編集 | 日付を選択します | Appleでサインイン |
| image | image | image |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
| Stepper |
|---|
| 値を増減 |
| image |
| コード例を見る{:target="_blank"} |
| Text | TextField | SecureField |
|---|---|---|
| 1つの文字列を表示 | 編集可能なテキストフィールド | パスワード入力用の編集可能 |
| image | image | image |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
| Image (ローカルファイル) | Image (SFSymbol) |
|---|---|
| 画像を表示 | システム画像を表示 |
| image | image |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
| List | ForEach | Form |
|---|---|---|
| image | image | image |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
| NavigationView |
|---|
| ナビゲーションビュー内に自前のViewを埋め込み |
| image |
| コード例を見る{:target="_blank"} |
| Button | NavigationLink | ビューシート |
|---|---|---|
| クリックしてアクションを実行 | クリックして別のビューに移動 | ビューシートを表示 |
| image | image | image |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} コード例を見る{:target="_blank"} |
| TabView |
|---|
| 画面の最下部にタブバーを表示 |
| image |
| コード例を見る{:target="_blank"} |
| Toggle | Picker |
|---|---|
| ユーザーが機能をオン/オフできるようにする | 指定したオプションから1つの値を選択 |
| image | image |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
上記ビューの複数を1つのビューに組み合わせて表示できます。
| HStack | VStack | Form |
|---|---|---|
| 水平配置 | 垂直配置 | ログインフォームの例 |
| image | image | image |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
| ZStack |
|---|
| 奥行き配置(前後) |
| image |
| コード例を見る{:target="_blank"} |
| Alert | ActionSheet |
|---|---|
| アラートウィンドウを表示 | アクションシートを画面の最下部に表示 |
| image | image |
| コード例を見る{:target="_blank"} コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
ビューモディファイアを使ってビューの外観を変更することができます。
例:
Image(systemName: "wand.and.stars") .font(.largeTitle) .foregroundColor(.blue)
以下は一般的なビューモディファイアのリストです:
| 変数名 | 使用法 |
|---|---|
| .font | 文字とSFシンボル (SF Symbol) 画像のフォントサイズを変更 |
| .frame | 表示されるオブジェクトのサイズを変更 |
| .padding() | オブジェクトの周囲にスペースを追加 |
| .foregroundColor(.blue) | オブジェクトの色を変更 |
| .onAppear | 画面にビューが表示されたときに実行するアクション |
| .onTapGesture | ユーザーがビューをタップしたときにアクションを実行する |
UIHostingControllerを使用して、UIKitビュー内にSwiftUIビューを表示することも可能です。
let swiftuiView = Map_Example() let uiKitViewController = UIHostingController(rootView: swiftuiView) self.present(uiKitViewController, animated: true, completion: nil)
こちらのコード例は、SwiftUICompatible と呼ばれるフレームワークを使用しています。
SwiftUICompatible へアクセスするにはこちらをクリックしてください。
SwiftUI は新しいフレームワークであるので、フィーチャー UIKit の幾らかを欠いています。そららフィーチャー UIKit を活用する為には、UIViewControllerRepresentable を使用しなければなりません。
| QuickLookView | PhotoPickerView | MailComposeView |
|---|---|---|
| ファイル内容をプレビュー | フォトピッカー | メールコンポーザー |
| image | image | |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
| TextMessageComposerView | SafariView | DocumentPicker |
|---|---|---|
| テキストメッセージコンポーザー | ウェブ表示 | ドキュメントピッカー |
| image | image | |
| コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} | コード例を見る{:target="_blank"} |
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つを以下でご紹介します。
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つの方法で初期化できます:
@State var showAnotherView: Bool = false- ビュー
ButtonSheet_Exampleを初期化すると、変数を初期化できます。ButtonSheet_Example(showAnotherView: true) 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 の使用を選択することをお勧めします。それにより、練習用プロジェクトで上記のコンポーネントをお試しいただけます。
質問をしよう:この問題ページで、自由に SwiftUI についての質問をしてください。{:target="_blank"}
コードの提供:コードを提供するためのGithub PRを自由に作成してください。{:target="_blank"}