スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーをはてなブックマークに追加

UIViewControllerでビューの自動回転を実現する方法

iPhoneアプリの開発で必ず一度は躓くのがビューの回転だと思う。私も、全てのアプリにビューの回転を使ってきたが、毎回何らかの問題が発生する。

特に難易度が高いのが、ビューの強制回転。未だに「正解」と思われるやり方が分からない。とりあえずそれは置いといて、今回はビューの自動回転について説明する。

まず、ビューの回転をサポートするには、UIViewControllerが必須となる。UIViewだけでも実装できない分けではないけど、今回はパス。

それでは早速やり方を説明。

(1)ビューの回転を許可
UIViewControllerの派生クラスにshouldAutorotateToInterfaceOrientationを実装して、回転しても良い向きの場合のみYESを返すようにする。


- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}


全方向回転OKの場合は上のコードのように、return YES とする。
逆に、回転を禁止する場合は、デフォルト方向のみOKとなるので、
return (interfaceOrientation == UIInterfaceOrientationPortrait);
となる。

これで取り敢えずは回転するようになる。遷移先のビューも同様に回転を許可しておけば、回転状態のまま画面遷移できるからお手軽だ。さて、ビューに画像を載せた状態でこれを実行してみると、
roll1.jpgroll2.jpg

このように、回転した時に画像がズレてしまう。しかも、なんだか中途半端なずれ方。私は当初、なぜこのような動きになるのか全然理解できなかった。

回転するからややこしいのだが、回転途中の動きは忘れて、単にビューのサイズが 縦長←→横長に切り替わっていると思えば分かりやすい。

その上で、画像の中心位置やサイズは変わらず、回転前後共に以下の状態である。

 画像中心位置(center):160,240
 画像サイズ(bounds.size):320,480

したがって、横に向けた時、中心から少しずれた位置に、縦長の画像が表示される。
(座標系の減点は、デバイスの向きに関わらず左上となる)


(2)画像中心位置と画像サイズを調整


上記のようなズレを解消するには、画像中心位置と画像サイズを調整すれば良い。
ビューが回転する直前に、画像の位置やサイズを調整するコードを入れる。


- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
duration:(NSTimeInterval)duration
{
    if (interfaceOrientation == UIInterfaceOrientationPortrait ||
        interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
        self.imageView.center = CGPointMake(160, 240);
        self.imageView.bounds = CGRectMake(0, 0, 320, 480);
    }
    else if (interfaceOrientation == UIInterfaceOrientationLandscapeLeft ||
        interfaceOrientation == UIInterfaceOrientationLandscapeRight) {
        self.imageView.center = CGPointMake(240, 160);
        self.imageView.bounds = CGRectMake(0, 0, 480, 320);
    }
}


注意しなければならないのは、ここで設定するのは「回転後」の状態であること。それから、回転時の呼ばれる関数内では、frameプロパティは厳禁。必ずcenter,boundsを使う。
向きに応じて画像の位置やサイズを調整している訳だが、デバイスを真上に向けた時など、上記以外の状態になることもあるので、ここも注意が必要。

これで意図した通りの回転になった。
roll3.jpg

ちなみに、今回はプログラムコードで位置やサイズを変更したが、interface builderの設定次第では、自動的にリサイズすることも可能。その場合、以下のAutosizingを調整する。

zoom-setting.jpg




このエントリーをはてなブックマークに追加
スポンサーサイト
iPhoneアプリ紹介
パズルナビ for パズドラ 2016
最強のコンボツール!
colorization-large-icon.png

スクリーンショットを読み込むとコンボを自動計算してくれるパズドラの攻略アプリです。


AirRuler
(簡易距離計)

リモートで簡単に距離を測定できるアプリ!
colorization-large-icon.png

目標地点に向けてiPhoneを傾けるだけで簡単に距離を測定できます。ゴルフの距離測定機能付きパターの代わりにも使えます。


補色残像アート
~見えない色が見えてくる~
白黒なのにカラーに見えてしまう不思議な映像を体験しよう!
colorization-large-icon.png

補色残像という目の錯覚を利用して、白黒写真がカラーに見える不思議な映像を作成できます。作成した映像は、アニメGIFに変換したり、Twitterに投稿することもできます。


タイピング革命
フリック練習はタイピング革命で!ネットランキングで盛り上がろう!
icon-l-typing.jpg

オンラインランキング上のプレイを閲覧できるリプレイ機能付き!フリック入力とローマ字入力に完全対応したタイピング練習アプリです。初心者も安心のトレーニングモード付き。

★なんと!あのAppBank様に紹介して頂きました!!
typing-sale-led.gif


簡単3Dカメラ
iPhoneで手軽に3D写真を楽しもう!平行法/交差法/アナグリフ/グラグラ3Dに対応。
icon-l-3d.jpg

2枚の写真を撮影するだけで、裸眼で立体視できる3D写真が作成できます。85円でステレオ写真もアナグリフも楽しめるのは簡単3Dカメラだけ!

プロフィール

あらきんぐ☆

Author:あらきんぐ☆
はじめまして。あらきんぐです。
4月からiPhoneを購入し、その魅力に取り付かれて、気がついたらアプリ開発の道へ!仕事でプログラム開発をしていますが、基本「動けばOK!」な適当エンジニアです。適当でもアプリは作れる!っていう事を、ブログを通じて証明していきたと思います。

最新記事
最新コメント
最新トラックバック
カテゴリ
FC2カウンター
全記事表示リンク

全ての記事を表示する

Twitter
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
アクセスランキング
[ジャンルランキング]
コンピュータ
369位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
45位
アクセスランキングを見る>>
オススメ商品
iPhone/iPodと一般オーディオを繋ぐ貴重なアイテム!
アプライドオリジナルアイテム MBB...

アプライドオリジナルアイテム MBB...
価格:3,980円(税込、送料別)

開発中級者にオススメ!「こんなことができるんだ!」と驚かされる一冊
【送料無料】iPhone...

【送料無料】iPhone...
価格:1,500円(税込、送料別)

安い!シンプル!カッコいい!
希少なiPhone対応キーボード内蔵ケース
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。