Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Xamarin.iOS アプリを iPhone 6 / 6 Plus の解像度に対応させるには

こんにちは。エクセルソフトの田淵です。

折角 iPhone 6 / 6 Plus 用のレイアウトを用意したのに Xamarin.iOS アプリが拡大表示されてしまう場合の対応方法をご紹介します。

対象は Visual StudioiOS プロジェクトを作成した場合です。Xamarin.Forms プロジェクトは正しく表示されます。

注:
本エントリーは 2015/06/19 現在の Xamarin for Visual Studio 3.11.590.0、Xamarin.iOS 8.10.1.0 での情報でバージョンアップによりテンプレートが対応する可能性は高いです。

アプリが拡大表示されてしまう

iPhone 6 / 6 Plus 対応の UI を用意します。

f:id:ytabuchi:20150619101714p:plain:w450
f:id:ytabuchi:20150619101713p:plain:w450
*Size Class を使っても 勿論大丈夫です。

で、ビルドすると、
f:id:ytabuchi:20150619102340p:plain:w450
iPhone 5 用の画面が拡大されて表示されてしまいます。トップの時刻とキーボードパッドが大きいのが分かると思います。特にキーボードが大きくて邪魔ですw

対応方法

Launch Screen を指定します。

Launch Screen FileがあるとiPhone6の解像度に最適化されているとみなされ、アプリが拡大表示されなくなります。

2015/6/23 追記:
酢酸先生に教えていただきました。iOS 7 を Target に含む場合は、今までの info.plist で指定する方法でやりましょう。

詳細は iOS - iPhone6 4.7、5.5inch対応 メモ - Qiita を見ていただくのが良いかと思います。

Visual Studio での対応方法

Visual StudioiOS プロジェクトを作成するとこんな感じです。
f:id:ytabuchi:20150619102827p:plain:w300

Resources 以下に LaunchScreen.Storyboard を作成します。一緒に作成される cs は削除し、Storyboard を開いて、Size Class に対応させます。
f:id:ytabuchi:20150619111649p:plain:w450

UIView に色を付けてその上の ImageView に画像を配置したり、自由に LaunchScreen をデザインします。
f:id:ytabuchi:20150619112616p:plain:w450

最後に プロジェクトプロパティを開き、Launch Storyboard: の欄にファイル名 LaunchScreen と入力します。
f:id:ytabuchi:20150619120251p:plain:w450

ビルドしてみましょう。

f:id:ytabuchi:20150619114435p:plain:w450

素晴らしいですね!!是非皆さんの Xamarin.iOS アプリも iPhone 6 / 6 Plus に対応してください♪

なお、Mac の Xamarin Studio で作成するXamarin.iOS プロジェクトと、Mac/Windows で作成する Xamarin.Forms は予め Storyboard が用意されているため問題はありません。(Mac で作成する Xamarin.iOS プロジェクトはなぜか LaunchScreen.xib ファイルですが、そのまま使っても storyboard ファイルに置き換えてもどちらでも大丈夫です。)
f:id:ytabuchi:20150619115642p:plain

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

以上です。

エクセルソフト | ダウンロード | 学習用リソース | JXUG リンクページ | ブログ購読