第 27 章カスタム レンダラーの概要 カスタム レンダラー

  • [アーティクル]

Note

この本は 2016 年春に発行されて以降、改訂されていません。 多くの情報はまだ価値がありますが、一部の資料は古くなっており、トピックの中にはまったく正しくないものまたは不完全なものもあります。

Button などの Xamarin.Forms 要素は、ButtonRenderer という名前のクラスにカプセル化されたプラットフォーム固有のボタンを使ってレンダリングされます。 iOS バージョンの ButtonRenderer、Android バージョンの ButtonRenderer、および UWP バージョンの ButtonRenderer をご確認ください。

この章では、独自のレンダラーを記述して、プラットフォーム固有のオブジェクトにマップするカスタム ビューを作成する方法について説明します。

完全なクラス階層

Xamarin.Forms のプラットフォーム固有のコードを含むアセンブリには次の 4 つがあります。 次のリンクを使って、GitHub でソースを表示できます。

Note

本書に記載されている WinRT アセンブリは、このソリューションの一部ではなくなりました。

PlatformClassHierarchy サンプルでは、実行中のプラットフォームに対して有効なアセンブリのクラス階層を表示しています。

ViewRenderer という名前の重要なクラスがあることに気付くでしょう。 これは、プラットフォーム固有のレンダラーを作成するときに派生するクラスです。 これはターゲット プラットフォームのビュー システムに関連付けられているため、3 つの異なるバージョンに存在します。

iOS ViewRenderer<TView, TNativeView> には、汎用引数があります。

Android ViewRenderer<TView, TNativeView> には、汎用引数があります。

UWP ViewRenderer<TElement, TNativeElement> には、異なる名前を持つ汎用引数があります。

レンダラーを記述するときは、View からクラスを派生させ、サポート対象プラットフォームごとに 1 つずつ、複数の ViewRenderer クラスを記述します。 各プラットフォーム固有の実装からは、TNativeView または TNativeElement パラメーターとして指定した型から派生するネイティブ クラスが参照されます。

Hello, custom renderers!

HelloRenderers プログラムは、自身の App クラスの HelloView という名前のカスタム ビューを参照します。

HelloView クラスは HelloRenderers プロジェクトに含まれており、単に View から派生します。

HelloRenderers.iOS プロジェクトの HelloViewRenderer クラスは、ViewRenderer<HelloView, UILabel> から派生します。 OnElementChanged のオーバーライドで、それはネイティブの iOS UILabel を作成して SetNativeControl を呼び出します。

HelloRenderers.Droid プロジェクトの HelloViewRenderer クラスは、ViewRenderer<HelloView, TextView> から派生します。 OnElementChanged のオーバーライドで、それは Android TextView を作成して SetNativeControl を呼び出します。

HelloRenderers.UWP とその他の Windows プロジェクトの HelloViewRenderer クラスは、ViewRenderer<HelloView, TextBlock> から派生します。 OnElementChanged のオーバーライドで、それは Windows TextBlock を作成して SetNativeControl を呼び出します。

ViewRenderer のすべての派生クラスには、HelloView クラスを特定の HelloViewRenderer クラスに関連付けるアセンブリ レベルの ExportRenderer 属性が含まれています。 これにより、Xamarin.Forms は個々のプラットフォーム プロジェクトでレンダラーを特定します。

Hello ビューのトリプル スクリーンショット

レンダラーとプロパティ

次のレンダラーのセットは楕円描画を実装しており、Xamarin.FormsBook.Platform ソリューションのさまざまなプロジェクトに配置されています。

EllipseView クラスは、Xamarin.FormsBook.Platform プラットフォームにあります。 このクラスは BoxView に似ており、単一のプロパティ、Color 型の Color のみを定義します。

レンダラーは、レンダラーの OnElementPropertyChanged メソッドをオーバーライドすることにより、View に設定されたプロパティ値をネイティブ オブジェクトに転送できます。 このメソッド内 (およびほとんどのレンダラー内) で、次の 2 つのプロパティを使用できます。

  • Element: Xamarin.Forms 要素
  • Control: ネイティブ ビューまたはウィジェットまたはコントロール オブジェクト

これらのプロパティの型は、ViewRenderer へのジェネリック パラメーターによって決定されます。 この例では、Element の型は EllipseView です。

したがって、OnElementPropertyChanged のオーバーライドでは、Element の Color 値をネイティブの Control オブジェクトに転送できます (何らかの変換が必要になることがあります)。 次の 3 つのレンダラーがあります。

EllipseDemo クラスでは、これらの EllipseView オブジェクトのいくつかを表示しています。

楕円のデモのトリプル スクリーンショット

BouncingBall では、EllipseView が画面の端で跳ね返ります。

レンダラーとイベント

レンダラーでは、イベントを間接的に生成することもできます。 StepSlider クラスは、通常の Xamarin.FormsSlider に似ていますが、Minimum 値と Maximum 値の間に複数の異なるステップを指定できます。

次の 3 つのレンダラーがあります。

レンダラーは、ネイティブ コントロールに対する変更を検出すると、StepSlider で定義されているバインド可能なプロパティを参照する SetValueFromRenderer を呼び出します (StepSlider によって ValueChanged イベントが開始されることになる変更)。

StepSliderDemo サンプルでは、この新しいスライダーの例を示しています。