Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#18 Deviceごとの処理切り替え方法

Xamarin.Formsをコーディングしていると,時々デバイスごとに処理を切り替えたい場合が出てきます。iOSとAndroidでのコントロールの配置の微妙な違いや,UWPとの微妙な違いを吸収したいときなんかがあります。それ以外にも物理的に切り分けないといけないケースもあったりします。そういった場合に,どのようにデバイスごとにコードを分岐するかを解説します。

AndroidとUWPでファイルパスの違いを吸収して表示している例

Pageの追加

今回はデバイスごとにコードを切り替えるという事で,DeviceSwichPageという名前のページを作成しましょう。まずはいつものようにMenuPageに1行追加します。

  • ページ名はDeviceSwichPageでSubTitleは「デバイスごとの切り替え」としておきます。pngの部分は特になんでも構いません。
  • ItemTappedイベントの最後にDeviceSwichPageを表示する記述を追加します。

DeviceSwichPage.xamlの追加

DeviceSwichPageというコンテンツページを追加します。

  • デフォルトで出てくるようこそザマリンラベルを削除し,Imageを1つだけ記述します。名前を「MyImage」としておきます。

コードビハインド側の実装

DeviceSwichPageのコードビハインド側の実装に移りましょう。先ほどImageにMyImageという名前を付けたので,MyImageのSourceにファイルのパスを指定します。今回は「a.png」とします。

画像ファイルの配置

AndroidはAndroidプロジェクトの「Resources」フォルダーの「drawable」フォルダーに「a.png」ファイルを追加します。

UWPはUWPプロジェクトの直下に置く必要があるのですが,それではUWPフォルダーがごちゃごちゃするので「Images」というフォルダーを作成して,その中に「a.png」ファイルを追加してみます。

実行

この状態で実行すると,Androidは正しいファイルパスになりますが,UWPの方はプロジェクトの直下にファイルがないためアイコンは表示されません。このようにAndroidとUWPで挙動を分けたい場合はデバイスごとの切り替えを行わなければなりません。

デバイスごとの切り替え

デバイスごとの切り替えを行うには,次のようにDevice.RuntimePlatformで判断します。

  • RuntimePlatformが「iOS」「Android」「UWP」のどれかをIF分で判断して,それぞれの処理を書きます。今回はUWPのときにファイルパスをImagesフォルダーの配下にあることを記述しています。

実行

ファイルパスを調整した状態で実行します。

AndroidもUWPもアイコンが正しく表示されました。今回は単純にファイルパスで解説しましたが,それ以外にもデバイスに依存したコントロールの配置などが気になる場合は,この要領で,特定のデバイスの位置を変更することができます。

Xamarin.Formsでスマホアプリ開発

C#を正しい3層構造で造れてますか?

非売品コースを受け取る