第3回：Xamarinにおけるコードの共通化とプラットフォーム固有のコードの記述：特集：Xamarin＋Visual Studioで始めるiOS／Android／UWPアプリ開発（3/3 ページ）

» 2016年12月02日 05時00分 公開
[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development]
前のページへ 1|2|3 　　　　　　

Custom Rendererで独自のUIコントロールを作成する

　最後に紹介するのはCustom Rendererだ。

　Xamarin.Formsで提供されているUIコントロールでは機能が不足する場合、あるいはやりたいことを実現できない場合には、Custom Rendererを使う。既存のUIコントロールの外観を変更したり、機能を追加したりできる。また、独自のUIコントロールを作成することも可能だ*3。

　Xamarin.FormsのUIコントロールは、次の図のような構造になっている。UIコントロールの定義は共通だが、その描画を実行する「レンダラー」はプラットフォームごとに分かれている。レンダラーが、各プラットフォーム固有のUIコントロールやAPIを使って、実際の表示を行っているのである。

　このレンダラーを独自に作成すれば（＝Custom Renderer）、外観を変更したり機能を追加したりできるのである。以降の説明は長くなる（＝手間はかかる）が難しいものではないので、気楽に挑戦してみてほしい。

UIコントロール／レンダラー／ネイティブコントロール（Mapコントロールの例） UIコントロール／レンダラー／ネイティブコントロール（Mapコントロールの例）
「Customizing a Map - Xamarin」より。
Xamarin.FormsのUIコントロールは、このような構造になっている。これはMapコントロールの例だが、他のUIコントロールも同様だ。
UIコントロールの定義は、プラットフォームに依存しない（上段のMap）。
UIコントロールの外観や機能の実装は、プラットフォームごとの「レンダラー」が受け持っている（中段のMapRenderer）。
レンダラーは、プラットフォーム固有のコントロールを利用する（下段）。

　既存のUIコントロールをカスタマイズする手順は、次のようになる。

  1. 既存のUIコントロールを継承して、新しくUIコントロールを定義する*4
  2. プラットフォームごとにレンダラーを作成する。レンダラーとUIコントロールを結び付けるには、レンダラーにExportRenderer属性を付ける
  3. 作成したUIコントロールをXAMLコード内で利用する

*3　本稿では、既存のUIコントロールをカスタマイズする方法を解説する。独自のUIコントロールを全く新しく作る方法は、「Implementing a View - Xamarin」を参照してほしい。

*4　機能を追加しないなら、継承したクラスを作る必要はなく、「2」のステップ（レンダラーの作成）以降だけでよいはずである。ただし、本稿執筆時点では、そのようにするとWindows 8.1／Windows Phone 8.1ではレンダラーが動作しなかった。


　例として、Switchコントロール（Xamarin.Forms名前空間）をカスタマイズしてみよう。

　Xamarin.FormsのSwitchコントロールは、次の画像のようにプラットフォームによって表示が異なる。Android／iOSはスイッチだけだが、Windows系では「On」「Off」という文字列も表示されるのだ。これはどちらかに統一したいだろう。ここでは、文字列を消すことにしよう。

　また、機能を追加する例として、スイッチの左右を反転させるプロパティを付けてみよう。

Switchコントロール（Android）
Switchコントロール（iOS）
Switchコントロール（Windows 10） Switchコントロール
上はAndroid、中はiOS、下はWindows 10（デスクトップ）での表示である。
Windows系では、「On」「Off」という文字列が表示されている。

1. 既存コントロールを継承する

　PCLを使うXamarin.Formsのプロジェクトを作り、PCLプロジェクトにクラスを追加する。ソリューション名は「CustomRenderer」、追加するクラスのファイル名は「MySwitch.cs」とする。

　MySwitchクラスは、Switchコントロールを継承するだけでなく、スイッチの方向を反転させるための「RightToLeft」プロパティも追加しよう。プロパティはBindableProperty（前回の2ページ目を参照）として実装する。次のコードのようになる。

namespace CustomRenderer
{
  public class MySwitch : Xamarin.Forms.Switch
  {
    // プロパティはBindablePropertyとして実装する
    public static readonly Xamarin.Forms.BindableProperty RightToLeftProperty
      = Xamarin.Forms.BindableProperty.Create(
            nameof(RightToLeft), typeof(bool), typeof(MySwitch), false);
    public bool RightToLeft
    {
      get { return (bool)GetValue(RightToLeftProperty); }
      set { SetValue(RightToLeftProperty, value); }
    }
  }
}

Switchコントロールを継承したMySwitchクラス（C#）
PCLプロジェクトに、既存のUIコントロールを継承したクラスをこのように作成する。
ここにプロパティやイベントを追加することで、UIコントロールの機能を増やせる。ただし、プロパティやイベントに対するプラットフォーム固有の処理（＝ネイティブコントロールに対する処理）は、レンダラーの側に記述する。

2. レンダラーを作成する

　ここではUWPプロジェクトだけにレンダラーを作成しよう。作成しなかったAndroid／iOSでは、継承元のSwitchコントロールのレンダラーがMySwitchコントロールのレンダラーとして使用される。

　UWPプロジェクトにクラスを追加し、ファイル名は「MySwitchRenderer.cs」とする。

　レンダラーの書き方は、これから見ていくコードのようになる。

　今回のように既存のUIコントロールを継承している場合は、既存のレンダラー（＝SwitchRendererクラス）を継承すればよい。

　カスタムレンダラーではOnElementChangedメソッドのオーバーライドが必須だ。そこには、必要に応じてイベントハンドラーやリソースの確保／解放と、プラットフォーム固有のUIコントロールを使った処理を記述する。

　レンダラー内では、「this.Element」でXamarinのUIコントロールを参照できる（ここでは「MySwitch」）。また、「this.Control」で、実際に表示に使用しているプラットフォーム固有のコントロールを参照できる（ここではWindows Runtimeの「ToggleSwitch」）。

　また、ExportRenderer属性を付けて、どのUIコントロールに対するレンダラーなのかを明示する必要がある。

[assembly: Xamarin.Forms.Platform.UWP.ExportRendererAttribute(
              typeof(CustomRenderer.MySwitch),
              typeof(CustomRenderer.UWP.MySwitchRenderer))]
namespace CustomRenderer.UWP
{
  // MySwitchのレンダラー（UWP用）
  public class MySwitchRenderer : Xamarin.Forms.Platform.UWP.SwitchRenderer
  {
    protected override void OnElementChanged(
      Xamarin.Forms.Platform.UWP.ElementChangedEventArgs<Xamarin.Forms.Switch> e)
    {
      base.OnElementChanged(e);

      if (e.OldElement != null)
      {
        // 必要なら、イベントハンドラーを解除し、ネイティブリソースを解放する
      }
      if (e.NewElement != null)
      {
        // 必要なら、イベントハンドラーをセットし、ネイティブリソースを確保する
      }

      // MySwitchを取得して処理をする
      MySwitch msw = this.Element as MySwitch;
      // UWPネイティブのToggleSwitchを取得して処理をする
      Windows.UI.Xaml.Controls.ToggleSwitch sw = this.Control;
      // ……省略……
    }
  }
}

レンダラーの基本的な書き方（C#）
これはUWP用であるが、Android／iOSでも同様である（名前空間「Xamarin.Forms.Platform.UWP」やネイティブのUIコントロールはプラットフォームごとに異なる）。

　表示されている「On」「Off」の文字列を消し、追加したRightToLeftプロパティに対応するには、OnElementChangedを次のコードのようにする。

protected override void OnElementChanged(
  Xamarin.Forms.Platform.UWP.ElementChangedEventArgs<Xamarin.Forms.Switch> e)
{
  base.OnElementChanged(e);

  ……省略……

  // MySwitchを取得する
  MySwitch msw = this.Element as MySwitch;

  // UWPネイティブのToggleSwitchを取得する
  Windows.UI.Xaml.Controls.ToggleSwitch sw = this.Control;

  // 表示文字列を削除する
  sw.OnContent = null;
  sw.OffContent = null;

  // 追加したプロパティに対応する
  sw.FlowDirection
    = msw.RightToLeft ? Windows.UI.Xaml.FlowDirection.RightToLeft
                      : Windows.UI.Xaml.FlowDirection.LeftToRight;
}

OnElementChangedを実装する（C#）
先ほどのレンダラーに、「On」「Off」の文字列を消す処理と、RightToLeftプロパティに対応する処理を追加した（太字の部分）。
MySwitchクラスに記述したプロパティには、このようにしてthis.ElementをMySwitchクラスにキャストすることでアクセスできる。

　また、イベントを処理するなら、次のコードのようにしてイベントハンドラーを付けたり外したりする（この例はイベントハンドラーに何も記述していないので、実行しても何も起きない）。

protected override void OnElementChanged(
  Xamarin.Forms.Platform.UWP.ElementChangedEventArgs<Xamarin.Forms.Switch> e)
{
  base.OnElementChanged(e);

  if (e.OldElement != null)
  {
    // イベントハンドラーを解除する
    e.OldElement.Toggled -= Element_Toggled;
  }

  if (e.NewElement != null)
  {
    // イベントハンドラーをセットする
    e.NewElement.Toggled += Element_Toggled;
  }

  ……省略……
}

private void Element_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
{
  // スイッチがON／OFFされたときの処理を書く
}

イベントハンドラーを実装する例（C#）
Toggledイベントに応答する例である。先ほどのレンダラーに太字の部分を追加した（イベントハンドラーの「Element_Toggled」メソッドに何も記述していないので、実行しても何も起きない）。

3. 作成したUIコントロールをXAMLコード内で利用する

　PCLプロジェクトの「MainPage.xaml」ファイルを次のようにする。作成したUIコントロール（＝MySwitchクラス）を使うには、XAMLコードに<local:MySwitch>要素を記述するだけだ。

<?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:local="clr-namespace:CustomRenderer"
             x:Class="CustomRenderer.MainPage">
  <!--<Label Text="Welcome to Xamarin Forms!"
           VerticalOptions="Center"
           HorizontalOptions="Center" />-->
  <ContentPage.Resources>
    <ResourceDictionary>
      <Style TargetType="Label">
        <Setter Property="FontSize" Value="Medium" />
        <Setter Property="VerticalOptions" Value="Center" />
        <Setter Property="HorizontalOptions" Value="End" />
      </Style>
      <Style TargetType="Switch">
        <Setter Property="VerticalOptions" Value="Center" />
        <Setter Property="HorizontalOptions" Value="Center" />
      </Style>
      <Style TargetType="local:MySwitch">
        <Setter Property="VerticalOptions" Value="Center" />
        <Setter Property="HorizontalOptions" Value="Center" />
      </Style>
    </ResourceDictionary>
  </ContentPage.Resources>
  <Grid VerticalOptions="Center" HorizontalOptions="Center" >
    <Label Text="標準のSwitch" />
    <Switch Grid.Column="1" />
    <Switch Grid.Column="2" IsToggled="True" />

    <Label Grid.Row="1" Text="Custom Renderer" />
    <local:MySwitch Grid.Row="1" Grid.Column="1" />
    <local:MySwitch Grid.Row="1" Grid.Column="2" IsToggled="True" />

    <Label Grid.Row="2" Text="Custom Renderer" />
    <local:MySwitch Grid.Row="2" Grid.Column="1" RightToLeft="True" />
    <local:MySwitch Grid.Row="2" Grid.Column="2" RightToLeft="True"
                    IsToggled="True" />
  </Grid>
</ContentPage>

作成したMySwitchコントロールを利用する（XAML）
3行×3列のGridに分割し、各行にOFF状態とON状態のスイッチを配置した。
1行目は標準のSwitchコントロール。
2行目は作成したMySwitchコントロール。
3行目もMySwitchコントロールだが、追加したRightToLeftプロパティを設定した。

　MySwitchクラスはPCLプロジェクトに定義したので、全てのプラットフォームで使用できる。

　MySwitchクラスのレンダラーはUWPプロジェクトだけに定義した。UWPプロジェクトではそのレンダラーが使われ、それ以外のプラットフォームでは既定の（＝Switchコントロールの）レンダラーが使用される。

　実行すると次の画像のようになる。

Custom Rendererの実行例（Visual Studio Emulator for Android）
Custom Rendererの実行例（Mac上のSimulator）
Custom Rendererの実行例（Mobile Emulator） Custom Rendererの実行例
上はVisual Studio Emulator for Androidでの実行結果。中はMac上のSimulatorでの実行結果。下はMobile Emulator（Windows 10）での実行結果。なお、Remoted iOS Simulator for Windowsを使用するにはVisual Studio Enterprise Editionのライセンスが必要となった（編集者がCommunity Editionを使っているため、本稿ではMac上のSimulatorでの画面キャプチャーとなっている）。使用方法についてはプレビュー段階の記事だが「XamarinアプリのMacでのビルドとiOS Simulator for Windows」を参照されたい。
UWPでは作成したレンダラーが使われており、RightToLeftプロパティの設定によって3行目のスイッチが左右反転している。
Android／iOSでは既定のレンダラー（＝Switchコントロール用のレンダラー）が使われており、RightToLeftプロパティの設定は無視されている。

まとめ

　Xamarin for Visual Studioでコードを共通化する方法は2通りある。PCLと共有プロジェクトだ。Xamarin.FormsでもネイティブUI（Xamarin Native）でも、どちらも利用できる。一長一短あるが、筆者の好みはPCLである。

　その共通コードの中でプラットフォーム依存のコードを使う方法は、豊富に用意されている。今回は、その中から4つの方法を試してみた。プラットフォーム間でどれだけコードを共通化できるかは、クロスプラットフォーム開発の最も面白い（そして、最も難しい）ポイントであろう。

「特集：Xamarin＋Visual Studioで始めるiOS／Android／UWPアプリ開発」のインデックス

「特集：Xamarin＋Visual Studioで始めるiOS／Android／UWPアプリ開発」

前のページへ 1|2|3 　　　　　　

Copyright© Digital Advantage Corp. All Rights Reserved.

＠IT

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。