SwiftでStoryboardを使った簡単な画面遷移(メモ的なもの)

  • このエントリーをはてなブックマークに追加
  • Pocket

こんにちわ、渡部です。

これまで何度かiPhoneのアプリを作ってみたいと思ったものの、いざプログラムを書こうとすると、Objective-C 言語の仕様や記述に戸惑ってしまい、放置していました。。。

が、ついにSwift言語というかなりモダンな言語が登場し、iPhoneアプリの開発ができるようになりましたので、これを期にiPhoneアプリの開発をしたいと思っています。

手始めにこれまで一度もiPhoneアプリを作った事のない僕が、SwiftとStoryboardを使って、簡単な画面遷移を行うアプリを作ってみたいと思います。

 

使用した環境はXcode6-Bate6となっております。

 

 

Swift、Storyboardでお手軽画面遷移アプリケーションを作る

 

1.プロジェクトを作る

概要:新規にSwiftで、画面遷移をするためのProjectを作る。

 

P1

1.メニューから[File]→[New]→[Project]を選択する。

 

p2

2.[Single View Application]を選択→[Next]ボタンを押下する。

 

P3

3.[Product Name]に作る名前を入力(名前は何でも良い)、[Language]でSwiftを選択→[Next]ボタンを押下する。

 

P4

4.projectFileの置き場所を聞かれるので、適当に設定→[Create]ボタン押下する。

 

p5

5.projectが完成。

 

2.Storyboardを使ってみる

概要:Storyboardを使って、View Controllerの追加と、ボタンの貼り付け、ボタン押下時に、画面遷移を行うように設定する。

 

s1

1.Main.Storyboardを表示する。

 

s2

2.リストから[View Controller]をドラッグし、遷移先のView Controllerを作る。

 

s3

3.それぞれのView Controllerに、リストから[Button]をドラッグし、ボタンをView Controllerに貼り付ける。

 

s5

4.3で作ったボタンを選択し、[Control]キーを押しながら、遷移先のView Controllerへドラッグし、POPした画面で[Action Segue]→[show]を選択する。

もう片方のボタンも同じようにする。

 

s7

 

s9

5.遷移した事がわかりやすいように、遷移先のView Controllerの[Background]のカラーを変更しておく。

 

3.画面遷移の確認

概要:シミュレーターを起動し、ボタンが押されるたびにView Controllerが切り替わる事を確認する。

s10

1.Runボタンを押下して、処理を実行する。

 

s11

2.最初に表示されるView ControllerのButtonをクリックすると、遷移先のView Controllerが表示される。

 

 

画面遷移時に値を引き渡しするよ。

画面遷移ができたところで、AppDelegateを使って2画面間の値の引き渡しをやってみます。

値の引き渡しを確認できるように最初のView ControllerにText Field、遷移先のView ControllerにLabelを貼り付けます。

AppDelegateに値の引き渡し用のプロパティを追加し、Text Fieldから値の取得と、Labelへの値の設定を行ってみます。

 

1.Text FieldとLabelの貼り付け

v2

1.最初に表示されるView Controller(→がついてる)に、リストから[Text Field]を選択し貼り付ける。

 

v4

2.遷移先のView Controllerに、リストから[Lable]を選択し貼り付ける。

 

2.StoryboardのView Controllerとソースの関連付けを行う

最初に表示されるView Controllerは、ViewController.swiftと関連付けがされていますが、遷移先のViewControllerは対応するソースがないため、新規にFileを作成し、関連付けを行います。

v5

1.メニューから[File]→[New]→[File]を選択。

 

v6

2.[Swift File]を選択し[Next]ボタンを押下する。

 

v7

3.[Save AS]にファイル名を適当に入力し、[Create]ボタンを押下する。

 

v10

4.作ったファイルを開き、ViewController.swiftの中身をコピーし、クラス名を適当な名前に変更する。

 

v14

v15

5.Main.Storyboardを表示し、2つ目のViewControllerを選択する。[Custom Class][Class]で、リストから4で入力したクラスを選択する。

 

v16

6.Storyboardの遷移先のView Controllerの名称が変わったことを確認する。

 

 

3.Text Fieldと、Labelをソースに紐付ける

v12

v13

1.ViewController.swiftとStoryboardを開き、Text Fieldを選択し、[Control]キーを押下しながら、ソースにドラッグする。POPした画面の[Name]に適当な名前をつけて[Connect]ボタンを押下する。

 

v20

2.Lableも同じようにする。

 

4.AppDelegateを使う

画面間の値の引き渡しには、画面間に親子関係がある場合はViewControllerクラスのプロパティを作成し値を設定する方法などがありますが、今回はAppDelegateを使ってみます。

 

v21

1.AppDelegate.swiftをオープンする。

 

2.AppDelegateに値引き渡し用のプロパティを作成する。

 

v22

3.ViewController.swiftファイルをオープンする。viewWillDisappearメソッドをoverrideして、最初のView Controllerが消滅する際に、AppDelegateに作った値引き渡し用のプロパティにText Fieldの値を設定する。

 

v23

4.ViewController2.swiftファイルをオープンする。viewWillAppearメソッドをoverrideして、遷移先のView Controllerが表示される際に、AppDelegateに作った値引き渡し用のプロパティからLabelに値を設定する。

 

5.画面遷移時に値が渡されるか確認

シミュレーションを起動して、値が渡されるか確認してみます。

 

1.Runボタンを押下する。

2.Text Fieldに適当な値を入力する。

v24

3.[Button]を押下すると、遷移先のView Controllerが表示され、Text Fieldで入力した値がLabelに表示される。

 

感想

StoryboardのObjectとソースの関連付けとか、ちょっとわかりにくい部分はあったものの、概ね思った通りに動かせたかなと思います。

Swift言語の仕様自体ちゃんと固まってないとか、コーディング規約がないとか、いろいろと不便な部分も多いですが、勉強するには良いタイミングだと思っています。

 

iPhoneアプリを作ることが初ということもあり、この記述でいいのかという疑問が常にあり…。ツッコミあったらよろしくお願いします。

 

今回作成したソースは、ここに

 

最後まで読んで頂きありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*