2010年11月15日月曜日

XCodeとInterfaceBuilderで10分でモックアプリを作る方法(3)

前回の続き。
全部で5回の予定です。
おそらく5回書き終わってからでないとあまり意味のない記事になっちゃいました…。
でも頑張ります。

では、ボタンを押したら画面遷移する動作を紐付けていきましょう。

まずは、XCodeの左側のツリーから、一番最初の画面の .xib ファイルをダブルクリックして、IB(InterfaceBuilderを立ち上げます。)

立ち上げると、こんな状態です。

1.動作の名前を決める

まず、メインの画面にボタンを押したときの操作を定義します。
先に、それぞれのボタンを押したときの操作を決めておきましょう。

3つボタンがあるので、こんな名前にしてみました。


ヘルプへ = changeViewHelp
設定へ = changeViewSetting
実行へ = changeViewMain

2.「File's Owner」に動作の名前を定義する。
これらを、IBをつかって定義していきます。
これからウィンドウを行ったり来たりするので混乱しないように。www
Document 画面の「File's Owner」をクリックします。



そうすると、右側の「インスペクタ」でこの画面に対するいろいろな設定ができるようになります。が、ここではまだちゃんとは使いません。w
上部にタブが4つ見えると思いますが、( i ) の所を選択してください。
その内容の一番上の「Class」のところに 「NavigationTestViewController」という名前が出ていると思います。これが、この画面の操作の統括をするプログラムの名前です。
(対応して、XCodeの中にも同じ名前のxxx.h xxx.mというファイルがあります。)





それを確認したら、「Class」のボックスにある、矢印をクリックしてください。
そうすると今度は、左側の「Library」のWindowの下側に、 「NavigationTestViewController」というボックスが現れます。


このプルダウンを「Actions」に合わせてください。

その状態で、「+」のボタンが下に現れます。

これをクリックして、3つのボタン操作を定義します。

こんな感じに。



3.「File's Owner」に動作の名前を定義したものを保存する。

これを、実際のファイルに保存します。
下のプルダウンから、「Write Updated Class File」を選択してください。

保護んウィンドウがでるのでこれで、Saveを押します。


もうあるけど、どうする?って聞かれますので「Replace」を押してください。
(置き換えられちゃいます。w まだファイルにはなにもかいていないので、大丈夫。)


4.ボタンの動作を「File's Owner」につなげる。

次に、それぞれのボタンを押した操作を紐付けます。
まずに、「実行へ」のボタンを、Mainの画面機能につなげます。

IBで「実行へ」のボタンをクリックして触ってください。
そうすると、右側の「インスペクタ」でボタンに対するいろいろな設定ができるようになります。




ここで、右側の「Connections」のタブを表示します。
ここには、ボタンの動作がすでに定義されており、押したら、どうとか、おして、指が離れたらどうとか、いろいろつなぐことができます。



ここでは、押して、指が離れたら、画面遷移するということにして、「Touch Up Inside」を使います。
これの右側にある◯をクリックし、ドラッグして、「Document」ウィンドウの「File's Owner」につなげます。「File's Owner」にまで、持って行ってマウスを外します。


と、グレーのサブウィンドウが現れるので、「実行へ」に対応する
changeViewMainをクリックします。



ちゃんとつながると、「Connections」の画面がこんなふうになります。



この状態で、.xibファイルを保存してください。

続いて、XCodeに戻り、画面遷移のプログラムを書きます。
そろそろ時間切れなので、また次…。中途半端でごめんなさい。


10分は無理だなこれ。www 
スゲー速さで作業してYoutubeではや回しビデオでもアップして帳尻合わせやろうかと思ってきました。wwww