社員ブログ
HOME  社員ブログ
ホーム > Interface Builder, Objective-C, Xcode, 社員:cobra > イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

2012年05月30日 15時33分48秒

こんにちは、コブラです。

 

早くも7回を迎えたこのシリーズ、我ながらよく続いてる!すごい!すごすぎる!!

まだまだiPhoneアプリ開発の情報ってネットに少ないですよねー。

いまいち欲しい情報じゃなかったり、

キャプチャがないから分かりづらかったり…素人でも分かる言葉で書けよと思ったり…まったく…ねぇ…

そんな悩みを解決できれば!と思い、出来るだけ細かく書いてます!つもりです!

 

そんな第7回目は、XcodeとIB(Interface Builder)の関係について!

その為に、ボタンの配置とイベントの実装方法を学びましょう!

 

まずは前回同様、RootViewController.xibをクリックし、IB画面を開きます。

今度は「Round Rect Button(角が丸いボタン)」を配置しましょう。

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

(クリックで拡大)

 

そして、RootViewController.hに記述を追加します。

@interface RootViewController : UIViewController
- (IBAction) buttonTapEvent;
@end

 

ここは宣言だけですね。

とりあえず、深く考えず手順どおりにやってみてください。

次にRootViewController.mに実際の処理を記述します。

- (void) viewDidLoad
{
 ~省略~
}
- (IBAction) buttonTapEvent {
NSLog(@"ボタンがタップされました");

 

さて、シミュレータを起動してみましょう。

画面に配置したボタンを押して、ログがXcodeの画面に出てきましたか?

ん?何もならない

そうなんです!

XcodeとIB、一緒のようで一緒でない。

繋がっているようで繋がっていないんです!

それはどういうことか?では、RootViewController.hに戻りましょう。

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

(クリックで拡大)

 

先程の追加行の左に、白い丸「○」があるのが分かりますか?

これは、「IBと繋がってない宣言ですよ」という印です。

つまり、

”おいおい、Xcodeの処理とIBのパーツをちゃんと紐付けてくれないと分からねぇぜ!”

と言ってます。(Xcodeが)

開発経験のある方なら分かると思いますが、

ボタンにイベントリスナーを張る必要がありますよね。

それをXcodeやIBでもやる必要があるわけです。

では、紐付けて(関連付けて)いきましょう!

 

再度、RootViewController.xibに戻ります。

左側のリストにある「File’s Ower」をクリックしてください。

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

(クリックで拡大)

画面右上の「→」アイコンをクリックすると、

先程作成したメソッド”buttonTapEvent”が表示されているのが分かりますね。

その右側にある白い丸をドラッグ&ドロップし、ボタンの上で離します。

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

(クリックで拡大)

 

すると、こんな画面が出てきます。

ボタンのどのイベントと紐付けるかを聞かれています。

今回は”Touch Down(ボタンがへこんだ時)”にしましょう。

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

 

すると、さっきまで白い丸だったものが黒くなり、何から横棒で繋がりました。

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

(クリックで拡大)

 

それでは、はやる気持ちをおさえて再びRootViewController.hに戻ってください。

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

(クリックで拡大)

おお!黒い丸になってる!

これが、XcodeとIBが紐付いた証拠です!

 

では、再び「Run」ボタンよりシミュレータを実行して、ボタンをタップ(クリック)すると…

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

(クリックで拡大)

このようにさっき記述した文言がログとして出力されるようになります!

 

IBで画面パーツを作って、

Xcodeに実際の処理を書いて、

再びIBで処理とパーツの関連付けをする

 

どうですか?分かりましたか!?

だいぶ開発の中身まで踏み込んできましたね!

もっと進んでる手ごたえを感じたい人のために、

次はちょっと面白いものを取り上げたいと思います!お楽しみに!

 

 

 

シリーズ記事一覧

イチから学ぶiPhone/iPadアプリ開発 第1回 「Macって何?」

イチから学ぶiPhone/iPadアプリ開発 第2回 「Xcodeって何?」

イチから学ぶiPhone/iPadアプリ開発 第3回 「プロジェクトって何?」

イチから学ぶiPhone/iPadアプリ開発 第4回 「計画を形にしよう!」

イチから学ぶiPhone/iPadアプリ開発 第5回 「ドキドキのシミュレータ!」

イチから学ぶiPhone/iPadアプリ開発 第5.5回 「実機でテストしたい!」

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!前篇」

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!後篇」

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

イチから学ぶiPhone/iPadアプリ開発 第9回 「イベントを知ろう!」

イチから学ぶiPhone/iPadアプリ開発 第10回 「オリジナルの画像を設定したい!」

イチから学ぶiPhone/iPadアプリ開発 第11回 「画面を切り替えよう!」

イチから学ぶiPhone/iPadアプリ開発 第12回 「BGMや効果音を付けよう!」

イチから学ぶiPhone/iPadアプリ開発 最終回 「アプリよ、永遠に~つまり、まとめ~」

Interface Builder, Objective-C, Xcode, 社員:cobra

  1. ymotoba
    2012年12月30日 23時20分13秒 | #1

    今日からiPhoneアプリ開発を始めました。
    Androidと全然違う開発環境でネットで調べても意味分かんない情報ばかりだったのに、ここの情報はめっちゃ分かりやすくて助かります。
    一日かけてボタンタップ処理すら分からなかったのに、ここを読んで数分でできました。

    • cobra
      2013年10月27日 22時32分51秒 | #2

      > ymotoba さん
      かなり遅くなりましたがコメントありがとうございます!
      お役に立てて良かったです!

  1. トラックバックはまだありません