openframeworks を使ったiPhoneアプリケーション〜横向きアプリ〜

2010年06月07日 渡部隼人
 
スーパーソフトウエア > テクノロジートレンド > iPhone > openframeworks を使ったiPhoneアプリケーション〜横向きアプリ〜
 

横向きアプリを作成する上でちょっと詰まった点を紹介しようと思います。

まずは簡単に横向きアプリの作り方を紹介します。

1.testApp.mmの設定

第一段階。testApp::setUp()内で基準方向を指定してやります。

testApp.mm

	//If you want a landscape oreintation 
	iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT);

元々コメントアウトされていると思うので、はずしてやるだけです。
そうするとこうなります。

20100607wat1.png

想定通りですね。バックはtestApp::draw()で描画しています。

次にこの上にもう一枚UIViewを重ねてみます。

※設定画面等、ボタンやラベルなどのiPhoneのUIオブジェクトを使うにはUIViewを使うのが楽かと思います。また、以下Viewの追加の仕方はopenframeworksに特化した情報ではないので、参考までにどうぞ。

2.Viewの設定

xcodeでUIView xib(以下yokoview1.xib)、UIView Controller subclass(以下yokoview1ctrl.mm、h)を追加します。

追加したxibファイルをダブルクリックしてやるとInterface builderが起動しますので、まずVIEWとコントローラの紐付けを行います。
yokoview1.xlbウインドウのFile's Ownerをクリック、Yokoview1 ctrl identityウインドウ の一番右のタブを選択して、Class identityのClassをyokoview1ctrlに設定してやります。

こんな感じです。

20100607wat4.png

次にViewの紐付けです。
yokoview1.xlbウインドウのFile's OwnerをクリックするとFile's Owner黒いウインドウがでますので、その中のViewの右にある丸をぐっとドラッグして、線が延びるのでViewウインドウにドロップ。
こんな感じになればOKです。

20100607wat5.png

あとは思うようにViewをデザインしていくのですが、今回はシンプルに以下のようなViewにしました。ちなみにですが、interface builder上でViewを横向きにするには、Viewウインドウ右上の矢印をクリックしてやればOKです。また、重なりが分かり易いように半透明にしています。

20100607wat6.png
3.controllerの設定

controller側の基準方向設定をします。
こんな感じです。

// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}

4.サブViewの追加

最後にopenframeworksのView(testAppが描画するView)に先ほどのViewを乗せます。

// Viewのヘッダをインクルード
#include "yokoview1ctrl.h"

// 変数宣言(ひとまずグローバル領域に宣言しています)
yokoview1ctrl* yokoview1;

// Viewを乗せる(どこでもいいです。今回はtestApp::setup()で行っています。)
yokoview1	= [[yokoview1ctrl alloc] initWithNibName:@"yokoview1" bundle:nil];
[ofxiPhoneGetUIWindow() addSubview:yokoview1.view];

実行するとこんな感じです。

20100607wat2.png

特に問題ありませんね。


その1 Viewを重ねる

さて、それではもう一枚Viewを重ねてみましょう。
同様にyokoview2を作成します。

20100607wat7.png

それでは実行してみます。

20100607wat3.png

これは想定外です。複数枚Viewを重ねると基準座標がおかしくなってしまうようです。

色々調べた結果コントローラ側に以下のように記述すると回避できるようです。

- (void)viewWillAppear:(BOOL)animated {
	CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI * 90 / 180.0f);
	transform = CGAffineTransformTranslate(transform, 80, 80);
	self.view.transform = transform;
}
20100607wat8.png
その2 UIAlertViewを出す

警告メッセージ等、UIAlertViewを出したいことはよくあります。
それでは上記のようにして作った横向きアプリでUIAlertViewを出してみます。

20100607wat9.png

バックの描画が崩れてしまっています。
座標系がおかしくなっているようですね。
これについては根本的な解決方法がわかりませんでした。
一番下のViewの描画がくずれるだけなので、例えば、一枚不透明なViewを乗せてそのViewからUIAlertViewを出してやる、等の応急措置で対応できることはできます。
何か正しい対応方法があるんでしょうか?

渡部隼人渡部隼人 - システムコンサルタント
「おもしろきこともなき世をおもしろく」いわゆるIT業界はそういうものだと思っています。こんなことが出来たらいいな!という仮想が、現実にリンクする面白い業界です。紆余曲折を経てそんな業界でお世話になっているアフタヌーンエンジニアのブログです。