ぴーさんログ

だいたいXamarin.Formsのブログ

Xamarin.Formsでも使えるベクタグラフィクス コントロール「NControl」

NControlNControlView というUIコントロールを提供するXamarin.Forms用ライブラリです。

NControlView前回紹介したNGraphicsのカンバスを内蔵しており、独自の見た目を持つカスタムコントロールが簡単に作れるようになっています。(ちなみにNGraphicsの作者とは別の人)

さらにXamarin.Forms.ContentViewを継承しているため複合コントロールを作る事も容易です。

さらにさらに、タッチイベントも提供されているためカスタムボタンとして作りこむのにとっても都合が良いのです!(押されたら色を変えたり、アニメーションしたり。画像やラベルにGestureRecognizerを追加するだけでは難しいところ)

公式のサンプルコントロールがとても参考になるので是非ともご一読頂きたい。

描画

NControlView のカンバスに描画するには2つの方法があります。

  • 描画関数を渡す
  • NControlViewを継承してDrawメソッドをoverrideする

描画関数を渡す場合はこんな感じ。(公式のREADMEより)

Content = new NControlView {
    DrawingFunction = (canvas, rect) => {
        canvas.DrawLine(rect.Left, rect.Top, rect.Width, rect.Height, NGraphics.Colors.Red);
        canvas.DrawLine(rect.Width, rect.Top, rect.Left, rect.Height, NGraphics.Colors.Yellow);
    }
};

継承する場合はこんな感じ。(公式のREADMEより)

public class MyControl: NControlView
{
    public override void Draw(NGraphics.ICanvas canvas, NGraphics.Rect rect)
    {
        canvas.DrawLine(rect.Left, rect.Top, rect.Width, rect.Height, NGraphics.Colors.Red);
        canvas.DrawLine(rect.Width, rect.Top, rect.Left, rect.Height, NGraphics.Colors.Yellow);
    }
}

どちらも、描画用のカンバスとコントロールの大きさを表す矩形が与えられます。

タッチイベント

NControlViewが提供するタッチイベントは4種類。

  • OnTouchesBegan
  • OnTouchesCancelled
  • OnTouchesEnded
  • OnTouchesMoved

タッチ開始と終了が個別に用意されているためボタンらしい演出も容易です。CircularButtonControlを例にとると「タッチ開始:縮小 → タッチ終了:元の大きさに戻す」といった具合です。

まとめ

NControlを使えば、DPIに依存しないカスタムコントロールを比較的低コストに実装する事ができます。これがあればXamarin.Formsだけでもかなり戦えるようになるんじゃないでしょうか。