パンジェスチャ認識エンジンを追加する

[アーティクル]
07/13/2023

パンジェスチャは、画面周辺の指の動きを検出し、その動きをコンテンツに適用するために使用され、PanGestureRecognizer クラスを使用して実装されます。パンジェスチャの一般的なシナリオは、イメージを水平方向や垂直方向にパンし、イメージをそのイメージのディメンションより小さいビューポートで表示するときに、そのコンテンツがすべて表示されるようにすることです。これは、イメージをビューポート内で移動することによって実現され、この記事でその方法について説明します。

ユーザーインターフェース要素をパンジェスチャを使用して移動できるようにするには、PanGestureRecognizer インスタンスを作成し、PanUpdated イベントを処理し、新しいジェスチャ認識エンジンをユーザーインターフェイス要素の GestureRecognizers コレクションに追加します。次に示すのは、Image 要素に関連付けられている PanGestureRecognizer のコード例です。

var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += (s, e) => {
  // Handle the pan
};
image.GestureRecognizers.Add(panGesture);

次のコード例に示すように、XAML でもこれを実現できます。

<Image Source="MonoMonkey.jpg">
  <Image.GestureRecognizers>
    <PanGestureRecognizer PanUpdated="OnPanUpdated" />
  </Image.GestureRecognizers>
</Image>

OnPanUpdated イベントハンドラー用のコードが分離コードファイルに追加されます。

void OnPanUpdated (object sender, PanUpdatedEventArgs e)
{
  // Handle the pan
}

パンコンテナーの作成

このセクションにはフリーフォームのパンを実行する汎用のへルパーメソッドが含まれており、一般的に画像内やマップ内の移動に適しています。この操作を実行するためのパンジェスチャの処理では、ユーザーインターフェイスを変換するための多少の計算が必要です。この計算はラップされたユーザーインターフェイス要素の境界内のパンにのみ使用されます。次に示すのは、PanContainer クラスのコード例です。

public class PanContainer : ContentView
{
  double x, y;

  public PanContainer ()
  {
    // Set PanGestureRecognizer.TouchPoints to control the
    // number of touch points needed to pan
    var panGesture = new PanGestureRecognizer ();
    panGesture.PanUpdated += OnPanUpdated;
    GestureRecognizers.Add (panGesture);
  }

  void OnPanUpdated (object sender, PanUpdatedEventArgs e)
  {
    ...
  }
}

このクラスでユーザーインターフェイス要素をラップして、ラップされたユーザーインターフェイス要素がそのジェスチャでパンされるようにすることができます。次に示すのは、Image 要素をラップしている PanContainer の XAML のコード例です。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PanGesture"
             x:Class="PanGesture.HomePage">
    <ContentPage.Content>
        <AbsoluteLayout>
            <local:PanContainer>
                <Image Source="MonoMonkey.jpg" WidthRequest="1024" HeightRequest="768" />
            </local:PanContainer>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

次に示すのは、PanContainer で C# ページ内の Image 要素をラップする方法のコード例です。

public class HomePageCS : ContentPage
{
  public HomePageCS ()
  {
    Content = new AbsoluteLayout {
      Padding = new Thickness (20),
      Children = {
        new PanContainer {
          Content = new Image {
            Source = ImageSource.FromFile ("MonoMonkey.jpg"),
            WidthRequest = 1024,
            HeightRequest = 768
          }
        }
      }
    };
  }
}

両方の例で、WidthRequest と HeightRequest の各プロパティは表示されるイメージの高さと幅の値に設定されます。

Image 要素がパンジェスチャを受け取ると、表示されているイメージがパンされます。次のコード例に示すように、PanContainer.OnPanUpdated メソッドによってパンが実行されます。

void OnPanUpdated (object sender, PanUpdatedEventArgs e)
{
  switch (e.StatusType) {
  case GestureStatus.Running:
    // Translate and ensure we don't pan beyond the wrapped user interface element bounds.
    Content.TranslationX =
      Math.Max (Math.Min (0, x + e.TotalX), -Math.Abs (Content.Width - App.ScreenWidth));
    Content.TranslationY =
      Math.Max (Math.Min (0, y + e.TotalY), -Math.Abs (Content.Height - App.ScreenHeight));
    break;

  case GestureStatus.Completed:
    // Store the translation applied during the pan
    x = Content.TranslationX;
    y = Content.TranslationY;
    break;
  }
}

このメソッドにより、ユーザーのパンジェスチャに基づいて、ラップされたユーザーインターフェイス要素の表示可能コンテンツが更新されます。これは、インスタンスの TotalX と PanUpdatedEventArgsTotalY の各プロパティを使用して、パンの方向と距離を計算します。 App.ScreenWidth と App.ScreenHeight の各プロパティはそのビューポートの高さと幅を提供し、プラットフォーム固有の各プロジェクトによってそのデバイスの画面の幅と高さの値に設定されます。 TranslationX と TranslationY の各プロパティが計算済みの値に設定されることで、ラップされたユーザー要素がパンされます。

画面全体を占拠しない要素内でコンテンツをパンすると、そのビューポートの高さと幅はその要素の Height と Width の各プロパティから取得できます。

注意

高解像度のイメージを表示すると、アプリのメモリの占有領域が大幅に増える場合があります。そのため、必要な場合にのみ作成し、アプリで不要になったらすぐに解放する必要があります。詳細については、「イメージリソースを最適化する」を参照してください。

パン ジェスチャ認識エンジンを追加する

パン コンテナーの作成

関連リンク

その他のリソース

パンジェスチャ認識エンジンを追加する

パンコンテナーの作成