[SwiftUI] 糸かけ曼荼羅アプリを作る(4: かける糸を設定する)

SwiftUI

釘にかけた糸を描画するビューを作成しましたので、糸を設定するビューを作っていきます

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Big Sur 11.3
  • Xcode 12.5
  • iOS 14.5

メインビューと設定ビュー

いまさらながら、作るアプリの UI を考えます。

以下の2つのビューを持ちます。

  • メインビュー
  • 設定ビュー(詳細ビュー)

メインビュー

釘の数を設定された MandaraBoard ビューと 距離と色を設定された Itokake ビューを表示します。

設定されている MandaraString をリスト表示して、削除や順序の入れ替えもできるようにします。

新しい糸を追加するための “+” ボタンも配置します。

詳細ビュー

糸を追加するときに表示されるビューです。

糸に設定される 距離 と 色 を設定します。

(将来的には、)設定される 距離 と 色 でどのようになるかをプレビューで確認できます。
さらに、それまでに設定されている糸と重ねて表示することもできるようにします。

メインビュー実装

メインビューは、大きく3つの要素で成り立ちます

  • これまでに設定した糸を重ねて表示するビュー
  • これまでに設定した糸の情報を表示するリストビュー
  • 糸を追加するためのビューを表示する追加ボタン

糸を重ねて表示するビュー 実装

複数のビューを重ねて表示するには、ZStack を使用します。

ZStack を使って、これまでに作った 釘を打った板を表示する MandaraBoard ビューと 釘にかけた糸を表示する Itokake ビューを重ねて表示するようにします。

これまでに作成してきたモデルは、以下のようになっています。

MandaraModel の strings が糸にそれまでに設定された糸情報を保持しているはずなので、その糸分、Itokake ビューを表示する予定です。

ここまでで、以下のようなコードになります。

コード解説
  1. 一番奥の背景を白にします
  2. 背景の上に、板上の釘を表示します
  3. 板の上に、モデルで保持している糸情報を ForEach を使って表示します
  4. Itokake ビューは、MandaraString の情報が必要なので モデルに保持している情報を渡して表示します

糸の情報を表示するリストビュー 実装

上のビューは、糸を視覚的に表示しますが、具体的な距離や色の情報が文字情報としてわかることも必要です。(距離31で赤 とか)

複数の要素をリストとして表示するためには、List を使用します。

List の中身は、先ほど ZStack の中でも使っていた ForEach を使って、複数のビューを作成します。

糸の情報としては、間隔と色を表示することにします。

以下のようなコードになります。

コード解説
  1. モデルが保持する MandaraString の配列 strings の個々の要素についてのビューを作成する指定です
  2. 距離は、そのまま distance を数値として表示します
  3. 色は、RGBの値を表示するのはわかりにくいので、パレットの色として表示される文字列を表示します。
    別ライブラリを使って、Color と 色名称を対応づけています。使っているライブラリはこちら
    ついている .frame は、位置調整用に付与したものです。
  4. リストを横幅いっぱいに表示させるための設定です

糸を追加するためのビューを表示する追加ボタン 実装

ボタンは、Button を使うと簡単に実装できます。

HStack を使って、中央に配置するようにしました。そのままだと小さいので少し大きくしています。

コード解説
  1. HStack を使って配置することで横方向に対して中心に配置するようにします
  2. Button ビューを使います
  3. action: には、ボタンが押下されたときの処理を実装します(後から追加で実装します)
  4. label: には、ボタンの表示に使用する Image を設定します

ここまでのコードのまとめ

ここまでのコードをまとめると、ContentViewは、以下のようになります。

見た目としては以下のようになります。(まだ 糸追加機能を作っていないので、データを内部的に作って表示させてみました)

MainViewPreview
MainViewPreview

詳細ビュー 実装

次に、+ボタンを押された時に表示される 新しい糸を追加するビューを作成します。

詳細ビュー 実装

新しく ItokakeSettingView として作成します。

機能としては、選択された間隔と色を持つ MandaraString を作成しモデルに追加することです。

複数の選択肢からユーザーが選択するための UI として、Picker が用意されています。

Color には、iOS から ColorPicker が用意されていますが、自由に色を選択できてしまうと あとで 色を色名称で表示する時に困るので、特定の色からの選択となるように ColorPicker ではなく Picker を使います。

以下ようなコードになります。

コード解説
  1. モデルは、EnvironmentObject 経由でアクセスします
  2. このビューを閉じるための情報を @Binding で受け取ります(閉じる時に false を設定します)
  3. Picker での編集対象として MandaraString を @State 指定で宣言します
  4. 間隔指定の候補値として、素数の配列を用意します
  5. 色指定の候補として、色名称の配列を用意します
  6. 距離を選択するための Picker です
  7. 選択肢は、用意した素数の配列をつかった Text として表示します。.tag を使って選択した時の値を設定します
  8. Color にも同様に選択肢を Text として表示します。
  9. “OK”,”Cancel” ボタンを表示してビューを閉じることができるようにします
  10. “OK” が選択された時には、画面で設定した MandaraString をモデルに追加したあとで、閉じます

メインビュー 修正

追加ボタンを押下された時に、詳細ビューを開くように メインビューを修正します。

表示制御用に、@State 変数を作成します。

わかりやすいように 改めて ContentView 全体を引用します。

コード解説
  1. 表示制御用に、showStringDetail 変数を @State 指定で作成します
  2. ボタンを押下されたときに、showStringDetail を true にします
  3. showStringDetail が true になると ItokakeSettingView が シートとして表示されます

アプリの動作チェック

MandaraString を追加できるようになりました。

複数の糸を追加することで、メインビューでの表示が確認できます。

以下のような動作になっています。

やったこと
  • ZStack, VStack, HStack を使って、レイアウトした
  • List を使って、複数要素をリスト表示した
  • .sheet を使って、別ビューを表示した
  • Button を使って、押下時にモデルデータを追加した

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です