iPhone 日記アプリの作り方（１）画面、画面遷移
もくじページ
http://d.hatena.ne.jp/seika_m/20150822
プロジェクト作成
Xcodeのメニューから
File > New > Project を選択します。
iOS > Page-Based Application を選択してNext
Product Nameにファイル名を、
Organization Name にはあなたの名前、
Organization Identifier にはあなたのドメイン(WebサイトやGitHubのアドレスなど)、
Language は Objective-Cを、
Devices は Universal を
選択して Next
プロジェクトが作成されます
この状態で右上の再生ボタンを押すと
アプリが起動します。
ページをめくることができます。
ここに機能を追加していきます。
クラス追加
Table Viewのためのクラスを追加します
Xcodeのメニューから
File > New > File を選択します。
iOS > Cocoa Touch Class を選択してNext
Subclass of: で UITableViewController を選択してNext
Createを押下します。
日記データのクラスを追加します
Xcodeのメニューから
File > New > File を選択します。
iOS > Cocoa Touch Class を選択してNext
Subclass of: で NSObject を選択してNext
Createを押下します。
テーブルコントロール変更
一番左のナビゲーションエリアのMain.stroryBoardを選択します。
右下のオブジェクトからTabe View Controller を選んで、
左から３番目のエリアにドラッグ＆ドロップします。
左から２番目のエリアで黄色いアイコンのTable View Controllerを選択します。
メニューの
Editor > Embed In > Navigation Controller を選択します。
Navigation Controller が追加されます
左から２番目のエリアでNavigation Controlle を選択して、
is Initial View にチェックを入れます。
左から２番目のエリアで黄色いアイコンのTable View Controllerを選択します。
Classのドロップダウンボタンを押して、TableViewController を選択します。
左から２番目のエリアでTable View Cellを選択します。
Identifier に articleCell と入力します。
Table View Cell から articleCell に変化します
Segue追加（ボタン）
右下のオブジェクトから Bar Button Item を選択して、
Table view の Navigation Controller エリアにドラック＆ドロップします
IdentifierをAddに変更します
ボタンがプラスになります。
追加したボタンを右クリック（１ボタンマウスの場合、Controllキーを押しながらクリック）し、
茶色のRoot View Controlloer にドラッグ＆ドロップします
（青い線が出てきます）。
Segue の中からPresent Modally を選びます。
するとSegue （画面の間をつなぐ矢印）ができます。
Segue を選択し、Identifierに addArticle を入力します
Segue追加（セル）
左から２番目のエリアでTable View Cellを選択します。
すると左から３番目のエリアでセルが青くなるので右クリック（１ボタンマウスの場合、Controllキーを押しながらクリック）し、
茶色のRoot View Controlloer にドラッグ＆ドロップします
（青い線が出てきます）。
Segue の中からPresent Modally を選びます。
Segue を選択し、Identifierに addArticle を入力します
制約追加（Text View）
Data View Controller のLabel と View を削除します
（カーソルを合わせてDelete）
Data View に Text Viewを追加します。
Text Viewを選択し、下に４つ並んでいるボタンの左から２つ目を押します。
４つの点線をクリックして実線にします。
下のボックスに350, 他のボックスに30を入力してAdd 4 constraints を押します。
※先に実線にしてから、次に数値を入れます。そうでないとうまく動きません。
Text Viewを選択してから
下に４つ並んでいるボタンの左から３つ目を押し、Update Framesを押します。
Constraints が登録されている事を確認します（青い線で表示されます）。
制約追加（Text Field, Label, Button）
右下のエリアから
Text Field
を追加します
制約を追加します。
下のボックスに310, 左右のボックスに30を入力して Add 3 constraints を押します。
Text Field を選択してから
下に４つ並んでいるボタンの左から３つ目を押し、Update Framesを押します。
右下のエリアから
Label
を追加します
下のボックスに270, 左のボックスに30を入力して Add 2 constraints を押します。
下に４つ並んでいるボタンの左から３つ目を押し、Update Framesを押します。
右下のエリアから
Button
を追加します
Titleを Save&Back に変更します。
下のボックスに260, 右のボックスに30を入力して Add 2 constraints を押します。
下に４つ並んでいるボタンの左から３つ目を押し、Update Framesを押します。
Tap Gesture Recognizer追加
右下のエリアから
Tap Gesture Recognizer
を追加します
（すると画面上部にアイコンが追加されます。）
IBOutlet 追加
右上の蝶ネクタイのボタンを押します。
すると、Story Board画面の横にソースコードが表示されます。
Automatic と表示されているアイコンを Manual に変更し、
DataViewController.h を選択します。
Text View を右クリック（１ボタンマウスの場合、Controllキーを押しながらクリック）し、
ソースコードの@interface と @end の間にドラッグ＆ドロップします。
Name に articleBody を入力して Connect を押下します。
同じように、Text Fieldも右クリックして、ソースコードにドラッグ＆ドロップし、
Name に articleTitle を入力して Connect を押下します。
Labelは元からある
@property (strong, nonatomic) IBOutlet UILabel *dataLabel;
の上にドラッグ＆ドロップします。
背景色変更
Viewの背景色を変更します。
Data View Controller の
Viewを選択し、Background を Group Table View Background Color に変更します。
Root View Controller の
Viewを選択し、Background を Light Gray Color に変更します。
