Home > iPhoneアプリ開発 > 画面遷移のやり方|iPhoneアプリ開発

画面遷移のやり方|iPhoneアプリ開発

巷ではナビゲーションメニューからの遷移ばっかりなので、
以下、ボタンクリックで画面遷移する方法です。

アプリでよくあるトップ画面(表紙)をクリックして、
メインメニューへ移動?みたいな動きを作っていきます。
(Xcode バージョン3.2.2)

?1.新規Xcodeプロジェクトを作成

Navigation-based Applicationを選択して、作成。
プロジェクト名は「GSTest」としましょうか。

画面遷移のやり方01

画面遷移のやり方01

2.2枚目のViewを作成

左側ツリーメニュー、「Resources」を右クリック→追加→新規ファイル。
「UserInterface」→「View XIB」。ファイル名は「secondview」で。

win_change02

画面遷移のやり方02

もっかい、今度は「Classes」を右クリック→追加→新規ファイル。
「Cocoa touch Class」→「UIViewController subclass」。
ファイル名は同じく「secondview」で。

画面遷移のやり方03

画面遷移のやり方03

さくさくいきましょう!
新しく出来たsecondview.xibをダブルクリックして開きます。

Interface Builder(以下、IB)が立ち上がるので、
File’s Ownerを選択状態にして、InspectorのIdentityを表示。
Classの所に、先ほど作ったsecondviewを選択します。

こんな感じ↓

画面遷移のやり方04

画面遷移のやり方04

で、さらにFile’s Ownerを右クリックして黒い画面。
viewの横の○をドラッグして、Viewファイルの上に持ってきます。

?離したらこんな感じ↓

win_change05

画面遷移のやり方05

ここまでやったら保存して、2枚目の作業はおしまい。
画面の中身はお好みでいじっといてもらってもいいです。

?3.トップ画面を作成する

はい!ここから本番です。
トップ画面からさっき作った2枚目の画面に遷移しましょう。

XcodeからRootViewController.xibをダブルクリック。
最初はTable Viewがありますが、邪魔なので削除してください。
(Deleteキー押せば消えます)

削除したら、LibraryからViewを持ってきましょう。
File’s Ownerのview Outletがなくなってるので、
心の隙間を埋めるようにさっき持ってきたViewを追加。
そしたらViewにIBでボタンを追加しましょう。

LibraryのObjectsからCocoa Touch→Inputs & Valuesを選択。
Round Rect Buttonを画面上に持ってきます。

画面遷移のやり方06

画面遷移のやり方06

で、またLibraryの、今度はClassesからRootViewControllerを選択。
下にあるActionから「Button_Click」というアクション追加。

画面遷移のやり方07

画面遷移のやり方07

File’s Ownerを右クリックして、Button_Clickの横の○を、
さっき作ったボタンの上に持ってきます。
なんか聞かれるので、「Touch Down(押す)」を選択。

こんな感じ↓

画面遷移のやり方08

画面遷移のやり方08

ここまでいけば設定を保存しましょう。
ただし、このまま保存してもClass Fileには影響しないので、
File→Write Class Filesを選択。
Margeを選択します。

※ちょっとわかりにくかったので補足します。
Write Class FilesはFile’s Ownerを選択状態にしてから行ってください。

画面遷移のやり方08-1

画面遷移のやり方08-1

※Margeんとこ、さらに補足します。

画面遷移のやり方08-2

画面遷移のやり方08-2


Fileから、Write Class Filesを選択。

画面遷移のやり方08-3

画面遷移のやり方08-3


Saveを選んで…

画面遷移のやり方08-4

画面遷移のやり方08-4


Margeを選択。

Margeの使い方は、差異のある行を選択して、
下のプルダウンから、矢印の方向を修正する方に向けてやります。
今回の場合は、全部Choose leftですね。

Class Fileも更新できたらXcodeに戻りましょう。
RootViewController.hを開いて、2枚目のページのヘッダファイルを追加します。

1
#import "secondview.h"

でオケー。
RootViewController.mを開いて、
Margeで追加したメソッド(Button_Click)に、遷移プログラムを追加します。

1
2
3
4
5
6
// 画面定義:initWithNibNameは実際に存在するxibファイル名を入れる事!
 secondview *second = [[secondview alloc] initWithNibName:@"secondview" bundle:nil];
 // 定義した画面へ遷移する。スライドアニメーションはなし。
 [self.navigationController pushViewController:second animated:NO];
 // 画面解放
 [second release];

これでいけるのか!? いや、まだ早いです。
あとはちょっとセコ技ですが、
RootViewController.hをもっかい開いて、

1
@interface: UITableViewController?{

の部分を、

1
@interface: UIViewController?{

に変更してください。
これしとかないと、起動した瞬間に落ちます。

さあ、これでビルドと実行をクリックだ!

どうでしょう?できましたか?

コメント数(Close):18

悩みました 10-08-28 (土) 20:46

分かりやすい説明ありがとうございます。

↓ここは@でなく#ですよね?
@import “secondview.h”
あと、↓なんかのダブルクォーテーションが全角でビルドエラーに悩まされました。コピペで楽しようとした罰ですねw
secondview *second = [[secondview alloc] initWithNibName:@”secondview” bundle:nil];

kaz 10-09-11 (土) 8:41

ボタンをクリックして画面を遷移させる方法がほんとに探してもなかなか出てこず、やっとここにたどり着きました。
もう少しのところで躓いてしまっております。よかったら教えてください。

「画面遷移のやり方08」で
File→Write Class Filesを選択。
Margeを選ぶのですが、左右classの比較される画面でどちらも真っ白で、Margeされている様子がありません。
MergeファイルはRootViewController.mを選んでいるのですが・・・
アドバイスがあればよろしくお願いいたします。

hmylab 11-03-14 (月) 2:40

ご指摘ありがとうございます。
@ → # 、訂正しました。

あと、コピペできるようにしておきました。

hmylab 11-03-15 (火) 23:00

>kazさん
すいません。
回答、大変遅くなりました。

うまくMargeが選べない原因ですが、
おそらくFile’s Ownerが選択されていなかったのだと思われます。

わかりにくかった箇所に補足しておきました。
また、ご参考ください。

zhuze3 11-05-11 (水) 12:05

File→Write Class Filesを選択。
Margeを選択します。

とありますが、Margeってどこにあるんですか。

zhuze3 11-05-11 (水) 12:08

前記の質問でFile’s Ownerが選択されていますが、Margeなるものがどこにもみえません。教えてください。

りょうじ 11-05-22 (日) 12:30

RootviewController.hファイルの@interfaceのUITableViewControllerのTableの記述を消してUIViewControllerに書き換えてもやっぱり起動した瞬間にダウンしてしまいます。何か他の要素が考えられますか?
よろしくお願いします。

りょうじ 11-05-22 (日) 13:35

先程質問した者ですが、よく考えてみると、.hファイルでインスタンス変数 IBOutlet UIButton *(変数名)とプロパティー @property(nonatomic,retain) UIButton *(変数名)の宣言を忘れてました。それを書き加えたら、ちゃんと画面遷移できました。ありがとうございます。

Nob 11-06-10 (金) 15:20

画面遷移を探していてたどり着き,なんとか実行できました
シュミレータで実行したところ,画面上部に青のラインがでてきました
おそらく,Navigation Controllerが原因だと思うですが
どうやったら消せるでしょうか

hmylab 11-06-21 (火) 0:12

> zhuze3さん
ずいぶん遅くなりましたが、補足説明を追記しました。
一度お試しください。
 
> りょうじさん
自己解決されたんですね。
回答できずに申し訳ありませんでした。
上記コメントで、同じ問題でお困りの方も解決できるかと思います。
ご丁寧な報告ありがとうございました。
 
> Nobさん
青のライン、といのは標準のナビゲーションメニューの事でしょうか?
であれば、その画面の.mファイルを開いて、
ロード関数(viewDidLoad)で、
self.navigationController.navigationBarHidden = YES;
と追加してみてください。
ご質問の意図と違ったら、またコメントお願いします。

nonam 11-08-29 (月) 3:26

Add Your Comment

のなめ 11-08-29 (月) 3:30

↑すいませんまちがえて投稿しました

当方初心者で、りょうじさんの言う様な事が判りません。
.hファイルとはRootviewController.hの事ですか?

書き加えるならどこへ書き加えたら良いのでしょうか?

hmylab 11-08-31 (水) 2:09

>のなめさん
.hファイルはRootviewControllerで、
書き加えるなら、

@interface RootViewController … {
IBOutlet UIButton *… ← ここ
}

@property(nonatomic,retain) UIButton *… ← ここ

ですね。

ただ、記事のやり方はInterface Builderを使ってボタンを配置するので、
上記宣言を使わなくても出来るはずですが。

のなめ 11-08-31 (水) 20:32

hmylab様

記事の方法で行えば、IBOutlet UIButton *?等の宣言がいらないという事でしょうか?

実行した途端落ちてしまいます・・・
なにが原因と考えられますか?

のなめ 11-08-31 (水) 20:52

↑すいません、試行錯誤しておりましたら出来ました!

3.トップ画面を作成する
にて、File’s Ownerのview Outletに新しいViewを追加する作業を忘れておりました。

基本的な事なのにお恥ずかしい限りです・・・

お手数をお掛け致しました!

hmylab 11-09-02 (金) 0:10

>のなめさん
自己解決されましたね(笑)
無事、画面遷移できたようで何よりです^^

原因箇所を報告くださり、ありがとうございます。

Dk 11-09-02 (金) 12:10

残念ながら、同じ作業してまったく出来ませんでした。
しかも、XCODE4では作業が異なるので参考にならず。

他の設定方法ありませんか?

初心者 11-09-25 (日) 22:12

>DKさん
同じくXCODE4の初心者です。
どうやら、インターフェースから作らなくても
大丈夫で、手順が少なくなっているみたいです。
http://d.hatena.ne.jp/moto_maka/20110506/1304623238

トラックバック数(Close):1

pingback from iPhoneアプリを作るまで第三回 | CAMPHOR-エンジニア部! 11-07-29 (金) 21:22

[…] あまり本見てもなんともなりそうになかったので、参考にしたのはこのサイトhttp://gihyo.jp/dev/serial/01/iphoneここに書いてあるアプリを実際にその通り作りました。簡単なアプリは作れるんじゃないかという気にさせてもらえました。ここで書いてあるのは一画面のアプリなので画面が遷移する、Viewが二枚以上あるアプリを作りたかったのでそれはここを参考にしました。http://www.hmylab.com/?p=15 […]

Home > iPhoneアプリ開発 > 画面遷移のやり方|iPhoneアプリ開発

Search
東日本大震災義援金

東日本大震災義援金についてのお知らせです。
→  日本赤十字社HP

Ads

Return to page top