【徒然iOS】気ままにUIKit72〜まとめ作業 UINavigationControllerで今まで作り込んだビューを繋ぐ〜
概要
このマガジンは四十を過ぎたおっさんが、
を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。
今回
なんかでも書いたとおり、
を使いながら、今まで作ったビューたちをひと繋ぎにしてく〜〜〜🕺
他にも
で既に紹介した機能
ボタンやラベル、StackViewControllerなんかを随所で駆使しながら、
コードを一切使わずに簡単にビューを繋いでひとつのアプリにする方法
を、
UI/UXに限らないデザインの原則
にも触れながら、ハイ、レッツゴ🕺
前準備
念の為、
バックアップ
をいつも通りやってから本題へ💃
本題
⒈今までのビューの全体像を確認しよう
今までこのマガジンを通じて、画面としては、これだけのビューを標準機能ごとに作ってきたんだけど、機能ごとにきちんと整理すると
詳細は、
基本ビュー
AutoLayout
テーブル
イメージ
ビュー
コレクション
テキスト
スクロール
ピッカー
エフェクト
地図
ジェスチャ
と全部で12項目に分類される機能を71記事で説明してきた💦
このままだと、
画面がひとつに繋がっていない
👉is initializeに設定してる画面以外開けない〜〜〜
そこで、この12分類、71個の画面をひとつのアプリとして操作できるようにするを説明する〜〜〜〜🕺
⒉入り口とカテゴリメニューの各ビューを新規で追加
まず、普段HPやスマホアプリなんかを開くと起動直後に開く画面
入り口（ポータル）画面
を追加
小さくてよく見えないかもだけど、一旦このまま〜〜〜〜
新規ビューを追加〜〜〜
ちなみに、イメージとビューについては、１個しかないので、合計10個の新規ビューを追加してる〜〜〜〜🕺
⒊NavigationControllerを入り口用に作ったビューの左に追加
今のままだと見にくいけど、左端に２つビューが増えてる〜〜〜〜
で、ここで見にくいのでStoryboardを拡大してく〜〜〜〜
⒋新規で追加された真ん中のTableViewは使わないので削除
⒌NavigationControllerと入り口のビューをエンベッドして、Navigation Controllerをis Initializeする
選択メニューが出てくるので、
root view controllerを選択〜〜〜〜🕺
is initializeで右向き矢印をNavigationControllerにセットしとく👀
⒍入り口ビューに詳細で紹介した12項目のメニューをボタンで追加
なんかで既に紹介してる、StackViewを駆使してメニューボタンを追加していこう
⒎ボタンを1段に２つずつ配置して、詳細のメニュー名に変更
今回は均等になるように２個ずつで６個に分けた🕺
文字色は、、、結局、
白背景であれば、黒が一番見やすい
ので、一旦、黒に統一
fontのスタイルをcustomからTitle1に変更
fontを相対サイズに変更するのは、結構重要で、、、
iOSにはiPhone/iPadと色々なサイズがあるから
と、こんな感じで、サイズに合わせて、それぞれフォントサイズを調整してくれるので〜〜〜〜
コードなんかで自分で調整する手間を省いてくれる〜〜〜
⒏入り口の各ボタンと各カテゴリメニュー用に用意したビューを繋ぐ
出てくるメニューのshowを選んで〜〜〜
他のボタンも同様に繋いでく〜〜〜
⒐同様に、各メニュー用ビューにもStackViewでボタンをビュー数分用意して、繋いでいく。
ビュー繋ぎ作業のポイント〜〜〜〜
以下の操作は、これまでで説明したことの繰り返しが基本なので、ポイントだけ書いてく〜〜〜〜🕺
イメージをボタンにセットしたい場合
なんかでここの機能については、アイコンを配置してたので、、、、
足りない分は、新たに採取してAssetに追加してから、
ボタンと各ビューを繋ぐ💃
画面数が４つ以下の場合
AutoLayoutのように、作ったビューが４つしかない（５個未満の）場合、Horizontal Stack Viewで細かくしてもかえって見にくくなるので、
まあ、逆に
ひとつのビューとボタンを繋いだあとで、
ナビゲーションエリアが上に追加されたことで、これまでのビューのパーツ配置がおかしなところは
ボタン名
AutoLayoutについては、あまり動きがなく、あくまでもサンプルなので、クラス名に合わせて、数字にしたけど、ボタン名は通常、
<そこを押したら次にどんな挙動が起きるか>
<そこを押したら次にどんな画面が開くか>
をユーザーが予測できる名前をつけるようにする
ので、
ように書く〜〜〜🕺
ただし、長くなりすぎないように、一言でわかる名前にしとく〜〜〜
ビュー数が20個近くになる場合、
数が多すぎる場合も、やり方は人それぞれだし、要求次第なんだけど、、、何回か今までの記事で出した
タップのターゲット
を意識して〜〜〜
要は、親指で隠れないくらいの大きさであればOKなので〜〜〜〜
と、これまでのビューを繋ぐ作業については以上なんだけど、、、
上に表示されていた、黄色三角のエラーが、、、
ま、実はこれ、
エントリーポイントが各ビューになかったのが
大半で、
各ビューを階層的に開ける
ようにしてあげたことで、大幅にエラーが減ったから。。。
今表示されてるエラーは、、、
出てきてるみたいなので、、、
元々、リッチな表示がAttributeで出来る設定項目の確認のために
作ったビューだから外しても問題なしかな🤔
と、今回の終わりに
パーツ組み込み編が今まで終わって、今度は、ビュー自体を色々構築できる機能を紹介していくので〜〜〜〜
編ごとに選びやすいようにしておく！
実は、
海外の機能デザインの本なんかを読むと書いてる鉄則で、こういうUI/UXをデザインするとき、
目的画面を開くまでの操作回数は多くても３回まで
てのがあるらしい🤔
それを踏まえて、シミュレータで実行してみても、、、、
ピンクをタップ
今回は地図をタップ（２回目）
ちゃん丸をタップ（３回目）
💃ので、全体の操作性的にも問題なし🕺
これで今回、ビュー自体はひとつにつながった✨
すっげえ、スクショばかりで長くなったけど、、、
画面を繋ぐだけの簡単なアプリなら、
コードが一切いらない
ってことがイメージできたと思う💦
だから、アプリ作るだけなら簡単なんだよね。
もちろんそれを知ってればなんだけど💦💦
ビュー（操作画面）数がそんなに多くなく、
操作も複雑にならない＝簡単なコードを組み込む程度
のアプリであれば、XIBとの連携やAutoLayoutを意識しないといけないUIKitでの開発でも、実は、
一晩でアプリを作ろうと思えば、意外と誰でも出来る
この連載は、
標準機能を網羅しながら、ひとつひとつ記事にしながら作ってるので、時間がかかってるけど、
を通しでひとつのプロジェクトファイルに組み込むだけなら、おそらく１週間もあれば個人的には終わるかなって感じ。
まあ別に、
一晩でアプリを作ろうと、記事にしながら数ヶ月かかろうと、
作り上げてしまえば同じだし。
作り上げる時間の短さを競う競技ではないので、
💃最終的に作りたいアプリが作れるようになれば、無問題🕺
インスタント食品を作ってるわけじゃないので、
時間なんか気にせず、みんなも世界にひとつしかない面白いアプリ制作を
楽しんでね〜〜〜〜
ま、一晩でアプリが作れるのか？
みたいな実験をしようとする人も発想が面白くて大好きだけど、
モノづくりは楽しまなくちゃ意味がないからね！！！！
ちなみにオイラは、はじめたてのころ、
極力、コードを書かずにアプリが公開できるか？
てのをやってた 藁🤣
でしかも、公開できた 笑笑🤣
ほとんどの人が、
アプリ＝プログラミング＝コード
と思い込んでるみたいだけど、Swiftは、
ローコード開発の走り
みたいなもんだし、コードばかりになると改修やメンテナンスで運用保守に作業コストがかかるから、個人開発するならコーディングベースな開発はあんま向かないんだよね🤔
なので、この視点で独学で調べ上げたことや発想が、今でも他のプログラミング言語の現場でも活きてんね🕺
Apple公式
さて、次回は、
をメインに、
タップすると、
のに、一番簡単で便利な
SFSafariViewController
の実装方法と使い方、あと簡単なパラメータ化のテクニックも絡めて、レッツゴする〜〜〜🕺
この記事が気に入ったらサポートをしてみませんか？