まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを

oFでiPhoneのUIを使う

予告通り、Objective-CとoFの連携について書きたいと思います。
ボタンをタップすると画像が切り替わるサンプルのコードを置いておきました(クリックダウンロード注意)
すみません、コードをそのまま書くと自動的にはてな記法が反映されておかしくなっちゃうみたいなので、サンプルコードを参照してください。
表示する画像は抜いてありますので、XCodeのdataフォルダを右クリックしてファイルを追加、お好きなものを入れてください。
その際は"s21main.png""s22main.png""s23main.png"のところをご自分の画像ファイル名に書き換えることをお忘れなく!

ちょうど明日、Make: Ogaki Meetingにてこの2つを使ったアプリのプロトタイプのデモプレゼンを行います。

結果論として、oF+iPhoneの場合、iPhone特有のUIを使えば使うほどObjective-Cの記述が多くなります。
や、当然なのですが、場合によっては9割Objective-Cで1割oFとか。
映像や音処理をoFに任せて、操作部分をObjective-Cで書く場合は特に。
このあたりを参考にObjective-Cで「ボタンタップしたらHello world!と表示」ぐらいはやっておいたほうがいいと思います。
oFだけでGUIを記述するのは激しく大変ですから・・・


以下の方法は、前書いたFreeImageのライブラリの追加をしているものとして進めます。
今回は3つの画像ファイルを読み込んで、ボタンを押すと次の画像に進むという単純なものを作ります。

流れとしては、
1.UIViewController subclassを追加して、Interface Buiderでボタンとか配置
2..hでアウトレット(テキスト表示などプログラムから部品に情報を送る)とアクション(ボタンを押したりスライダを動かしたりするときに起こる振る舞い)を使いますよ〜と宣言する
3.Interface Buiderで関連づけを行う
4..mmで具体的なアクションを記述
5.testApp.mmでiPhoneのviewをoFのviewに重ねなさいと言う
6..mmでoFの処理を書く
7.testApp.hで変数の宣言を行う

という感じです。
この7つだけ。

5.6と7の順番は逆でもOKですが、1から4まではこの順番でやってください。
また、1から4までは作業が1ステップ進む度に必ず保存してください。保存しないまま進めると、Interface Buiderで指示したことがXCodeで反映されてないことがあります・・・(その逆も)


では具体的な手順を。ちょっち時間がないのでテキストベースの説明になることをご容赦ください。


1.FreeImageのライブラリを追加し、ベースSDKの設定を変えて保存したemptyExampleをコピー

2.srcフォルダを右クリックして、UIViewController subclassを選択
このときにWith XIB for user interfaceのチェックを入れておく!(別に後から付け足してもいいけど)

3.新しくできた.mファイルの拡張子を.mmに変更(プロジェクトファイルを開くと.mが赤くなってますが、デリートキーで消して.mmを読み込ませます)

4..xibをダブルクリックしてInterface Buiderを立ち上げ、viewのbackgraundを「clear color」にする(ただし背景が変わらなかったり、画像の処理をoFでやらないのなら別)

5.Toolsメニュー→Library→Objects→CocoaTouch→Inputs&Values→Round Rect ButtonをViewにドロップする

6.コードを書いて、.hでボタンとこのアクションが関連していますよ、と宣言する
(サンプルのGUItest.h参照)

7..xibをダブルクリックしてInterface Buiderを立ち上げ、File's Ownerを右クリック
「-(IBAction)hoge:(id)sender; 」で指定したhogeの右横の○をクリックし、ボタンまで持って行く。
ボタンのところで離すとメニューが出てくるので、Touch Up Insideを選ぶ

8..mmにアクションを記述にしていく
今回は「ボタンを押すと次の画像に切り替わる」という処理をいちばん簡単な方法で実現するために「ボタンを押すとoFで設定したtouchCountという変数がひとつ増える」というアクションを書きます。
ボタンを押した回数によって画像が切り替わるというものです。

9.Objective-Cの記述はここまで。今度はoF(testApp.hと.m)に記述していきます。
難しいこと書いてますが、要するに以下の3つの記述でoFのViewにUIViewを乗せてるだけです。
赤字は2.で付け足したファイルのファイル名と同じにしてください。

GUItest * guitestController;
・guitestController = [[GUItest alloc] initWithNibName:@"GUItest" bundle:nil];
・[ofxiPhoneGetUIWindow() addSubview:guitestController.view];


10.最後にtestApp.hを書く
とは言っても肝心なのはtestApp.mmのほうなので、.hは使う変数の宣言のみです。