nuits.jp blog

C#, Xamarin, WPFを中心に書いています。Microsoft MVP for Development Technologies。

Prism for Xamarin.Forms入門 CaseStudy:デバイス形状やプラットフォームでViewを切り替える

Xamarin.Formsでは通常、Viewまで1コードで書けるのが利点ですがケースによっては個別に調整したいケースもあるかと思います。
通常、そういった場合は CustumRendererやEffectsの出番です。

しかしケースによってはページデザインをまるっと置き換えたいという事もあるかもしれません。
TabletとPhoneでトップページを挿げ替えたいといった場合が最もありがちなケースかもしれません。
PrismではViewまるっと置き換えつつ、同じ画面遷移のパスで、且つ、ViewModelは共有化する仕組みが用意されています。

今回はそのテクニックについてお話しします。

なお本エントリーは連載記事「Prism for Xamarin.Forms入門」の一部となっております。
以下に目次がありますので、他のエントリーもご覧いただけると嬉しいです。
【Xamarin】Prism.Forms入門 目次 - nuits.jp blog

それでは簡単に説明していきたいと思います。

概要

提供されている切り替え方針は2種類あります。

  • プラットフォーム(OS)単位
  • デバイス形状(Tablet・Phone・Desktop)単位

PrismではViewもDIコンテナに登録しますが、登録の際に用途を指定して登録します。

プラットフォーム(OS)単位

App.xaml.csのRegisterTypesでViewを登録する際に、RegisterTypeForNavigationOnPlatformメソッドを利用します。 ViewModelを明示的に指定する必要がある点に注意が必要です。

Container.RegisterTypeForNavigationOnPlatform<MainPage_iOS, MainPageViewModel>(
    "MainPage",
    iOSView: typeof(MainPage_iOS),
    androidView: typeof(MainPage_Android),
    windowsView: typeof(MainPage_UWP));

またdefaultViewを指定することもできます。
特定のプラットフォームのみを異なるViewとして登録し、それ以外はdefaultViewを利用することもできます。

なお、上の例では画面名に「MainPage」を指定していますが省略することもできます。
省略した場合は上の例だとMainPage_iOSに指定している箇所で指定されているクラス名を基準に画面名が決定されます。

実際に動かしたところはこんな感じになるんですが。。。あまり意味ない例ですねw

f:id:nuitsjp:20161018183649p:plain

デバイス形状(Tablet・Phone・Desktop)単位

App.xaml.csのRegisterTypesでViewを登録する際に、RegisterTypeForNavigationOnIdiomメソッドを利用します。 ViewModelを明示的に指定するのは同様です。

Container.RegisterTypeForNavigationOnIdiom<MainPagePhone, MainPageViewModel>(
    "MainPage",
    phoneView: typeof(MainPagePhone),
    tabletView: typeof(MainPageTablet),
    desktopView: typeof(MainPageDesktop));

以上です。
それではまた!