現在、パブリックプレビューですが、すでに、Surface Duo のエミュレーターが公開されていますので、Xamarin.Forms で Surface Duo の Dual Screen を利用したサンプルアプリを作って動かしてみましょう。
サンプルアプリとして、駅の時刻表をイメージしたアプリを準備しました。左ペインで、路線と駅を選ぶと、右ペインに時刻が表示されます。
このような構成で Dual Screen は非常に効果的です。
アプリの構成をシンプルに理解するために、Prism などのフレームワークを使わず、素の Xamarin.Forms で構成しています。
なお、路線名、駅名、時刻は実在しないダミーです。
以下の手順で、Surface Duo のエミュレーターをダウンロード、インストールします。
以下の手順で、Surface Duo エミュレーターの起動スクリプトの設定を確認します。
(Android SDK のインストールパスがデフォルトの場合、変更の必要はありません。)
Surface Duo エミュレーターを起動します。
Visual Studio でソリューションを開き、ビルドして、(実行中のデバイスの一覧で) (Android 10.0 - API 29) を選択し、実行します。
Dual Screen に対応するには、以下の対応を行うだけであり、非常に簡単です。
- コンテンツ(UI) を記述した XAML を分離する。
- Single Screen 用と、Dual Screen 用の "ガワ" の ContentPage を用意し、コンテンツを配置する。
- アプリが、Single Screen モード、Dual Screen モードのどちらで動いているかを判断し、適切な UI を表示する。
仕組みがわかりましたので、早速サンプルアプリを作ってみましょう。
start/XFSurfaceDuoSample2020.sln を Visual Studio で開いて下さい。
start/XFSurfaceDuoSample2020/Views/DetailsPage.xaml を編集します。
下記の通り、ガワの XAML にコンテンツ本体を参照させるコードを追加して下さい。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:XFSurfaceDuoSample2020"
mc:Ignorable="d"
x:Class="XFSurfaceDuoSample2020.DetailsPage"
Title="Master Details"
Padding="10,0,0,0"
>
<!-- 以下のコードを追加 -->
<local:Details></local:Details>
<!-- ここまで -->
</ContentPage>
start/XFSurfaceDuoSample2020/Views/MasterDetailPage.xaml を編集します。
下記の通り、ガワの XAML にコンテンツ本体を参照させるコードを追加して下さい。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:dualScreen="clr-namespace:Xamarin.Forms.DualScreen;assembly=Xamarin.Forms.DualScreen"
xmlns:local="clr-namespace:XFSurfaceDuoSample2020"
mc:Ignorable="d"
x:Class="XFSurfaceDuoSample2020.MasterDetailPage">
<!-- 以下のコードを追加 -->
<dualScreen:TwoPaneView MinWideModeWidth="4000" MinTallModeHeight="4000">
<dualScreen:TwoPaneView.Pane1>
<local:Master x:Name="masterPage"></local:Master>
</dualScreen:TwoPaneView.Pane1>
<dualScreen:TwoPaneView.Pane2>
<local:Details x:Name="detailsPage"></local:Details>
</dualScreen:TwoPaneView.Pane2>
</dualScreen:TwoPaneView>
<!-- ここまで -->
</ContentPage>
これで、アプリのコードは完成です。
では、早速アプリを実行してみましょう。
Dual Screen で表示させるためには以下の手順でアプリをスパンしてください。
エミュレーターでアプリをスパンする