ラベル iPhone の投稿を表示しています。 すべての投稿を表示
ラベル iPhone の投稿を表示しています。 すべての投稿を表示

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

2010年10月19日火曜日

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

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


プロジェクトの作成

View-Basedの一番シンプルなアプリをテンプレートから作成します。


これでiPhoneアプリをまず一つ作成します。





プロジェクトを保存し、シミュレーターを使って起動してみると、
Viewがひとつだけあるグレーの画面がひとつだけあるアプリが出来ます。

とりあえずの動作確認は、緑色の<ビルドと実行>をおすと、シミュレーターで確認できます。



NavigationTestViewController.xib が、このアプリの最初のViewです。
これを上の画面遷移の、「タイトル」とします。

部品を埋めていきます。
画面遷移にはボタンを使うことにします。

NavigationTestViewController.xibをダブルクリックするとInterfaceBuilderが立ち上がります。
これに遷移用のボタンを3つ作成してください。
ボタンをDrag & Drop 出来上がったボタンに分かりやすいように名前をつけました。



これを他の画面についても繰り返していきます。

画面の部品配置用のファイルを追加して、からボタンを配置していきます。

タイトル画面:NavigationTestViewController.xib
メイン画面:MainViewController.xib
結果画面:ResultViewController.xib
ヘルプ画面:HelpViewController.xib
設定画面:HelpViewController.xib


こんな感じ。
nibファイルの作成
View-Controllerのsubclass



メイン画面:MainViewController.xib
をダブルクリックして、IBを立ち上げボタンを配置します。

メイン画面なので、「結果に進む」だけのボタンだけ配置します。
(戻れないけどまあいいかと。)



というかんじで、以下の3つについても、命名規則をあわせて、同じ手順で作ります。

結果画面:ResultViewController.xib
ヘルプ画面:HelpViewController.xib
設定画面:SettingViewController.xib

全部作り終わると、画面ファイルはこんな感じです。




この状態で、GUIの準備はできました。
あとは、それぞれのボタンと、動作Actionを関連付けていきます。









ここからは、しばらくInterfaceBuilderの作業になります。

一度、すべてのxibファイルを閉じて、タイトル画面である、NavigationTestViewController.xibをダブルクリックして、表示します。

このファイルに「ボタンを押すと別画面に遷移する」という動作を関連付けましょう。
ここから出てくるファイルは、以下の3つです。

NavigationTestViewController.xib これは InterfaceBuilderでゴニョゴニョするだけ。

NavigationTestViewController.m これには、methodを追加します。
NavigationTestViewController.h これには、methodの定義だけを追加します。

じゃっそういうことでこれは明日やりますか。

2010年10月18日月曜日

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

iPhone App 開発者としては、初心者のmarcovです。

AppleのiOS関連の開発ツールには、プログラムを書くIDEであるXcodeとGUIを作成するInterfaceBuilder(以下IB)が、付属しています。

また、簡単にアプリを作るためのフォーマットも用意されており、XCodeでiPhoneアプリのテンプレートを選ぶと、取りあえず動くものが出来るのですが、これでは全く物足りません。

普通のゲームのようなアプリを作るときは、メニュー画面とゲーム画面、加えて設定画面、ヘルプ画面の最低でも4つ程の画面は必要だと思われますが、これらを作るときに、Xcodeの新規作成のプロジェクトでは、帯に短しタスキに長しです。

というわけで、画面が4つだけあるような、アプリを作って画面遷移だけしてみます。
これだけできていると、デザイナーから上がってきた、アプリをモックとして、動かすことができるので非常に便利です。また、WEBのライトウェイトプログラマーである自分としても、とりあえずの画面遷移が出来ていると作るターゲットがだいたい決まっているように見えて気分で気にも楽ですね。


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


今回はこんなアプリを作成します。



タイトル画面から、遷移してそれぞれもどってくるタイプです。
メインと、結果のページに付いては、一方向に流れてタイトルに戻ります。

続きはまた明日。