[Objective-C] UINavigationControllerのセグエを使って画面遷移をする

公開日: : 最終更新日:2014/08/09 iPhone App 開発, Objective-C ,

画面遷移の実装

今回はUINavigationControllerを使って画面遷移をしたいと思います。

実装方法としては、以下の方法が考えられます。

  1. StoryBoardのセグエを使う
  2. ViewControllerのインスタンスを生成してUINavigationControllerにPushする

StoryBoardはXCode5から組み込まれて、以前よりコード量が少なく、感覚的に画面設計を行えるようになりました。

とはいえ、XCode5以前からコーディングをゴリゴリ書いていた方には取っ付きにくい部分もありますが、慣れてしまえば今までより簡単に開発する手助けになるはずです。

一番プレーンな画面遷移は1.の方法のStoryBoardのセグエを使って実装していくことです。

また、StoryBoardのセグエを使って実現しにくい場合(例えば自作のダイアログを表示するなど)は、コードから組み込んだ方が手っ取り早いこともあります。

その場合は2.の方法を使う方がベターでしょう。

StoryBoardのセグエを使う

大まかな流れ

  • NavigationControllerを埋め込む
  • 遷移先のViewControllerを挿入する
  • 遷移先のViewControllerクラスファイルを新規追加する
  • ViewControllerとクラスファイルを紐づける
  • UI部品から遷移先のViewControllerにセグエ結びつけて定義名を記述

まずはメニューの「File > New > Project… 」から新規プロジェクトを作成、プロジェクトテンプレートはSingle View Application、Product Nameは任意の名前で結構です。ここではScreenTransitionTestとしました。
スクリーンショット 2014-08-05 12.56.02

次に、メニューの「Editor > Embed in > NavigationController」を選択し、NavigationControllerを埋め込みます。
スクリーンショット 2014-08-05 12.59.15

NavigationControllerが追加されました。
スクリーンショット 2014-08-05 13.00.32
遷移先のViewControllerをドラッグ&ドロップで追加します。

スクリーンショット 2014-08-05 13.02.27
スクリーンショット_2014-08-05_13_04_43

次に、メニューの「File > New > File… 」からクラスファイルを新規追加します。

ファイル名はSecondViewController、親クラスはUIViewControllerと入力します。

スクリーンショット 2014-08-05 13.09.22
先ほど新規追加したファイルとStoryBoardのViewControllerを紐付けするため、Custom Class欄にSecondViewControllerを選択します。

スクリーンショット_2014-08-05_15_18_23
遷移元のViewControllerにButtonを、遷移元にLabelをドラッグ&ドロップで貼付けます。このButtonは遷移イベント用のボタン、Labelは引き継ぎデータ表示用です。

スクリーンショット_2014-08-05_15_43_19
そして、Buttonを選択状態にして遷移先のViewControllerへCtrl + ドラッグで結びつけます。「Action Segue」はPushを選択します。

スクリーンショット_2014-08-05_15_38_33
スクリーンショット 2014-08-05 13.06.30

セグエを選択状態にし、「Identifier」をshowSecondにします。

※この識別子を使用して画面遷移を行います。何らかの値を入力しないと警告かエラーになります。

スクリーンショット_2014-08-05_15_58_02
次に、StoryBoardのLabelをソースファイルと結びつけます。

  • 下記の画像のようにアシスタントエディターの2分割を選択し、左画面:StoryBoard、右画面:SecondViewController.h(ヘッダーファイル)を表示します。
  • StoryBoardのButtonからCtrl + ドラッグで右のヘッダーファイルへ。(@interfaceから@endの間)
  • UILabelの定義名を入力します。ここではnameLabelとしました。

※Custom Classに定義名(この場合はSecondViewController)を設定していないと結合できません。
スクリーンショット_2014-08-05_13_31_59
また、ラベル表示用のプロパティを設定します。NSString型(文字列)のnameと定義しました。

スクリーンショット 2014-08-05 17.27.27
以上でStoryBoardでの設定は完了しました。次は遷移元のViewController.m(実装ファイル)のコーディングに入ります。

記述はとても少なく、簡単です。


#import "ViewController.h"
#import "SecondViewController.h"

@interface ViewController ()

@end

上記の#import “SecondViewController.h”が追加部分になります。

そして、以下のメソッドを追加します。

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([[segue identifier] isEqualToString:@"showSecond"]) {
        SecondViewController *secondViewController = [segue destinationViewController];
        secondViewController.name = @"hoge";
    }
}

prepareForSegueは画面遷移前に呼ばれるメソッドです。主な処理内容は、遷移先の画面に引き渡したい値を設定することがほとんどです。

  • 1行目:メソッドの宣言、segueはStoryBoardセグエの設定情報などが格納されています。senderは遷移元自身の情報が送られてきます。今の場合だとボタンが押されて遷移するので、UIButtonの情報になります。
  • 2行目:segue identifierでViewControllerで定義した名前が取得でき、その判断をif文で判定します。この定義名によってどの画面への遷移なのかを判断することができます。画面が複数ある場合はif〜else文によって処理を振り分けます。
  • 3行目:segue destinationViewControllerでセグエで紐づけられた遷移先のSecondViewControllerのインスタンスが取得できます。
  • 4行目:SecondViewControllerのnameプロパティに受け渡しパラメータとして、”hoge”という値を設定しています。

 

次に、遷移先のSecondViewController.mを編集します。viewDidLoadのメソッドを以下のように書き換えてください。

- (void)viewDidLoad {
    [super viewDidLoad];
    self.nameLabel.text = self.name;
}

viewDidLoadは画面がロードした後呼ばれるメソッドです。

  • 1行目:メソッドの宣言
  • 2行目:スーパークラス(ViewController)の同メソッドを呼び出し。
  • 4行目:UILabelプロパティのテキストに受け渡されたname値を代入して画面に表示します。

以上でコーディングは完了しました。これでボタンが押されたあと、次画面でhogeと表示されればOKです!

ViewControllerのインスタンスを生成して、UINavigationControllerにPushする

※UINavigationControllerの追加の仕方、ViewControllerの設定等は、1. StoryBoardのセグエを使うを参考に作成してください。

大まかな流れ

  • NavigationControllerを埋め込む
  • 遷移先のViewControllerを挿入する
  • 遷移先のViewControllerクラスファイルを新規追加する
  • ViewControllerとクラスファイルを紐づける
  • UI部品のイベントを作成、処理を記述

(ViewControllerとクラスファイルを紐づけるところまで省略します。)

遷移先のSecondViewControllerのStoryboard IDにSecondViewControllerと入力します。

スクリーンショット_2014-08-05_18_20_22

次に、StoryBoardのButtonイベントとViewController.h(ヘッダーファイル)を紐づけます。このとき、ConnectionをOutletからActionに変更し、アクション名を入力してください。この場合、ButtonClickedと設定します。

スクリーンショット 2014-08-05 17.53.29

ViewController.m(実装ファイル)にButtonClickedアクションが自動追加されたので以下のように編集します。

- (IBAction)ButtonClicked:(id)sender {
    SecondViewController *secondViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"SecondViewController"];
    secondViewController.name = @"hoge";
    [self.navigationController pushViewController:secondViewController animated:true];
}
  • 1行目:ボタンアクションの宣言です。senderにはボタンの情報が格納されています。
  • 2行目:遷移先ViewControllerの識別子によってSecondViewControllerのインスタンスを取得します。
  • 3行目:SecondViewControllerのnameプロパティに受け渡しパラメータとして、”hoge”という値を設定しています。
  • 4行目:NavigationControllerに遷移先のSecondViewControllerをプッシュしています。

処理は完了です。無事”hoge”と表示されたでしょうか?

スクリーンショット 2014-08-05 18.51.09スクリーンショット 2014-08-05 18.51.16

まとめ

基本的には、ほとんどの方がStroyBoardのセグエを利用した画面設計にすると思います。なぜならば、コード内で画面遷移を記述した場合、視覚的にわかりずらく、画面が増えれば増えるほど、メンテナンスも困難になっていきます。
StoryBoardのセグエを利用すればどの画面からどの画面に遷移するのか一目瞭然です。便利な世の中になりました。

ad

関連記事

[Swift] optional値の設定(??)

optional値がnilの時 プロジェクトでのテンプレートを選択した時にソースコードが自動生成さ

記事を読む

[Objective-C] 小数点を丸める!(数値変換)

小数点を含む数値 Objective-Cに限らず、小数点を含む数値を計算する場合はdoubleやf

記事を読む

[Swift] 画像を合成する

画像を合成 以下の2つの画像を合成してみます。円と四角です。 画像をプロジェクトに追

記事を読む

[Objective-C] バージョン更新時に変更内容をアラートで出力する

アプリの更新内容を表示したい! バージョン更新時に変更内容を表示させたいのは、ユーザーがいちいちA

記事を読む

no image

爆走中!

挫折街道爆走中です! が! 迷走中でもあるわけです、はい。 そんな中で、迷走するに至った訳

記事を読む

[Swift] UITableViewのセルにアクションを設定する

セル選択→アクション UITableViewControllerを使用したテーブルビューの画面があ

記事を読む

[Swift] プロパティリスト(plist)を使ってCoreDataで一括登録する

プロパティリストを使う 初期データやあらかじめ用意したデータを一括登録したい場合、プロパティリスト

記事を読む

iPhoneApp WorkManager公開されました!

きっとリジェクトされるんだろうなと思いながら申請を出して1週間。 本日、公開のメールが届きまし

記事を読む

[iPhone App] WorkManagerの不具合について

バージョン1.2.2の不具合 11/25日現在、iPhoneアプリの「WorkManger」バージ

記事を読む

[Swift] ビルド時のエラー&iOS8でNSBigDecimalのバグ

ビルド時のエラー Swiftプロジェクトを実行中に以下のエラーが出ました。 "__TFSs15_

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑