この本を見ながら進めてる↓
前回⇒「【Swift奮闘記ep34】サンプルプロジェクトのソースコードを読み込む（ViewControllerクラスを読む）」
サンプルアプリの自動生成されたViewControllerクラスのソースコードを見てきた。
今回は実際にサンプルアプリの画面をつくっていく。
具体的な流れは本を見てもらうとして、今回はうっすらと手順を紹介したり、用語の確認を行うだけである。
Storyboardの画面構成について
iOSアプリの実装に入る。今回使うのはStoryboadというもの。
Storyboardの画面構成
今回作成するのは「タップすることができるボタン」と「タップに応じて変化するラベル」だ。
これらをStoryboardというXcode備え付けの機能を使って配置する。
ではさっそく。
ナビゲーターエリアのプロジェクトナビゲーターの中からMain.storyboardをクリック。
→エディタエリアが切り替わり、Storyboardが編集できるようになる。
中央にキャンバス、左側にドキュメントアウトラインペインが表示される。
ドキュメントアウトラインペイン・・・配置しているビューの階層が補助的に表示される。
編集対象を選択する際は、キャンバスからだと直感的に操作できるが。
しかしビューが増えてきたりして複雑になってくると、ドキュメントアウトラインペインで見た方がすっきり見ることができるというわけ。
インスペクタペイン・・・画面右上にあるスペース。キャンパスに配置したパーツに関する情報の閲覧や設定を行う。初期状態はファイルインスペクタが表示されているが、画面上部のアイコンによって５つの画面を選ぶことができる。
ライブラリペイン・・・右下にあるスペース。Xcodeで用意された画面部品（ビュー）やテンプレートファイル、コードの断片を使う事が出来る。今回使うラベルやボタンもここにある。
キャンバスに画面の位置を示す→（やじるし）があると思うが、これはStoryboardにおける初期画面を示すマーク。
複数画面ある場合には初期画面を選ぶことが可能。
シーンにビューを追加する
それでは実際に作業に移るが、そんな難しくはない。
右下のライブラリペインから「Label」と「Button」をキャンバスに追加する。
とりあえずは「Label」より下に「Button」を配置するようにする。
細かい設定は次で。
AutLayoutの制約を追加する
次に「Label」と「Button」の配置をルール付ける。
まずは「Label」について
- 上から１００ポイント空ける
- 水平方向の中央揃えにする
以上二つの制約を付けることとする。
上から１００ポイント空ける
これは正確に言うと「コンテナの上から１００ポイント空ける」と言う意味。
Pin画面を出して、配置設定したら「Add 1 Constraint」で設定完了。※具体的な内容は本で確認を。
（Pin画面とは・・・ビューの幅や高さ、座標、距離等といった空間的な配置に関する制約を追加する画面）
水平方向の中央揃えにする
同じように、Align画面というのを表示させて、中央揃えに設定する。
これでLabelの配置設定が完了した。
「Button」に関しても同様な処理を施したら、画面を更新して設定を反映させるための作業をする。（といっても画面下部の更新ボタンを押すだけ。）
ビューコントローラで制御を加える
この辺からは実際に作業してもらうのが一番理解できるので特に説明はしない。
大まかな流れだけ言っておくと
- アシスタントエディタを開く
- 「Button」にアクションを設定
- メソッドが追加される
- アクションの詳細の説明
- 「Label」にアウトレットを設定
- プロパティが追加される
- アウトレットの詳細の説明
- メソッドに処理内容の記述
- 実行
- デバックの処理
といった感じでサンプルアプリの実行までやる事が出来る。
かなりシンプルな設定しかしていないが、大体の流れが理解できてわかりやすいと思う。
これで第６章は終わる事となる。やっと。
次からは実際にアプリを開発していくこととなる。あー楽しみ。
コメント