FC2ブログ

記事一覧

アプリを iPhone X に対応させる方法 | Xamarin.Forms


iPhone X は iPhone 8 に引き続き、11月3日の発売予定となっており、その対応が急務となっています。そこで今回は Xamarinアプリにおける対応方法についてまとめてみました。



前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.7.9.45 (NuGet Xamarin.Forms 2.4.0.282)
・macOS Sierra 10.12.6 / Xcode9 / Xamarin.iOS 11.0.0.0



1.Xcode9

Xcodeをバージョン9に上げてテストをしましょう。
以前の記事「iOS11対応のためXcode9にアップデートして検証してみました」をご参考ください。
特にアルバムに保存する形式がデフォルトHEIFに変更になっていますので、カメラ・画像関連のアプリは注意が必要です。



2.識別方法

iPhone X かどうかを判別して処理を分岐する必要も出てくるでしょう。
その場合は、次の記事「iPhone X で実行されているかデバイスを判別する方法」をご参考ください。



3.画面サイズ

シミュレータで表示すると、iPhone8では画面全体にアプリが表示されますが、iPhone X では画面の上部と下部にスペースができてしまいます。

xamarin_iphonex_02.png


Info.plist を iOSマニフェストエディタで開き、起動画面に LaunchScreen.storyboard を設定します。
※iOSマニフェストエディタで編集するとMinimumOSVersionやコメント等、自動で削除される項目がありますので、ご注意ください。

xamarin_iphonex_03.png


直接XMLエディタで編集する場合は以下のように記述します。
info.plist
<plist version="1.0">
<dict>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
</dict>
</plist>

尚、設定するLaunchScreen.storyboardファイルの詳細につきましては、次の記事「LaunchScreen.storyboard の作成方法」でご紹介しておりますのでご参考ください。


設定を済ませてアプリを起動すると、画面サイズが変わりました。

xamarin_iphonex_04.png



4.広告の調整

AdMobの広告を表示しているアプリは11月20日までに変更するようにGoogleからメールが飛んできました。
iPhone X はディスプレイの上部まで画面表示が可能で、広告を上部に表示しているアプリはスピーカー部分の湾曲により広告の全てが表示されない可能性があると指摘されています。

xamarin_iphonex_01.png


ディスプレイ上部に表示せずに下部に表示したほうが簡単に対応ができると考えますが、下部にも黒線の部分があり、広告の表示を妨げます。
以下のように基底クラス等でPaddingを設定すると回避できます。
※XamlでContentPageに対するPaddingを設定してある場合はXamlが優先されてしまいますので注意が必要です。
public class BaseContentPage : ContentPage
{
public BaseContentPage() : base()
{
if (DependencyService.Get<IDeviceService>().GetModelNumber().Contains("X"))
{
this.Padding = new Thickness(0, 0, 0, 23);
}

//または以下のように記述すると簡単ですが、全面画面を活かしきれないと考えます。
//NuGet Xamarin.Forms 2.4.0.74863 が必要です。(検証も必要です)
//using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
//On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
}
}


また、Googleが公式ページにて対応方法の指針を掲載していますので、ご参考ください。
https://developers.google.com/admob/ios/x-ad-rendering



5.セカンダリツールバー

以前の記事「iOSでセカンダリツールバーをカスタマイズする」でご紹介しましたセカンダリツールバーをカスタムレンダラーで画面下部に表示している場合は、ツールバーのボタンがマイク部分と重なって表示されている場合があります。

xamarin_iphonex_05.png


以下のようにセカンダリツールバーの表示を変更します。
CustomNavigationRenderer.cs
public override void ViewDidLayoutSubviews()
{
    base.ViewDidLayoutSubviews();

    if (View != null)
    {
        UIView[] subviews = View.Subviews.Where(v => v != NavigationBar).ToArray();
        var toolBarViews = subviews.Where(v => v is UIToolbar).ToArray();
        var otherViews = subviews.Where(v => !(v is UIToolbar)).ToArray();

        nfloat toolbarHeight = 0;

        //iPhone X 用のマイクスペース部分だけ上に表示する
        nfloat bottomMargin = 0;
        if (DependencyService.Get<IDeviceService>().GetModelNumber().Contains("X"))
        {
            bottomMargin = 23;
        }

        foreach (var uIView in toolBarViews)
        {
            uIView.SizeToFit();
            uIView.Frame = new CGRect
            {
                X = 0,
                Y = View.Bounds.Height - uIView.Frame.Height - bottomMargin,
                Width = View.Bounds.Width,
                Height = uIView.Frame.Height,
            };
            var thisToolbarHeight = uIView.Frame.Height;
            if (toolbarHeight < thisToolbarHeight)
            {
                toolbarHeight = thisToolbarHeight;
            }
        }

        var othersHeight = View.Bounds.Height - toolbarHeight;
        var othersFrame = new CGRect(View.Bounds.X, View.Bounds.Y, View.Bounds.Width, othersHeight - bottomMargin);
        foreach (var uIView in otherViews)
        {
            uIView.Frame = othersFrame;
        }
    }
}





最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。