SwiftUI 徹底入門
ソフトバンククリエイティブ
著者：金田浩明
はじめに
サンプルの使い方
目次
CHAPTER01 SwiftUIの概要
01 プロジェクトを作ってみよう
02 Xcode 11の画面
03 デザインツールを使ってみよう
ポップアップメニューによるソースコードの変更
モディファイアを直接記述する
SwiftUIにおけるレイアウト
ボタンの設定
ビューの階層構造
StoryboardやXibによるUI作成の問題点
これまでの問題を解決するSwiftUI
SwiftUIにおける状態の監視とビューの更新
04 Swift5.1の新機能
Opaque Return Type
暗黙のreturn
プロパティラッパー(Property Wrapper)
プロパティラッパーを作ってみる
ファンクションビルダ(Function builders)
CHAPTER02 SwiftUIのビューを理解する
01 SceneDelegateクラスについて
SceneDelegateとは
02 SwiftUIのビューを理解する
Viewプロトコル
03 標準のモディファイア
ビューのサイズを設定する
フレームサイズよりビューを優先する
ビューに枠線を設定する
ビューの表示位置を座標で指定する
ビューの表示をずらす
セーフエリア外にコンテンツを配置する
余白を指定してビューサイズを設定する
ビューの前景・背景を設定する
別のビューを重ねて表示する
ビューのクリッピング(切り取り)とマスキング
モディファイアの適用順序
04 Textビュー
文字列の表示行数を設定する
文字列の行間を調整する
Textビューの外観を変更する
05 Imageビュー
システムアイコンを使用する
画像をリサイズする
06 Colorビュー
アセットカタログで定義した色を参照する
07 グラデーション
均等なグラデーションを作成する
不均等なグラデーションを作る
円形グラデーション
放射状グラデーション
CHAPTER03 レイアウトの作り方
01 スタックレイアウトの使い方
VStackとHStack
基本的な使い方
伸縮する空白を入れる
仕切り線を表示する
ZStackでビューを重ねる
ビューの構築にif文を使う
ビューのアライメントを調整する
ビューのカスタムアライメント
02 サンプルアプリ「Tapioca Milk Tea」
サンプルで使用するデータ
オーダー詳細画面を作る
複数のプレビューを表示する
セルに使用するビューを作成する
UI作成時のポイント
プレビュー表示に使う端末やサイズを指定する
CHAPTER04 状態の管理を委譲する
01 状態の操作
ビューは状態を持たない
Stateによる状態の管理
02 状態変更に使用するビュー
Buttonビュー
Toggleビュー
TextFieldビュー
TextFieldビューによる境界線を追加する
SecureFieldビュー
Sliderビュー
スライダの操作イベントで処理を行う
Pickerビュー
各画像を使ったピッカーを作る
ピッカーの選択項目に配列を使う
ForEach構造体について
セグメンティッドコントロール風の表示にする
DatePickerビュー
日付の選択可能範囲を指定する
Stepperビュー
ステッパーの値の設定をカスタマイズする
03 「Tapioca Milk Tea」の注文画面を作る
注文画面の概要
プログラムの入力
注文詳細画面の修正
CHAPTER05 リストビューとスクロールビュー
01 リストビューとスクロールビュー
静的なリスト
複雑なリストを作る
リストを動的に作る
Identifiableプロトコルを使う
Listビューに行を追加する
Listビューから行を削除する
EditButtonビューを使う
行をドラッグして順序を入れ替える
リストにセクションを追加する
リストの表示形式をGroupedにする
02 スクロールビュー
全方位にスクロールさせる
縦・横方向のみにスクロールさせる
03 「Tapioca Milk Tea」の注文一覧画面とホーム画面を作る
各画面の概要
タピオカドリンクの注文を一覧表示する画面
店舗情報を表示するカスタムビュー
特別メニューを表示するカスタムビュー
ホーム画面の作成
CHAPTER06 図形の描画とカスタムビュー
01 シェイプ
四角形を描画する
図形のパス部分だけを描画する
角丸の四角を描画する
カプセルを描画する
円や楕円を描画する
02 シェイプを使ってカスタムビューを作る
Pathビューで図形を描画する
シェイプのカスタムビューを作成する
複数のパスを組み合わせる
パスに3次ベジェ曲線を追加する
パスに直線を追加する
パスを円弧を追加する
パスに矩形を追加する
03 「Tapioca Milk Tea」のカスタムビューを作る
カスタビューの概要
ストローを描く
アイスクリームを描く
ティーを描く
グラスを描く
タピオカとナタデココを描く
TapiocaTableViewに置き換える
CHAPTER07 ナビゲーション・シート・タブによる画面の切り替え
01 ナビゲーションビュー
ナビゲーションビューでビューを表示する
ナビゲーションバーにボタンを配置する
ナビゲーションビューで画面遷移を行う
リストの行をタップして画面遷移する
ナビゲーションバーを非表示にする
手動で前画面に戻る処理を行う
02 フォームを使用する
基本のフォームを作る
フォームをセクションに分割する
03 シートを使ってビューをモーダルに表示する
基本的な使い方
シートを閉じた時に処理を行う
List内でシートを表示する
シートを閉じるボタンを設定する
04 タブバーで画面で切り替える
基本のタブバーを作る
タブバーの表示を切り替える
05 サンプルアプリ「Tapioca Milk Tea」に画面遷移を追加する
店舗画面を作る
ホーム画面から店舗画面へ遷移する
注文履歴画面から注文詳細画面へ遷移する
タブバーでホーム画面、注文画面、注文履歴画面を切り替える
CHAPTER08 アラートとアクションシート
01 アラートを表示する
アラートの基本的な使い方
バインドしたオブジェクトでアラートの表示・非表示を定義する
アラートのボタンをタップした時に処理を行う
02 アクションシート
アクションシートの基本的な使い方
アクションを選択したときに処理を行う
03 サンプルアプリ「Tapioca Milk Tea」にアラートを追加する
アラートを追加する
ボタンをタップされた時の処理を追加する
CHAPTER09 ビューアニメーションとエフェクト
01 ビューの形状変換
拡大と縮小
回転
3D効果をつけた回転
02 ビューのエフェクト
不透明度
ぼかし
ブレンド
色の反転
色の乗算
彩度とコンストラクト
明度
色相
シャドウ
適用範囲の変更
03 アニメーション
基本のアニメーション
バネのアニメーションを作成する
Stateを使ったアニメーション
Bindingを使ったアニメーション
ビューが表示されたらアニメーションを開始する
04 トランジション
トランジション効果を結合する
非対称トランジション
05 サンプルアプリ「Tapioca Milk Tea」にアニメーションを追加する
タピオカドリンクにアニメーションを追加する
店舗の写真にシャドウを入れる
店舗の写真に3Dの回転効果を追加する
CHAPTER10 状態とデータフロー
01 State
Stateと状態変数
射影プロパティ
ビューの更新
02 Binding
03 ObservedObject
ObservableとCombineフレームワーク
@ObservedObjectでのBinding
状態の更新をSwiftUIに手動で送信する
04 EnvironmentObject
05 Environment
Environmentの使い方
allowsTighteningプロパティ
calendarとlocalプロパティ
colorSchemeプロパティ
defaultMinListHeaderHeightプロパティ
defaultMinListRowHeightプロパティ
editModeプロパティ
fontプロパティ
imageScaleプロパティ
isEnabledプロパティ
layoutDirectionプロパティ
lineLimitプロパティ
lineSpacingプロパティ
managedObjectContextプロパティ
minimumScaleFactorプロパティ
presentationModeプロパティ
timeZoneプロパティ
undoManagerプロパティ
06 サンプルアプリ「Tapioca Milk Tea」のデータの保存方法を変える
データを保存するためのクラスを用意する
注文を追加する処理を記述する
OrderRowViewの変更
OrderDetailの変更
OrderHistoryViewの変更
CHAPTER11 イベントとジェスチャ
01 SwiftUIでジェスチャを取得する
シングルタップ時の処理
ダブルタップ時の処理
ロングタップ時の処理
ジェスチャのカスタマイズ
ドラッグ時の処理
ビューをドラッグする
02 SwiftUIでライフサイクルイベントを処理する
TextFieldの入力時、キーボードで文字を隠れないように制御する
03 サンプルアプリ「Tapioca Milk Tea」にキーボード制御を追加する
注文画面のTextFieldにイベント処理を追加する
注文詳細画面に画像タップのイベント処理を追加する
CHAPTER12 フレームワーク結合とビューの作成
01 UIKitでSwiftUIを使う
SwiftUIをUIViewControllerに変換する
02 SwiftUIからUIKitを使う
ダイアログ風のインタフェースを実装する
SwiftUIでページコントロールを使う
コーディネーターを使う
SwiftUIでUINavigationViewを使う
03 サンプルアプリ「Tapioca Milk Tea」
PageControlビューとPageViewControllerを組み合わせる
画像に文字をオーバーレイ表示するビュー
HomeViewに作成したPageViewを配置する
店舗の場所をMapで表示する
CHAPTER13 SwiftUIからCoreDataを使う
01 SwiftUIでCoreDataを使う
SwiftUIで使えるようにCore Dataを構成する
AppDelegateとSceneDelegateクラスの修正
SwiftUIからNSManagedObjectContextにアクセスする
FetchRequestを使用してCore Dataからデータを取得する
02 サンプルアプリ「Tapioca Milk Tea」でCore Dataを使う
新規データを保存する処理を用意する
注文一覧画面を修正する
詳細画面でデータの表示と更新処理を修正する
注文一覧画面でデータをフェッチして表示する
注文画面のデータの追加処理を修正する
注文データがすぐに更新されるようにする
その他の修正
CHAPTER14 Advanced SwiftUI
01 アプリのローカライズ対応
SwiftUIでのローカライゼーションの手順
02 モディファイアを作成する
基本的な作成方法
ViewModifierでビューの構造を変更する
ViewModifierで処理を追加する
03 その他のテクニック
GeometryReaderでビューサイズを取得する
コンテナに含むビューの最大数
Textビューを連結する
04 サンプルアプリ「Tapioca Milk Tea」を日本語対応にする
カスタムViewを正方形に保つ
「Tapioca Milk Tea」を日本語対応する
終わりに
INDEX