混沌のiPhone開発ブログ

久々の更新です。最近のXcodeで使える機能としてストーリーボードというものがあります。今回はそれについて書いてゆきたいと思います。

これまでの状態では、画面のデザインをInterface Builderで作って、画面の移動などを行うのは全てコードを書いて行っていました。多くの場合は現在の画面から他の画面へ移る際には、現在の画面のNavigationControllerに対してpushViewController:animated:を送るという具合です。

 

    [self.navigationController pushViewController:controller animated:YES];

1. Interface Builder側で移動元のセルを選択状態にしておきます。
2. Controlキーを押しつつ、移動先のTableViewControllerまでマウスカーソルをクリックしたままでドラッグし、クリックを終了します。
3. マウスカーソルの右下にメニューが出るので、Selection Segueの項目のpushを選びます。
4. ViewController間が矢印で接続されるので、矢印中央のマークをクリックし、Attributes inspectorを表示します。
5. Identifierに任意の名前をつけます。StyleがPushになっているのを確認します。

実際に画面の移動が行われる時には、移動元のViewControllerのメソッドファイル内にあるprepareForSegue:sender:が呼ばれます。そこで移動先のViewControllerに対して必要な情報（タップされたセルの示すデータオブジェクトなど）を渡します。下はその一例で、選ばれたセルの行番号(0以上のNSInteger型変数)を渡しています。移動先のViewControllerはUIStroryboardSegueのdestinationViewControllerで取得出来ます。画面内にボタンを配置して、そのボタンを押したらセルをタップした時とは別の画面（設定画面など）に遷移させる、といったような拡張が容易にできるように、先ほど上で設定したidentifierの名前で条件分岐させるようにしていますが、拡張の予定が無いならif文で分岐させる必要はありません。

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

{

    if ([[segue identifier] isEqualToString:@"pushToSelectQuest"]) {

        NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];

        BDSelectQuestViewController *controller =

        (BDSelectQuestViewController *)[segue destinationViewController];

        [controller setSelectedAreaIndex:indexPath.row];

    }

}

なお、ストーリーボードを使いたい場合には、新規プロジェクトを作成する時にUse Storyboardsにチェックを入れてください。これでnibファイル（拡張子はxibでしたが）の替わりにstoryboadファイルが作成されます。

ビュー内にテキストフィールドが複数ある場合、何も設定をしていないと、ユーザーは入力したいテキストフィールドをタップし、入力を行うという作業を繰り返すことになります。それでも動くので問題はないのですが、あまりスマートな入力方法とは言えません。そこで何か良い方法は用意されていないものかと調べてみました。そこで行き着いたのがキーボードのリターンボタンを使う方法です。XcodeとInterface Builderを行ったり来たりすることになりますが、わかりやすいように手順を追って説明すると次のようになります。例では2つの値xとyを入力するテキストフィールドがあると思ってください。

1.まずXcodeでビューのテキストフィールドと対応するポインタを、テキストフィールドの数だけヘッダファイルのビューコントローラーの中括弧内にIBOutretを頭に付けて記述します。
例：IBOutlet UITextField *xValueTextField;

2.先ほどの中括弧の終わった後で@endより前の部分にプロパティを記述します。先ほどのポインタと対応するようにします。
例：@property (nonatomic, readonly) UITextField *xValueTextField;

3.メソッドファイルの@implementationより下の部分に@synthesizeを記述します。これも名付けたテキストフィールドの数だけ行います。
例：@synthesize xValueTextField;

4.dealloc関数内にポインタの解放を記述します。これも名付けたテキストフィールドの数だけ行います。
例：[xValueTextField release];

5.少なくともヘッダファイルを保存してからInterface Builderでビューのnibファイルを開きます。

6.それぞれのテキストフィールドを紐付けし、先ほど付けたポインタ名とそれぞれのテキストフィールドを対応させます。次にはじめに入力を行うテキストフィールド(例ではxValueTextField)をクリックします。

7.Attributes InspecterのText Input TraitsにあるReturn KeyをNextにします。これでこのテキストフィールドをタップした際、表示するキーボードに「改行」ではなく「次へ」というボタンが表示されます。

8.一度Interface Builderを閉じてXcodeに戻ります。変更内容は保存しておきましょう。

9.ビューのヘッダに、関数の宣言を追加します。関数の名前は好きなものを付けてください。
例：-(IBAction)xNext;

10.メソッドファイルに関数の本体を追加します。この例では次のテキストフィールド(yValueTextField)を入力可能状態にする命令を入れてあります。
例：

-(IBAction)xNext {

[yValueTextField becomeFirstResponder];

}

11.やはり少なくともヘッダファイルを保存した後、Interface Builderを開いて先ほどのビューコントローラーの紐付け用のウインドウ(黒っぽい色のもの)を表示します。

12.Received Actionsに先ほど追加した命令があるので、はじめに入力を行うテキストフィールド(例ではxValueTextField)へ紐付けします。この時、イベントの種類としてDid End On Exitを選びます。

以上で操作は完了です。こうすることで、例の場合ははじめのテキストフィールドでキーボードの「次へ」をタップしたときにxNext関数が実行され、yValueTextFieldが入力可能状態となり、入力用のキーボードが表示されます。なお、はじめに入力状態にするテキストフィールドの指定は、例の場合だとViewWillAppear関数に、

[xValueTextField becomeFirstResponder];

と書いておけばビューが表示された時点でxValueTextFieldが入力可能状態になります。