Teilen über

Hinzufügen einer Schwenkgestenerkennung

  • Artikel

Die Verschiebungsgeste wird verwendet, um die Bewegung von Fingern um den Bildschirm zu erkennen und diese Bewegung auf Inhalte anzuwenden und mit der PanGestureRecognizer Klasse implementiert. Ein häufiges Szenario für die Schwenkbewegung ist das horizontale und vertikale Schwenken eines Bilds, sodass der gesamte Bildinhalt in einem Anzeigebereich angezeigt werden kann, der kleiner als die Bildabmessungen ist. Dies wird durch Bewegen des Bilds innerhalb des Anzeigebereichs erreicht und in diesem Artikel veranschaulicht.

Erstellen Sie eine Instanz PanGestureRecognizer, bearbeiten Sie das Ereignis PanUpdated, und fügen Sie die neue Funktion zur Gestenerkennung der Collection GestureRecognizers im Benutzeroberflächenelement hinzu, damit ein Benutzeroberflächenelement mit der Schwenkbewegung bewegt werden kann. Das folgende Codebeispiel zeigt die Instanz PanGestureRecognizer, die an das Element Image angefügt ist:

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

Dies kann auch wie im folgenden Codebeispiel dargestellt in XAML erreicht werden:

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

Der Code für den Ereignishandler OnPanUpdated wird dann zur CodeBehind-Datei hinzugefügt:

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

Erstellen eines Schwenkcontainers

Dieser Abschnitt enthält eine generalisierte Hilfsklasse, die das Schwenken mit Freihandformen ausführt. Dies eignet sich in der Regel gut für das Navigieren in Bildern oder Karten. Für das Bearbeiten der Schwenkbewegung zum Ausführen dieser Operation ist Mathematik erforderlich, um die Benutzeroberfläche zu transformieren. Diese Mathematik wird verwendet, um nur innerhalb der Begrenzung des umschlossenen Benutzeroberflächenelements zu schwenken. Das folgende Codebeispiel zeigt die PanContainer-Klasse:

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)
  {
    ...
  }
}

Diese Klasse kann das Benutzeroberflächenelement umschließen, sodass die Bewegung das umschlossene Benutzeroberflächenelement schwenkt. Das folgende XAML-Codebeispiel stellt die Klasse PanContainer dar, die ein Image-Element umschließt:

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

Das folgende Codebeispiel veranschaulicht, wie die Klasse PanContainer ein Image-Element auf einer C#-Seite umschließt:

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

In beiden Beispielen werden die Eigenschaften WidthRequest und HeightRequest auf die Werte für Breite und Höhe des angezeigten Bilds festgelegt.

Das angezeigte Bild wird geschwenkt, wenn das Image-Element eine Schwenkbewegung empfängt. Das Schwenken wird von der Methode PanContainer.OnPanUpdated ausgeführt, die im folgenden Codebeispiel veranschaulicht wird:

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

Diese Methode aktualisiert den sichtbaren Inhalt des umschlossenen Benutzeroberflächenelements basierend auf der Schwenkbewegung des Benutzers. Durch die Verwendung der Werte der Eigenschaften TotalX und TotalY der Instanz PanUpdatedEventArgs werden die Richtung und der Abstand der Schwenkbewegung berechnet. Die Eigenschaften App.ScreenWidth und App.ScreenHeight geben die Höhe und Breite des Anzeigebereichs an und werden durch die jeweiligen plattformspezifischen Projekte auf die Werte von Breite und Höhe des Gerätebildschirms festgelegt. Das umschlossene Benutzeroberflächenelement wird anschließend geschwenkt, indem die Eigenschaften TranslationX und TranslationY auf die berechneten Werte festgelegt werden.

Wenn Inhalt in einem Element geschwenkt wird, das nicht den gesamten Bildschirm einnimmt, können die Höhe und Breite des Anzeigebereichs von den Eigenschaften Height und Width des Elements abgerufen werden.

Hinweis

Das Anzeigen von Bildern mit hoher Auflösung kann den Speicherbedarf einer App erheblich erhöhen. Sie sollten daher nur erstellt werden, wenn dies erforderlich ist. Sie sollten freigegeben werden, sobald die App sie nicht mehr benötigt. Weitere Informationen finden Sie unter Optimieren von Bildressourcen.