jxugc #16 xamarin.forms custom renderer ハンズオンの前説
TRANSCRIPT
Xamarin.Formsの
ViewとRendererについての解説
JXUGC #16 Xamarin.Forms Custom Renderer ハンズオン
2016/8/10
@ticktackmobile
#JXUGC
自己紹介
Xamarin.Forms Preview版の新機能解説するマン
手書きXAMLer
第七駆逐隊推し
Twitter: @ticktackmobile
GitHub: P3PPP
#JXUG
最近は艦これアーケードの設置店舗を表示するWebサイト を作ったりしました。
この資料について
【Xamarin.Forms】ViewRendererと仲良くなるための簡易チュートリアル - ぴーさんログという私のブログ記事を元にしたハンズオン企画の前説です。
イベントページ
JXUGC #16 Xamarin.Forms Custom Renderer ハンズオン - dots. [ドッツ]
#JXUG
Xamarin.FormsのRendererとは？
Xamarin.Formsのコントロール(抽象化されたView層)とネイティブプラットフォームのコントロールを結びつける仕組み。
Rendererはネイティブ側で、XFコントロールとネイティブコントロールの仲介役となる。(プロパティ変更の伝達など)
Xamarin.Formsの標準コントロールもこの仕組みで実装されている。
#JXUG
Button
ButtonRenderer UIButton
ButtonRenderer Button
ButtonRenderer Button
全てのコントロールには対応するRendererが存在する
Xamarin.Forms View – Renderer - Native Controlの対応表
#JXUG
iOS
Android
UWP
XF
RendererもネイティブプラットフォームのView要素である
#JXUG
コンテナ系のコントロールから派生している
UIView
VisualElementRenderer
ViewRenderer<TV, TNV>
ViewGroup
VisualElementRenderer
ViewRenderer<TV, TNV>
Panel
VisualElementRenderer
ViewRenderer<TV, TNV>
AndroidiOS UWP
Rendererを扱う動機
標準コントロールの振る舞いやレイアウトの変更
例
Xamarin.FormsでButtonのImageが真ん中からズレる問題| ぅゎょぅι゛ょっょぃ
Custom Rendererを定義して既定のレイアウトを変更することで回避。
#JXUG
Rendererを扱う動機
新規コントロールの追加
ネイティブプラットフォームの素敵コントロールの移植
例
NControl
NGraphicsというクロスプラットフォームなベクタグラフィクスライブラリのカンバスを抱えたXamarin.Formsコントロール
#JXUG
Effects
後付けでネイティブコントロールをカスタムする仕組み。EffectはXF側とネイティブ側にアクセス可能。XF 2.1.0 ～
使い方
1. ネイティブプラットフォームでEffectを定義する
PlatformEffectを継承する
OnAttachedにカスタマイズ処理やイベント購読を書く
OnDettachedにイベント解除などを書く
2. PCL側でViewやPageにEffectを付加する
#JXUG
EffectsとCustom Rendererの比較
どちらもネイティブコントロールをカスタムする手段
Effectsはネイティブコントロールの生成に関与できない
例えば、UIButtonのStyleはインスタンス生成時に決定するのでEffectでは変更不可能。(Buttonを画像ボタン化するEffect
は作れない)
Effectの方が再利用性が高い
例えば、Viewにドロップシャドウを付加するEffectは派生先のButtonやLabelに対しても効果がある。
#JXUG
Effectsおまけ
Effectsでプロパティを持たせたい場合はAttached Property
と組み合わせると良い。(ドロップシャドウの大きさ とか)
例
Using Effects - Xamarin.Forms Complete
#JXUG
ハンズオン内容
ViewRenderer<TView, TNativeView>を使って新規コントロールを実装します。
BoxViewもどきの実装
XFコントロールのプロパティをネイティブコントロールに反映させる方法を学びます。
ネイティブコントロールのイベントをXFコントロールのイベントにする方法を学びます
WebViewもどきの実装
FXコントロールからネイティブコントロールのAPIを呼び出す方法を学びます。
#JXUG
よく分かるViewRenderer<TView, TNativeView>の図
ViewRenderer
TNativeView
#JXUG
TView参照 内包
ネイティブ側Xanarin.Forms側
ハンズオン手順へGO！