Xamarin.Forms でプラットフォーム固有の機能を実装する(カスタムレンダラー編)

Android iOS Xamarin Xamarin.Forms

Xamarin.Formsでは各プラットフォーム固有の機能を使用する方法として、主に2つの方法があります。

  • カスタムレンダラー
  • DependencyService

カスタムレンダラーは、Xamarin.Formsの既存のビューを拡張する場合などに使用します。
ここでは、Xamarin.FormsのImageの色を変更する方法をカスタムレンダラーで実装します。

サンプルはこちら

github.com

手順

  • 共通プロジェクトにカスタム元のビューを用意する
  • 各プラットフォームにカスタム用のカスタムレンダラーを用意する
  • 共通プロジェクトにカスタマイズ用のパラメータを追加する
  • 各プラットフォームのカスタムレンダラーにカスタム内容を記述する

共通プロジェクトにカスタム元のビューを用意する

Xamarin.FormsでImageをカスタマイズする(共通プロジェクト)

カスタムレンダラーを使用するにはまず、共通プロジェクトに、Xamarin.Formsのビューを継承したビューを用意します。 (以下、このビューをForms側ビューと呼びます。)
今回はImageを継承したCustomImageを用意しました。

各プラットフォームにカスタム用のカスタムレンダラーを用意する

  • Forms側ビューのレンダラーに対応した、各プラットフォームのレンダラーを継承したカスタムレンダラークラスを作成する
  • ExportRenderer属性を使用して、Forms側ビューのレンダラーを↑で作成したカスタムレンダラーに変更する

Xamarin.FormsでImageをカスタマイズする(カスタムレンダラー、Android)

この段階でビルドすると、まだ何もカスタマイズしていないので、設定した画像がそのまま表示されます。

共通プロジェクトにカスタマイズ用のパラメータを追加する

Xamarin.FormsでImageをカスタマイズする(共通プロジェクト)

画像の色を変更するためのImageColorというプロパティを用意しました。

各プラットフォームのカスタムレンダラーにカスタム内容を記述する

カスタムレンダラーでは主に2つの関数をOverrideして使用します。

  • OnElementChanged : 初期化時の処理を実装
  • OnElementPropertyChanged : プロパティ値が変化する都度の処理を実装

Xamarin.FormsでImageをカスタマイズする(カスタムレンダラー、Android)

Xamarin.FormsでImageをカスタマイズする(カスタムレンダラー、iOS)

ここでは、
Androidでは、OnElementChangedで画像の色を変更する処理をしています。
iOSでは、OnElementPropertyChangedで画像の色を変更する処理をしています。 iOSではOnElementChangedの段階では、imageの準備が完了していないためです。

以上で、カスラムレンダラーを使用して、Xamarin.FormsのImageのカラーが変更できるようになりました。

f:id:mattsuDev:20150713183735p:plain f:id:mattsuDev:20150713183747p:plain