Storyboardから始めるiPhoneアプリ開発

Twitterボタン
Twitterブログパーツ

Xcodeやobjective-c、Storyboardについて得た知識などiPhoneアプリ開発の体験記を配信

カテゴリ:画面遷移 の記事一覧

| |


草刈りパニック 海軍王アカデミー シンプルゆめ日記 シンプル表計算CelLion 魔球スラッガー 地頭を鍛えるでんしゃ算数 Don't 100
2012/02/24(金)

[Xcode][objective-c]コードで画面遷移する方法@UITableView

カテゴリ:画面遷移
==<<管理者環境>>==
MacOSX ver.10.7.2
Xcode ver.4.2.1
iOSシミュレータ ver.5.0
==============


画面遷移を、Storyboard上でSegueを直接繋ぐのではなく、コードで実装する方法です。
(私のようにStoryboardが導入されたXcode4.2以降にiPhoneアプリ開発デビューした方は、ここでつまづくハズ…)

今回は、UITableViewのCellをタップして画面遷移(NavigationView付き)する方法を紹介します
(コードで画面遷移する方法については、こちらの記事もご覧ください。コードで画面遷移する方法@UIAlertView)
▲記事が長いので2つに分割しました(2012/3/1追記

下画像のように、ナビゲーションバー付きのUITableView(Navi1)にデータを表示して、タップしたセルに応じてそれぞれの詳細画面に遷移する方法を紹介します。

navi_seni


※注意
遷移画面をNavi1と表記します
遷移画面をNavi2と表記します

手順1 Storyboardを開き、UINavigationController(初期画面のUIViewController付き)を配置する
1スクリーンショット 2012-02-24 2.50.40

手順2 RootViewController(タイトルを「Navi1」に変更済み)にUITableViewを配置する
2スクリーンショット 2012-02-24 2.50.40


手順3 Navi1のUITableViewを選択し、以下3つをアウトレットする
(1)「ConnectionsInspector」の「Outlets」項目にある「datasource」
(2)「ConnectionsInspector」の「Outlets」項目にある「delegate」
(3)「ConnectionsInspector」の「ReferencingOutlets」項目にある「NewReferencingOutlet」
3スクリーンショット 2012-02-24 2.50.40「ReferencingOutlets」の時のみ下画像のように「view」という文字が出てくる。クリックする。99スクリーンショット 2012-02-24 2.50.40

下画像のようになればOK
99_2スクリーンショット 2012-02-24 2.50.40


手順4 Navi1のUITableViewのセルを選択し、「AttributesInspector」の「TableViewCell」項目にある「Identifier」に「Cell」と入力する

99_3スクリーンショット 2012-02-24 2.50.40


手順5 遷移先画面として、UITabelViewController(Navi2)を配置
888スクリーンショット 2012-02-24 5.08.43

手順6 Navi2に対して、手順2〜4を行う
(今回は、手順2の「タイトル変更」は不要)
6_2スクリーンショット 2012-02-24 2.50.40

手順7 Navi2の「AttributesInspector」の「ViewController」項目にある「Identifier」に任意な名前(他と被らないように)を設定する(今回の例では「detail」としました)

98スクリーンショット 2012-02-24 2.50.40


手順8 Navi1と2にそれぞれのテーブルにデータを表示するためのクラス(UITableViewControllerクラス)を設定する。
※今回の例では、Navi1用に「TestNavi1」クラス、Navi2用に「TestNavi2」クラスを用意しました。
※UITableViewControllerクラスの作成方法はコチラの記事(クラスファイルの作成方法)を参照のこと
777スクリーンショット 2012-02-24 4.55.00

手順9 Navi1のヘッダファイルにNavi2のヘッダファイルをインポートする
#import "TestNavi2.h"
@interface TestNavi1 : UITableViewController
@end


手順10 Navi1のメソッドファイルに、データ表示と画面遷移のためのコードを記述する
#import "TestNavi1.h"

@implementation TestNavi1
{
NSArray *myArray;//セル表示用配列
}

- (void)viewDidLoad
{
//セルに表示するテキストを配列に格納
myArray = [NSArray arrayWithObjects:@"カテゴリ1",@"カテゴリ2",@"カテゴリ3",nil];
}

//セルの数を返す
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
//配列の要素数だけセルを設定
return [myArray count];
}

//セルの内容の設定
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];

// セルに表示する文字を設定
cell.textLabel.text = [myArray objectAtIndex:indexPath.row];

return cell;
}

//画面遷移
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
//セル選択状態の解除
[tableView deselectRowAtIndexPath:indexPath animated:YES];

//遷移先(Navi2)クラスのインスタンスを生成
TestNavi2 *testNavi2 = [self.storyboard instantiateViewControllerWithIdentifier:@"detail"];//手順7で付けた名前

//遷移先(Navi2)のタイトル(タップされたセルのテキストとした)の設定
testNavi2.title = [myArray objectAtIndex:indexPath.row];

[[self navigationController] pushViewController:testNavi2 animated:YES];
}

@end


手順11 Navi2のメソッドファイルにデータ表示のためのコードを記述する
#import "TestNavi2.h"

@implementation TestNavi2

// セルの数を返す
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
//今回は適当に5つとした
return 5;
}

// セルの内容の設定
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];

// セルに表示する文字を設定
cell.textLabel.text = [NSString stringWithFormat:@"%@ - %d", self.title, indexPath.row+1];

return cell;
}

@end


長くなりましたが以上です。うまく表示されましたでしょうか。
詳細画面から元の画面に戻るには、自動生成された「Navi1」ボタンを押すだけでOKです。

今回は、テーブルの中身を直書きで指定しましたが、実際のアプリはDBからデータを抽出するなど
「可変」での実装になると思います。余裕があればそのあたりも書こうかと思います。

コードで画面遷移する方法については、こちらの記事(コードで画面遷移する方法@UIAlertView)もご覧ください。
  1. 2012/02/24(金)|
  2. 画面遷移
  3. | トラックバック:0
  4. | コメント:24
2012/02/24(金)

[Xcode][objective-c]コードで画面遷移する方法@UIAlertView

カテゴリ:画面遷移
==<<管理者環境>>==
MacOSX ver.10.7.2
Xcode ver.4.2.1
iOSシミュレータ ver.5.0
==============

画面遷移を、Storyboard上でSegueを直接繋ぐのではなく、コードで実装する方法です。
(私のようにStoryboardが導入されたXcode4.2以降にiPhoneアプリ開発デビューした方は、ここでつまづくハズ…)

今回は、UIAlertViewのボタンをタップして画面遷移する方法を紹介します。
(コードで画面遷移する方法については、こちらの記事もご覧ください。コードで画面遷移する方法@UITableView)
▲記事が長いので2つに分割しました(2012/3/1追記


下画像のように、testVC1(TestViewController1クラス)に配置してあるボタンを押してアラートを表示させ、さらにアラートのOKボタンを押すとtestVC2(TestViewController2クラス)に画面遷移する方法を紹介します。

コードで画面遷移1

※注意
遷移ViewControllerをVC1と表記します
遷移ViewControllerをVC2と表記します

手順0 Storyboard上にUIViewControllerを二つ。遷移元画面(画像左)にAlertViewを表示させるためのボタンを配置して置いて下さい。

スクリーンショット 2012-02-24 22.39.08

▼ViewControllerへのクラスの設定も忘れずに(2012/2/29追記
※クラスファイルの作成方法は、コチラの記事(クラスファイルの作成方法)を参照のこと
スクリーンショット 2012-02-29 15.06.38_111


手順1 Storyboardを開き、VC2の「AttributesInspector」の「View Controller」項目にある「Identifier」に任意な名前(他と被らないように)を設定する(今回の例では「testVC2」としました)

コードで画面遷移


手順2 VC1のヘッダファイルにVC2のヘッダファイルをインポートし、「UIAlertViewDelegate」を実装する
#import "TestViewController2.h"
@interface TestViewController1 : UIViewController < UIAlertViewDelegate >

//アラート表示用ボタンのアウトレットも忘れずに
- (IBAction)alertTest;


手順3 VC1のメソッドファイルに、アラート表示と画面遷移をするコードを記述する
//アラート表示
- (IBAction)alertTest{
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:@"画面遷移テスト"
message:@"TestViewController2に\n画面遷移します"
delegate:self
cancelButtonTitle:@"Cancel"
otherButtonTitles:@"OK", nil];
alert.alertViewStyle = UIAlertViewStyleDefault;
[alert show];

}

//ボタン押下時の処理
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{
//遷移先ViewControllerクラスのインスタンス生成
TestViewController2 *testVC2 = [self.storyboard instantiateViewControllerWithIdentifier:@"testVC2"];//手順1で付けた名前

switch (buttonIndex) {
case 0://押したボタンがCancelなら何もしない
break;

case 1://押したボタンがOKなら画面遷移
[self presentModalViewController:testVC2 animated:YES ];
break;

}
}


手順3まで出来たら実行してみてください。
うまく表示されましたでしょうか。

コードで画面遷移する方法については、こちらの記事(コードで画面遷移する方法@UITableView)もご覧ください。
  1. 2012/02/24(金)|
  2. 画面遷移
  3. | トラックバック:0
  4. | コメント:8
2012/02/16(木)

UITableViewから画面遷移する方法@Storyboard

カテゴリ:画面遷移


▼2012/02/26追記
以下記事も参照のこと
[Xcode][objective-c]コードで画面遷移する方法
  1. 2012/02/16(木)|
  2. 画面遷移
  3. | トラックバック:0
  4. | コメント:0

検索フォーム

アプリ紹介記事

おすすめ書籍

入門者向けおすすめサービス

iPhoneアプリ開発やリリースに必須と思われるサービスです。開発と並行してリリースの環境を整える必要があります。

    シティバンク
    アプリから得られる収入やアプリ製作関連の支出を管理する口座が必要です。アプリから得られる収入は日本円だけではなく米ドル等の外貨の場合がありますので、グローバルで貨幣の両替が簡易な銀行口座を選択します。一旦はここで無難です。

    FC2ブログ
    アプリをリリースする際、サポートサイトが必須です。無料で使い勝手の良いFC2ブログがおすすめです。

    リンクシェア
    アプリの下によくある広告のあれです。ここと提携してアプリ内に広告を設置することで、広告収入を得ることができます。少しでも下心があるなら必須です。

    三井住友VISAカード
    デベロッパー登録やその他経費をクレジット払いにしておけば支払いの履歴も残りますし、一々振り込む手間が省けます。三井住友VISAカードならcitiバンクを支払い口座に指定できますし、なにかと便利です。

中級者向けおすすめサービス

iPhoneアプリをリリースしても、ダウンロードされなければ意味がありません。さらに集客力・発信力を向上させましょう。

    お名前.com
    格安で独自ドメインを取得することができます。自社サイト・個人サイトを作成する際にご利用ください。

    さくらのレンタルサーバ
    レンタルサーバーです。webサイト用もしくはアプリのデーターサーバー用にどうぞ。

    ロリポップ!レンタルサーバー
    レンタルサーバーです。webサイト用もしくはアプリのデーターサーバー用にどうぞ。

その他のおすすめサービス

私のオススメのサービスです。
参考なれば幸いです。


1位   リクナビNEXT

iPhoneアプリエンジニアは求人市場で需要があります。一般企業はアプリを広告として使うケースがありますから。私自身もリクナビNEXTを利用しています。


2位   随時更新していきます。

QRコード

QR

全記事表示リンク

全ての記事を表示する

カテゴリ

最新記事

月別アーカイブ

プロフィール

CasualAppTeam

Author:CasualAppTeam
初めまして。
iPhoneアプリ開発についてブログを綴っていきます。
xcodeやobjective-c,storyboardなどについて詳しく書いていきます。

最新コメント

最新トラックバック

RSSリンクの表示

自分のための外部リンク