Xamarin.Formsでタップ座標を相対的に取得する。

無料で使えるライブラリ等が見当たらなかったので色々探しました。
結果的にライブラリを見つけれずXamarinのサンプルを流用することで実現しました。
絶対位置でのタップ座標ではありませんが代用する形で実現しています。同じように困っている方の参考になれば幸いです。




ちなみに私が実現した機能は下記の図のようにタップしながらアイテムを選択可能なドーナツメニューのようなものでした。
f:id:furugen098:20180105011637g:plain


下記サンプルからポイントを抜粋して記載します。

Xamarinのサンプルコード
Xamarin.Forms - Touch-Tracking Effect Demos - Code Samples | Microsoft Docs

準備

.Forms

下記のクラスを.Formsプロジェクトにコピーします。
適当にフォルダを切ってまとめて配置するのが楽ですね。
TouchActionEventArgs / TouchActionEventHandler / TouchActionEventHandler / TouchEffect / WhiteKey
f:id:furugen098:20180131235534p:plain

iOS/Android

iOS/Androidのプロジェクトには下記赤枠のクラスを配置します。
iOSはTouchEffect.cs 及び TouchRecognizer
Androidは TouchEffect.cs ですね。
f:id:furugen098:20180131234954p:plain

利用方法(.Forms)

.xaml

<Grid Grid.Row="1" BackgroundColor="White">
   <Grid.Effects>
          <tt:TouchEffect Capture="True"
                      TouchAction="OnTouchEffectAction" />
     </Grid.Effects>
</Grid>

.cs

       void OnTouchEffectAction(object sender, TouchActionEventArgs args)
        {
            // X座標
            args.Location.X;
            // Y座標
            args.Location.Y;

            switch (args.Type)
            {
                case TouchActionType.Pressed:
                   // タップを開始した瞬間
                   break;

                case TouchActionType.Moved:
                   //タップ中
                   break;

                case TouchActionType.Released:
                    // タップが離れたとき
                    break;
            }
       }

私のドーナツメニューに関してはPressedでタッチの基礎座標を取得し、
Movedで相対座標を割り出しメニューのアクティブな座標からアニメーションを起こしています。

最後に

今回はXamarinの公式サンプルの紹介となりましたが、
私のアプリでつかっているドーナツメニューについては汎用的に使えるように改修したのちGitHubに公開します。Nugetでも公開しようかと思うので、よければご利用いただけると嬉しいです。