Udostępnij za pośrednictwem

Dodawanie rozpoznawania gestów pan

  • Artykuł

Gest pan służy do wykrywania ruchu palców wokół ekranu i stosowania tego ruchu do zawartości i jest implementowany z klasą PanGestureRecognizer . Typowym scenariuszem gestu panowania jest przesuwanie obrazu w poziomie i w pionie, dzięki czemu można wyświetlić całą zawartość obrazu, gdy jest ona wyświetlana w widoku mniejszym niż wymiary obrazu. Jest to realizowane przez przeniesienie obrazu w okienku wyświetlania i pokazano w tym artykule.

Aby element interfejsu użytkownika był przesuwany za pomocą gestu pan, utwórz PanGestureRecognizer wystąpienie, obsłuż PanUpdated zdarzenie i dodaj nowy moduł rozpoznawania gestów do GestureRecognizers kolekcji w elemecie interfejsu użytkownika. Poniższy przykład kodu przedstawia PanGestureRecognizer element dołączony do Image elementu:

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

Można to również osiągnąć w języku XAML, jak pokazano w poniższym przykładzie kodu:

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

Kod programu OnPanUpdated obsługi zdarzeń jest następnie dodawany do pliku za pomocą kodu:

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

Tworzenie kontenera pan

Ta sekcja zawiera uogólnioną klasę pomocnika, która wykonuje przesuwanie dowolnych kształtów, co jest zwykle odpowiednie do nawigowania w obrębie obrazów lub map. Obsługa gestu pan w celu wykonania tej operacji wymaga pewnych obliczeń matematycznych w celu przekształcenia interfejsu użytkownika. Ta matematyka służy do przesuwania tylko w granicach opakowanego elementu interfejsu użytkownika. Poniższy przykład kodu przedstawia klasę 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)
  {
    ...
  }
}

Tę klasę można opakować wokół elementu interfejsu użytkownika, aby gest przesunął opakowany element interfejsu użytkownika. Poniższy przykład kodu XAML przedstawia PanContainer zawijanie Image elementu:

<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>

Poniższy przykład kodu pokazuje, jak PanContainer opakowuje Image element na stronie języka C#:

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
          }
        }
      }
    };
  }
}

W obu przykładach WidthRequest właściwości i HeightRequest są ustawione na wartości szerokości i wysokości wyświetlanego obrazu.

Image Gdy element otrzyma gest pan, wyświetlany obraz zostanie przesłonięty. Okienko jest wykonywane przez metodę PanContainer.OnPanUpdated , która jest pokazana w poniższym przykładzie kodu:

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;
  }
}

Ta metoda aktualizuje widoczną zawartość opakowanego elementu interfejsu użytkownika na podstawie gestu pan użytkownika. Jest to osiągane przy użyciu wartości TotalX właściwości i TotalY PanUpdatedEventArgs wystąpienia, aby obliczyć kierunek i odległość patelni. Właściwości App.ScreenWidth i App.ScreenHeight zapewniają wysokość i szerokość widoku oraz są ustawiane na wartości szerokości ekranu i wysokości ekranu urządzenia według odpowiednich projektów specyficznych dla platformy. Opakowany element użytkownika jest następnie przesuwany przez ustawienie jego TranslationX właściwości i TranslationY na wartości obliczeniowe.

Podczas przesuwania zawartości w elemecie, który nie zajmuje pełnego ekranu, wysokość i szerokość widoku można uzyskać z właściwości i Width elementuHeight.

Uwaga

Wyświetlanie obrazów o wysokiej rozdzielczości może znacznie zwiększyć ilość pamięci aplikacji. W związku z tym należy je utworzyć tylko wtedy, gdy jest to wymagane i powinno zostać wydane natychmiast, gdy aplikacja nie będzie już ich wymagała. Aby uzyskać więcej informacji, zobacz Optymalizowanie zasobów obrazów.