妄想アプリ開発 #2

前回に引き続き、妄想ヘルステックアプリ「健チャレ」のメイン画面を作りこんでいく。目指す画面はこれだ。

タブバーのデザインができたので、続いてナビゲーションバーのデザインをするのだが、その前にやることがある。

プロジェクト名をつける

今さらと言われそうだが、プロジェクト名が未設定だ。いつまでも「名称未設定」のままではよくないので、プロジェクト名の部分をダブルクリックして、名称を設定する。「健チャレ0.98」とでもしておこう。

アートボードに名を付ける

デザインする画面は一つではない。複数画面をデザインし、その画面遷移も設定するのだから、いつまでも”iPhone X, XS, 11, Pro – 1″のままでは管理に困る。ここは「メイン」とでもしておこう。先ほどと同様にアートボードの上部をダブルクリックして編集する。

アセットの使い方

色を間違えた

実は前回の作業で色を間違えていた。元のデザインの色が間違っていたのだが、アイコンの色は緑ではなく、黒である。

あわわわわわ。

しかーし、アセットにしておいたから一発で直る。Shift+Ctrl+Yでドキュメントアセットを表示する。「タブバー 表示色」を右クリックして「編集」を選択する。

カラーパレットが表示されるので色を#000000にする。

アイコンの色が黒になった。便利だ。

ところで、アセットがどこに使用されているのか確認する方法はないものか？プロパティインスペクターにはアセット名など表示されていない。

ドキュメントアセットを表示し、アセットを右クリックして「キャンバスのハイライト」を選択すると、アセットが適用されているオブジェクト表示される。

なるほどね。

ナビゲーションバーをつける

元のナビゲーションバーを削除

さて、いよいよナビゲーションバーのデザインだ。元のオブジェクトがLargeとなっていたので、Tab1と大きなタイトルになっている。これを通常の小さなタイトルに変更する。

アートボードからナビゲーションバーを削除する。Ctrl+Yでレイヤーを表示し、”Navigation Bar – Large”を選択する。

Deleteキーを押すか、右クリックメニューで削除を選択すれば消えてなくなる。

UIキットからコピー

続いてUIキットで通常のナビゲーションバーをコピーする。

こいつをメインのアートボードに貼り付ければいいはずだ。あれ？とんでもない位置に貼りついてしまった。

コンポーネントのリンクを解除

それだけではない。元のナビゲーションバーはStatus Barの下にクリップみたいなアイコンとともに表示されていたが、トップに表示され左側のアイコンもフォルダみたいなやつになっている。

なしてだ？？？

そもそもレイヤーのアイコンの意味が分からない。

調べてみると、これは元にしているＵＩキットのオブジェクトとリンクしているようだ。ＵＩキットを変更すると、こちらにも変更が反映されるらしい。

ＵＩキットはリファレンスではあるが、編集することはないだろうから、リンクを削除しよう。右クリックメニューで「コンポーネントをリンク解除」を選ぶか、Shift+Ctrl+Gキーを押す。ショートカット派の私は当然、Shift+Ctrl+Gキーを使用する。

をを！皆が同じアイコンになったぞなもし。

これでNavigation BarをTab Barの上にドラッグする。ついでに名前も変更しよう。ダブルクリックすれば編集できる。

オブジェクトの配置

貼り付けたナビゲーションバーをアートボードの上部にドラッグする。すると位置を自動調整してピタッと貼り付けてくれた。

簡単だ。

この画面はトップなので、親画面はない。”< Parent Title”は不要なので…あれ？Actionも不要だ。むしろ、ここは＋ボタンであってほしい。

コピー元を間違えた（涙）

いや、先の行為を繰り返せば簡単なことだ。机上の理論ではそのはずだ。練習の成果を試す時だと思えばいいのだ。人間は常に前向きであるべきだ。ポジティブシンキングなのだ。まずは脳内シミュレーションだ。

1. アートボードからナビゲーションバーを削除する
2. UIキットから元となるナビゲーションバーをコピーする
3. アートボードに貼り付ける
4. レイヤーパネルで位置を調整する
5. 名称を変更する
6. アートボードでドラッグして最上部に移動させる

こんなものか。さあ、１分で変更して見せようじゃないか。

１分かからなかったな。素晴らしい。自分の上達を実感することができたゾ。

不要なオブジェクトを隠す

次に”< Parent Title”を隠す。削除ではなく非表示にするのだ。レイヤーパネルでNavigation Barの”Left Accessory”の右側にある目のようなアイコンをクリックすれば表示されなくなる。

ショートカット派の私はもちろん”Ctrl+,”で制御する。もう一度選択すると表示に戻る。キーを押すたびに表示と非表示が切り替わるのだ。

検索を追加する

続いては検索だ。これもUIキットからコピーする。えーと検索バーは…

あれ？

なにこれ？ナビゲーションバー付きの検索バーがあるやん。

はあ？

マジか？

急速に自己嫌悪に陥る。調子こいてサクサクと作業していたつもりが、またもやコピー元を間違えてるやんけ。しかも一度ならず二度までも。

学習能力がないのか？
酔っ払いか？
五十路になって記憶障害でも起こしてるのか？

はああああああああああああああああああああああああああああああああ。体中の毒素があふれ出てくるかのようだ。

神よ、あなたはどうして人間にこれほどの試練をお与えになるのでしょうか？

検索バーを配置する

ふっ、認めたくないものだな、初心者ゆえの過ちとは。

過ぎたことを嘆いても問題は解決しない。当たらなければどうと言うことはないのだ。コギト エルゴ スム「我思う、ゆえに我あり。」だ。

先ほどと同じことをすればいいのだ。ソース元だけ変更すればいいのだ。涙を拭いて、さあ、前に進もう。

ナビゲーションバーを削除して…以下同文。

今度は１０秒ほどで終わった。ふん、この程度、今のうぬには造作もないことよ。

タイトルと文字を変更しておこう。

次はリストだ。