DualScreen 対応の Xamarin.Forms アプリを作ってみる（1）

はじめに

こんにちは、＠hiro128_777です。

とうとう iPhone 12 が発表されましたね。でも、Surface Duo も忘れないでください。Surface Duo 日本での発売はまだですが、すでに、エミュレーターで疑似体験することは可能です。

というわけで、10月27日（火）に、エミュレーターで Surface Duo 対応アプリを体験するオンラインハンズオンを開催いたします！

こちらは、簡単な Surface Duo のエミュレーターで動作するマルチスクリーン対応アプリを作って体験していただけるコンテンツになっていますので、ご興味がある方はぜひご参加下さい！

csharp-tokyo.connpass.com

今回から数回 DualScreen 対応の Xamarin.Forms アプリを作る方法をご紹介します。

今回の内容の詳しい手順は、下記公式ドキュメントにもあります。
なお、サンプルのソリューションを準備しましたので、より詳しい手順を追って、実際に触って試していただけるようにしました。

docs.microsoft.com

エミュレーターのインストール

Mac、Windows それぞれの方法をまとめてありますので、以下の記事をご参照ください。

Mac

hiro128.hatenablog.jp

Windows

hiro128.hatenablog.jp

サンプルのソリューション

以下より取得してください。
github.com

XFSurfaceDuoSample2020/start-long/XFSurfaceDuoSample2020.slnを開ます。

SDK のインストール

NuGet パッケージマネージャーで Xamarin.Forms.DualScreen を検索し、ソリューションのそれぞれのプロジェクトに、 Xamarin.Forms と同じバージョンの Xamarin.Forms.DualScreen パッケージをインストールします。

f:id:hiro128:20201013230011p:plain

MainActivity クラスの変更

属性の変更

Android プロジェクトの MainActivity クラスの ConfigurationChanges 属性を確認し、属性が足りなければ変更します。

ConfigurationChanges を設定することで、構成の変更が発生した場合にシステムによってアクティビティが再起動されなくなります。また、発生時の処理のコードを記述することもできます。

詳しくは、以下の公式ドキュメントをご参照ください。

docs.microsoft.com

以下の属性が設定されていることを確認してください。

ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode

以下のようになります。

    [Activity(Label = "XFSurfaceDuoSample2020", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, 
        ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize 
    )]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity

DualScreenService の初期化

次に、DualScreenService を初期化します。

OnCreate メソッドの LoadApplication(new App()); の直上に以下の初期化メソッド呼び出しを追加します。

// Initialize DualScreen Service
Xamarin.Forms.DualScreen.DualScreenService.Init(this);

以下のようになります。

            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

            // Initialize DualScreen Service
            Xamarin.Forms.DualScreen.DualScreenService.Init(this);

            LoadApplication(new App());
        }