iPhoneのStoryboardを流用しiPad対応へ変換してみる。

LINEで送る
Pocket

こんにちは、JAGA(ja_gaimopotato)です。
PosteというiPhoneアプリを開発していて、iPadにも対応したユニバーサルアプリにバージョンアップを考えています。
そのときに、少しでも工数を少なくしたいなぁと思い何とかならないものかと、色々と考えてみました。

Poste -Evernoteのためのマークダウン(Markdown) テキストエディタ 速く、簡単に、楽しく App
カテゴリ: 仕事効率化
価格: ¥500

考えたこと

まず、コードで制御。

ViewController内で、機種を判別してコードでUIを整えるというアイデアですが、ぼくの実力ではかなりハードコーディングすることになりそうなので、やめました。
全てのAutolayoutをコードで制御するのも何か煩わしい。

イチからStoryboardを作る

これが妥当なのでしょうけど、工数は減らないのでとりあえず保留。

iPhoneのStoryboardをコピーして流用し、iPadのStoryboardへ変換する。

これが一番楽そうでした。
というか、楽だった。

iPhoneのStoryboardを、iPad用に変換する手順です。

まず、iPadでも使えるようにユニバーサルバイナリへと変更してください。

iPhone Storyboard Convert to iPad

そして、該当のStoryboardを複製しましょう。
この時に、iPad用だということが分かるようにファイル名を変更することをオススメします。
例えば、Storyboard_iPadとしましょう。

このままだと、普通にiPhoneのシーンが表示されたままなので、ちょっと修正します。

I 6

Storyboard_iPadを選択して、右クリックでファイルの開き方を選択できますので、Source Codeを選択してください。

I 2

すると、XMLでの表示に切り替わりますので、ここを少しいじります。

I 3

そして下記の2箇所をそれぞれ変更します。

  • はじめの方にあります。

    変更前 targetRuntime="iOS.CocoaTouch" → 変更後 targetRuntime="iOS.CocoaTouch.iPad"

  • 終わりの方にあります。

    変更前 <simulatedScreenMetrics key="destination" type="retina4"/> → 変更後 <simulatedScreenMetrics key="destination"/>

あとは、普通に開くとiPhoneのそれぞれのシーンがiPadのサイズに変換されています。
ただ、ちょっと配置が重なってしまうので適当に並べ替えてキレイにしましょう。

I 4

I 5

あとは、AutoLayoutなどの調整し、iPadでの起動時に読み込むStoryboardファイルをStoryboard_iPadと指定すれば終わりです。

さいごに

もちろん、これ以外にもコードでサイズを指定している場合はそれに合わせてコードで変更する必要があります。
本当に、かなり手っ取り早くiPad用のUIに対応できたのでホッとしました。
ただ、まだやってみたところですので、何か不具合があるかも知れないのでちょっとドキドキしています。

参考になったサイトです。

Xcode – convert iPhone storyboard to iPad storyboard | iOS Code Snippets

こっちは、iPadからiPhoneへの記事

QuickTip: Converting an iPad Storyboard to iPhone in IOS 6 | Mel’s space

これからも更新を続けていきますので、Feedlyへの登録をお願いします!

follow us in feedly

LINEで送る
Pocket

コメントを残す