Apple公式のiPhoneアプリチュートリアルやってみた。
突如iPhoneアプリを作りたいと思い立ち、公式チュートリアルをやってみました。
なかなか英語が大変だったので、自分用にメモしておきます。
今回参考にしたドキュメントは、コレ→ Start Developing iOS Apps (Swift)
始めに
今回は、食事を記録しておくためのアプリを作っていきます。アプリの中では、食事リストが表示され、リストの中には写真、食事の名前、5段階評価、写真が表示されます。さらに、食事のリストを別画面から追加したり削除したりできるという、いろんなアプリの基本になる機能が備わっています。
1.基本的なUIの作成
1.Xcodeを開く（アイコンをダブルクリック）。
2.「Create a new Xcode project」を選択。
3.「Single View Application」を選択。
4.各種情報を入力するウィンドウが立ち上がるので、
下のように選択する。
Product Name: FoodTracker（自分でアプリ作るときは、任意の名前でも可能）
Language: Swift
Devices: Universal
Use Core Data: Unselected.
Include Unit Tests: Selected.
Include UI Tests: Unselected.
5.Xocodeの各パートの説明。
6.上書き保存。（Command + S）
7.エミュレーターの立ち上げ。（Command + R）
メモ
AppDelegate.swift
機能：
1.AppDelegateクラスを定義している。このクラスはすべてのコンテンツが表示されるwindow(画面)を作成してる。
2.UIApplicationMain属性により、イベントを感知するループを回している。
で、 AppDelegateクラスは、windowプロパティを持っている。
var window: UIWindow?
で、これは作成するアプリのroot windowを参照していて、viewクラスの最上位に位置していてこのクラスが他のコンテンツを包括している。
（このメモについては、理解不足でわからないまま書いています。分かる人がいれば間違いを教えてもらえると嬉しいです、、、、、、＞＜）
ViewController.swift
機能：
You’ll start writing code in this source code file later in this lesson.
8.Xcodeの右下のObject libraryから、パーツを選択。ストーリーボードにドラッグ&ドロップ。
9.オブジェクトライブラリから選んだ、オブジェクトのプロパティを設定するには、右上のユーティリティーエリアから、
あトリビュートインスペクタを選択。値を設定する。今回はPlaceholderにEnter meal nameをと入力。
10.下記の写真のようにオブジェクトをストーリーボードにドラッグ&ドロップ。
そして、ラベルとボタンにそれぞれテキストをセットします。
11.アウトラインビューの見方
左下ににあるアウトラインビュートグルを押すと、階層状になっている
アプリのエレメントの構造を確認できます。
これがアウトラインビューです。
12.assistant editorを使った表示確認
assistant editorを使うと、異なるスクリーンサイズで(ex iPhone7,6等)、異なる画面の向き（縦・横）で要素のレイアウトの確認ができます。
1.assistant editorを表示するにはまずこのボタンを押します。
2.次に、このボタンで左右の邪魔な表示エリアを閉じます。
3.そして次にアシスタントエディタのTOPに,Main.storyboard を表示させるために、Automatic to Preview > Main.storyboard (Preview)を選びます。
そうするとこんな画面になります。
4.横向きの画面（landscape orientation）にするためには、下のボタンを押します。
するとこんな画面になります。
残念ながらテキストフィールドが画面いっぱいに表示されていません。
5.別のスクリーンサイズで見たいときはこのボタンを押します。
iPhone SEで確認してみましたがテキストフィールドの右端がはみ出しています。いろんなスクリーンサイズに対応するアプリのデザインを作るためには、それぞれのスクリーンサイズに合わせて要素（例：ボタン、テキストフィールド）のサイズ・位置が変わるように指定しなければなりません。
Auto Layout
Auto Layoutは、どのような画面サイズの変化にも対応する手助けをしてくれるレイアウトエンジンです。constraintsをというレイアウトをしているするルールを使って要素が、どの要素に対応して配置しているか、その要素のサイズは何かを指定します。
一番簡単なレイアウトの指定の仕方は、stack view (UIStackView)を使うことです。これはstreamlined interfaceによって要素を列と行のどちらかに配置します。
Auto Layoutを使うには既に配置した要素を、stack viewで包み込む必要があります。それから要素を配置するために必要なconstraintsを追加します。
Auto Layout constraintsを現在の画面に追加する。
1.まずはXcodeのレイアウトを元に戻します。
2.Shiftボタンを押しながら、Main.sotryボード上の要素をクリックします。（写真のように）
3.Xcodeの右下にあるEmbed In Stackボタンを押します。（もしくはEditor > Embed In > Stack Viewを選択）
これで選択された要素は、stack viewに包まれました。
Xcodeは、現在のレイアウトを分析し、それぞれの要素が上から順に積まれたものだと解釈しました。
4.もし必要であれば、outline viewの中からStack View objectを選択してください。
5.そしてAttributes inspectorの、Spacing fieldに、8とタイプすると垂直方向に要素の間のスペースが追加されたことがわかります。
6.そして次にXcodeの右下にあるAdd New Constraintsボタンをクリックします。
7.左右上の、「 I 」の字型の部分をクリックする。
そして、左右のテキストフィールドに0を入力、上には20を入力。
その下にある、Update FramesのItems of New Constraintsを選択、最後に、Add 3 Constraints ボタンを押して、Constraintsを追加する。
このconstraints部分は、一番近い前、後、上の別の要素とのスペースを指定している。ここでは一番近い別の要素とはsuperview、もしくはマージンです。なぜなら、“Constrain to margins” のチェックボックスが選択されているので、superviewの左右のマージンに対してstack viewが配置されています。このsuperviewの左右のマージンのおかげで、stack viewと画面の端にはスペースが空いています。
対照的にTOPのconstraintsは、画面のtop layout guideに対応しています。そしてtop layout guideは、status barの底です。もしstatus barがなければ画面の上は時にひっついてしまうので少しスペースを追加する必要があるのです。
メモ
ちなみにsuperviewは、階層構造の中で一番上にあるviewで、ひとつしかありません。その配下にあるのがsubviewsと呼ばれています。（複数存在可）
ただ、この時点では、まだテキストフィールドの右端が伸びていないです。
これを修正するためにconstraintsを追加しましょう。
テキストフィールドの幅を調整する
1.テキストフィールドを選択する。
2.Add New Constraintsメニューを再度開く。
3.右側の「 I 」の字のパーツ(constraint)を選択する。
4.0を入力する。
5.Update FramesのItems of New Constraintsを選択、Add 1 Constraints ボタンを押して、Constraintsを追加する。
その後、iOS Simulatorを立ち上げ（Cmd + R）、Hardware > Rotate Left and Hardware > Rotate Right をしてデバイスの向きを変える。横向き（landscape orientation）にした時に、電波や充電の状態が表示されたステータースバーが消えることに注目。
そしてテキストフィールドの中をクリックするとキーボードが表示されます。
Auto Layoutをデバッグする
もし期待した挙動と違っていれば、画面右下にあるUpdate Frames ボタンと、Resolve Auto Layout Issuesメニューボタンを使ってデバッグができます。
・Update Framesボタン
このボタンは選択したViewとsubViewをアップデートする。（よくわかってないです。）
・Resolve Auto Layout Issuesメニューボタン
・Choose Reset to Suggested Constraintsは、正しいConstraintsの値でアップデートする。
・Choose Clear Constraints は全てのconstraintsを取り除く。