[Xamarin.Forms]SNSアプリでよくあるスワイプ機能を実装する

こんちゃ！洋梨🍐です。

今回はアプリでSNSなどでもよくあるこんな機能を実装していきます。

手順としては

・SwipeGestureRecognizerを実装、スワイプを認識

・スワイプに対するアクション(この例の場合はTranslateToでの移動)を行う

のみです。

SwipeGestureRecognizerを実装

スワイプを認識させたいviewのGestureRecognizersに対してSwipeGestureRecognizerを追加します。

‹Grid.GestureRecognizers>
 ‹SwipeGestureRecognizer Direction="Left" Swiped="SwipeGestureRecognizer_Swiped_Left" />
‹/Grid.GestureRecognizers>

Xaml上で追加するにはこんな感じです。

Directionには認識させるスワイプの方向を指定し、Swipedには呼び出す関数を指定します。

‹Grid.GestureRecognizers>
 ‹SwipeGestureRecognizer Direction="Right" Swiped="SwipeGestureRecognizer_Swiped_Right"/>
 ‹SwipeGestureRecognizer Direction="Left" Swiped="SwipeGestureRecognizer_Swiped_Left" />
‹/Grid.GestureRecognizers>

右フリック、左フリックで別処理をさせたい場合はこのように書くこともできます。

アクションを実装

では今回例としてviewが横に流れながら消えていくのを実装します。

右に流れていくアクションにはTranslateTo(x移動先,y移動先,時間)を使い、消えていくアクションにはFadeTo(透明度,時間)を使います。

スワイプ時にこの2つのアニメーションを組み合わせて実行させます。

private void SwipeGestureRecognizer_Swiped_Left(object sender, SwipedEventArgs e)
{
 view.TranslateTo(-800, 0, 200);
 view.FadeTo(0, 200);
}

なお、これら関数はawaitで待機することが出来ます。

複数アニメーションを一度に行い、待機させたい場合はこのように書きます。

private void SwipeGestureRecognizer_Swiped_Left(object sender, SwipedEventArgs e)
{
await Task.WhenAll(
 view.TranslateTo(-800, 0, 200),
 view.FadeTo(0, 200)
);
}

ちなみに絶対良くないとは思うんですがこんな書き方もできます。

public async Task PlayRemoveAnimation()
{
 view.TranslateTo(-800, 0, 200);
 await view.FadeTo(0, 200);
}

絶対良くないですよねこの書き方😇

こっちの方がスッキリしてて僕は好きです（笑）
でもVisual Studio上では警告がでるのでスッキリしません()

スワイプ機能の実装については以上になります！

ここまで読んでくれてありがとうございました！！

ホームページでは他にも

・様々な記事や作った作品および過程
・ソースコード、素材ファイル
・あらゆる”モノ”の作り方

などなど随時、記事や作品を新規公開・更新していますので是非見ていってくださいね！見ていただけると本当に嬉しいです！

タグ: SwipeGestureRecognizer, Xamarin