StoryBoard - shirai/SwiftLearning GitHub Wiki

StoryBoard

概論

目標

StoryBoardが司る大枠の概念を説明できる

わかったこと

Storyboardは、画面レイアウトと画面間の遷移を管理するためのUIビルダーである
Storyboardは主にシーンとセグエで構成されている
- シーンは一つの画面のレイアウトを決定できる部分
- セグエはシーンとシーンを遷移するためのオブジェクトである //画像挿入

わからなかったこと

使うことはできるが、上手く言葉で説明することができない

次にやること

StoryBoardとは何かを口で説明できるようになる

基本操作

目標

StoryBoard上の基本操作（ViewController他UIKitの生成、クラスの紐付け）が行える

わかったこと

ライブラリペインのオブジェクトライブラリから部品をエディターエリアにドラッグ＆ドロップすることで配置する
アトリビュート・インスペクタで選択したオブジェクトの設定を行う
- 主に部品の配置や、Label等のタイトルや色を設定する時に使う
アイデンティティ・インスペクタで選択したオブジェクトのクラスを設定する
- 主にシーンのクラスを設定する
コネクション・インスペクタで選択したオブジェクトとプログラムを接続する
- 主にボタンやテキストフィールドなど、イベントが起こった時に何をさせるかを記述したメソッドとの接続を行う

わからなかったこと

使うことはできるが、上手く言葉で説明することができない

次にやること

StoryBoardの基本操作を口で説明できるようになる

セグエ

目標

セグエを貼り遷移できる
同一ViewControllerから複数のセグエを条件によって切り替え、遷移できる
TableViewControllerから複数のセグエを選択されたセルに応じて切り替え、遷移できる

わかったこと

実装手順

StoryBoard上のDockのController部分を左クリックし遷移したい画面へiドラッグする
遷移先画面の表示方法を選択する
StoryBoard上にできたセグエを選択し、アトリビュート・インスペクタからIdentiferを設定する
Identiferを元に遷移したい画面を特定し遷移する [self performSegueWithIdentifier:@"Identifer" sender:self];
遷移先に渡す値を設定する -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ if ([[segue identifier] isEqualToString:@"Identifer"]) { 遷移先のクラス名 *変数名 = [segue destinationViewController];
```
     〜処理〜

   }
 }
```

わからなかったこと

使うことはできるが、上手く言葉で説明することができない
同一ViewControllerから複数のセグエを条件によって切り替え、遷移できない
TableViewControllerから複数のセグエを選択されたセルに応じて切り替え、遷移できない

次にやること

セグエによる画面遷移について口で説明できるようになる
複数のセグエを条件によって切り替え、遷移できるようになる

IBAction

目標

IBActionとは何かを説明できる
IBActionを利用し、UIButtonが押されたことを検知できる。

わかったこと

IBActionとはユーザーが部品を操作（タップなど）を加えた時に起こる動作を定義する

実装手順（UIButtonが押されたことを検知する）

StoryBoard上でシーンにUIButtonを配置する
UIButtonを右クリックし.mファイルの@interface〜@endの間にドラッグする
ポップアップされたウインドウのConectionをActionに設定しメソッド名をつける @interface DetailViewController () - (IBAction)メソッド名:(id)sender @end 〜中略〜 - (IBAction)メソッド名:(id)sender{
```
 }
```
.mファイル内にできたメソッドに処理を実装する

わからなかったこと

使うことはできるが、上手く言葉で説明することができない

次にやること

IBActionとは何かを口で説明できるようになる ''

IBOutlet

目標

IBOutletとは何かを説明できる
IBOutletを利用して参照を正しく紐付ける事ができる。

わかったこと

IBOutletとは、コードでの実装を可能にするために部品に名前を設定する部分である

実装手順（UIButtonに名前をつける）

StoryBoard上でシーンにUIButtonを配置する
UIButtonを右クリックし.mファイルの@interface〜@endの間にドラッグする
ポップアップされたウインドウのConectionをOutletに設定し変数名をつける

わからなかったこと

使うことはできるが、上手く言葉で説明することができない

次にやること

IBOutletとは何かを口で説明できるようになる