絶対に挫折しないiPhoneアプリ開発入門Part.20 ~StoryboardのSegueを使って異なるView間での値の受け渡し~
前回:絶対に挫折しないiPhoneアプリ開発入門Part.19 ~xcode4.2のScroll Viewで画面をスクロールしてみよう(Storyboard編)~
Storyboardを使って画面遷移を簡単にできるようになりましたよね。
今回は画面遷移しつつ、あるViewで入力したものを他のViewに持っていくプログラミングをしてみましょうか。
今回はSingleViewApplicationからスタートしましょう。
プロジェクトの名前はなんでもいいですが、ぼくはSegueValueとしてみました。
さて、プロジェクトは立ち上がりましたでしょうか。
2つのView間での行き来なので、Storyboard上でもう一個Viewを配置しください。そんでもって、新しくファイルをつくってください。UIViewController subclassからUIViewControllerを選択してくださいね。名前はSecondViewControllerとしました。それから、Storyboard上で新しく配置したViewを選択して、SecondViewControllerにします。
次に、Storyboard上でいろいろ部品を用意して配置しましょう。こんなかんじ。ぼくはおまけ的にTextFieldに「入力してください」と薄い字のやつで打っておきました。TextFieldを選択して、Placeholderを編集すればできます。
ここまでで画面ができました。
じゃあ何からやっていきましょうかね。「入力したものを確認」と書かれてあるボタンを押せば、画面がSecondViewControllerにいく仕組みなので、まずはこのボタンからやってみましょう。
「入力したものを確認」のボタンを選択し、マウスで右クリックをしながらSecondViewControllerまでドラッグします。そして、「Modal」を選択してください。
これで画面遷移できます。
では、矢印を選択して、これに名前をつけましょう。Identifierと呼ばれるもので、この名前をちゃんとつけてあげて、そのSegueがどんな動作をするのかプログラミングしてあげるわけです。ぼくはToSecondと名付けました。
では、各々の部品に対するコーディングをするために、準備をしましょう。
メニューの「View」から「Assistant Editor」を開き、TextFieldを選択して右クリックをしながらドラッグ、「textField」と名付けました。
ViewController.h は
ViewController.h
#import <UIKit/UIKit.h> @interface ViewController : UIViewController <UITextFieldDelegate> @property (strong, nonatomic) IBOutlet UITextField *textField; @end
次に、ViewController.mを編集していきましょう。
まずはSecondViewController.hをのちのちのためにインポートしておきます。
SecondViewController.m
#import "ViewController.h" #import "SecondViewController.h"
- (void)viewDidLoad { [super viewDidLoad]; textField.delegate = self; } //Enterが押されたときにキーボードが消える。はじめからこの処理は書いてないので自分で書いて追加してくださいね。 - (IBAction)resignKeyboard:(id)sender { [sender resignFirstResponder]; } //「入力したものを確認」のボタンが押された時の処理。はじめからこの処理は書いてないので自分で書いて追加してくださいね。 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if([[segue identifier] isEqualToString:@"ToSecond"]){ //ToSecondはStoryboardのsequeのIdentifier名です。先ほどつけましたね。 SecondViewController *svc =[segue destinationViewController]; svc.labelData = textField.text; } }
今回は長くなるのでdelegateについては触れません。ググってください。
ToSecondというIdentifier名をつけたのはここで処理をプログラムするためなんですね。
ここで重要なのは、svc.labelDataの部分です。
この部分が今回の核となります。いきなりなんじゃこりゃって感じだと思うのですが、根気よくついてきて頂けるとすべてがわかります。
labelDataというのは値を受け渡しする仲介をするためのものです。これはSecondeViewControllerで作ります。
TextFieldで入力したものを、SecondViewControllerのラベルで表示したいんです。つまり。仲介してもらうデータをつくり、それをSecondViewControllerのラベルで出力する感じです。
あとでlabelDataとlabelはつくるので安心してくださいね。こんなイメージです。
さきほどと同様にして、SecondViewController.hを編集してください。
てな感じで、結局こうですね。
SecondViewController.h
#import <UIKit/UIKit.h> @interface SecondViewController : UIViewController @property (strong, nonatomic) NSString *labelData; //←これは自分で書いて追加するんですよ〜 @property (strong, nonatomic) IBOutlet UILabel *label; - (IBAction)goback:(id)sender; //←IBActionですよ〜。IBOutletじゃないですよ〜。gobackは名前です @end
できましたか?
次はmファイルの編集です。
まずはlabelDataをsynthesizeしましょう。
SecondViewController.m
#import "SecondViewController.h" @implementation SecondViewController @synthesize label; @synthesize labelData; //←追加してください。
さて、画面が呼び出されたときのコードをviewDidLoadに書くのでここをプログラムしましょう。
最初これはコメントになってて緑かもしれませんが、コメントを外してください。
- (void)viewDidLoad { [super viewDidLoad]; label.text = labelData; //ここでとうとうlabelDataが登場しましたね! }
これでlabelにlabelDataの内容が出力されるようになりました。
あとは「戻る」のボタンを押したら戻るようにしましょう。これはgobackという名前でさきほどつくりました。
mファイルのしたのほうにいくとIBActionがあるので、それを編集します。
- (IBAction)goback:(id)sender { [self dismissModalViewControllerAnimated:YES]; }
いよいよ最後です。またStoryboardに戻ってください。
TextFieldにおいて、入力し終わってEnterを押したときにキーボードが隠れるようにします。
ViewController.mでresignKeyboardをつくりましたね。これを生かします。
TextFieldを選択して、「Did End On Exit」の丸からドラッグしてViewControllerまで持っていってください。そして「resignKeyboard」を選ぶ。
これで完了です。
いろいろ応用してみてください。
======================
当ブログ管理人のツイッターはこちら
◎フォローしてくださると泣いて喜びます!ツイッター上で当ブログの質問などにもできるだけお答えしますし、役に立つiPhoneアプリ開発情報もつぶやきます。個人的なご依頼(たとえば、プログラミングの家庭教師、Skypeレッスンをしてくれないか、iPhoneアプリ開発の勉強会ってやってるの、とかですね)でもかまいません。
■スカイプレッスンについて
開発をしているとその都度ぶつかる問題があると思いますが、検索で調べてもなかなかわからない、あるいは調べても非常に時間がかかる場合があると思います。開発者のみなさんもお忙しいと思いますので、私のレッスンを受けながら開発を進めていただけると、大幅にお時間を短縮できます。加えて、iPhoneアプリ開発の基礎、応用が身につき、今後の開発もスムーズに進められます。
お問い合わせはツイッター、またはhiyoshimarukoアットマークgmail.comまでお願いします。(アットマークを@にしてください)お待ちしております!