JXUGC #16 Xamarin.Forms Custom Renderer ハンズオン

JXUGC #16 Xamarin.Forms Custom Renderer ハンズオンに行ってきました.

今回の講師は、@ticktackmobile さんです.

とにかく資料が充実していて、とても進めやすかったです.

もう何も恐くない Custom Renderer

ハンズオン以前の Custom Renderer に対する自分のイメージは、

  • 何やらXamarin.Forms で View をカスタマイズできる仕組みがあるらしいぞ…
  • でもなんか複雑そうだなぁ…コード量も微妙に多い…
  • そこまでやるならむしろ Xamarin.Native で個別に書いたほうが楽じゃない?

という感じでした.

Xamarin.Forms は PCLプロジェクトと Native プロジェクトを横断するので、それだけでなんとなく複雑に見えるんですよね…

その点、今回のハンズオンの資料はセクションの頭に必ず “〜プロジェクトでの作業です。” と明記してありました.本当に全てのセクションに明記されています.

「ハンズオンは参加したことがない」とおっしゃっていた @ticktackmobile さんですが、随所に細やかな配慮が感じられ、とても理解しやすい資料でした.

そしてハンズオン後、Custom Renderer に対する印象がどう変わったかというと…

  • 複雑に見えるが手順をなぞればそこまで難しくない
  • コード量もネイティブでカスタムView 作るのと大して変わらない
  • .Forms でも案外簡単に カスタムView を作れる!
  • もう何も恐くない(大袈裟)

もう何も恐くないは流石に大袈裟なんですが(笑)、カスタムView 作れそうだぞ! という気持ちにさせていただきました.

Custom Card View を作ってみたぞい!

というわけで、さっそく Android の CardView を使った カスタムView を作ってみました.

.xml から View を生成できないかなぁと思ったので、カスタムView を .xml で定義して OnElementChanged で Inflate する方法で View を生成してみました.

ここらへんはネイティブと変わらないので問題なく実装できます.

よくあるカードな感じの View が作れました.

多くの場合、 CardView を ListView と組み合わせて使うので View を継承したこのままの状態では使いづらいですね.

次は ViewCell を継承したカスタムセルとして実装してみます.

まとめ

今回のハンズオンで、Custom Renderer と仲良くなる一歩は確実に歩めたと思います…!

今後はさらに ListView と CustomView との組み合わせなど、実際にカスタムView を使うシチュエーションを試していきたいです.

講師の @ticktackmobile さんを初め、田渕さん、サポートスタッフの皆様にはこのようなハンズオンを催していただき、ありがとうございました.

大きなスペースでみんなで作業しているのはそれだけで楽しかったので、ぜひ今後とも参加させていただきたいと思います.

以上です.

追記:

思いがけず凄い方々のもくもくスペースに座らせていただき、「やばい、場違いなところに座ってしまった…」と戦々恐々なサンテアでありましたw