Sdílet prostřednictvím

Přidání rozpoznávání gest posouvání

  • Článek

Gesto posouvání se používá k detekci pohybu prstů po obrazovce a použití tohoto pohybu na obsah a je implementována s PanGestureRecognizer třídou. Běžným scénářem gesta posouvání je vodorovné a svislé posouvání obrázku, aby se veškerý obsah obrázku mohl zobrazit, když se zobrazuje v oblasti zobrazení menší než rozměry obrázku. Toho se dosahuje přesunutím obrázku v rámci oblasti zobrazení a je to znázorněno v tomto článku.

Pokud chcete, aby byl prvek uživatelského rozhraní pohybitelný gestem posouvání, vytvořte PanGestureRecognizer instanci, zpracujte PanUpdated událost a přidejte do kolekce na prvek uživatelského rozhraní nový rozpoznávání GestureRecognizers gest. Následující příklad kódu ukazuje připojenou PanGestureRecognizer k elementu Image :

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

Toho lze dosáhnout také v xaml, jak je znázorněno v následujícím příkladu kódu:

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

Kód obslužné OnPanUpdated rutiny události se pak přidá do souboru kódu za kódem:

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

Vytvoření kontejneru posouvání

Tato část obsahuje generalizovanou pomocnou třídu, která provádí volné posouvání, což je obvykle vhodné pro navigaci v obrázcích nebo mapách. Zpracování gesta posouvání k provedení této operace vyžaduje k transformaci uživatelského rozhraní určitou matematiku. Tato matematika se používá k posouvání pouze v mezích zabaleného prvku uživatelského rozhraní. Následující příklad kódu ukazuje PanContainer třídu:

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

Tato třída může být zabalena kolem prvku uživatelského rozhraní, aby gesto posunut zabalený prvek uživatelského rozhraní. Následující příklad kódu XAML ukazuje zabalení elementu PanContainer Image :

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

Následující příklad kódu ukazuje, jak PanContainer zalamuje Image prvek na stránce jazyka 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
          }
        }
      }
    };
  }
}

V oboupříkladch WidthRequest HeightRequest

Image Když prvek obdrží gesto posouvání, zobrazí se zobrazený obrázek. Pan se provádí metodou PanContainer.OnPanUpdated , která je znázorněna v následujícím příkladu kódu:

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

Tato metoda aktualizuje zobrazitelný obsah zabaleného prvku uživatelského rozhraní na základě gesta posouvání uživatele. Toho dosáhnete pomocí hodnot TotalX a TotalY vlastností PanUpdatedEventArgs instance k výpočtu směru a vzdálenosti posunu. App.ScreenHeight Vlastnosti App.ScreenWidth poskytují výšku a šířku oblasti zobrazení a jsou nastaveny na šířku obrazovky a výšku obrazovky zařízení příslušnými projekty specifickými pro platformu. Zabalený prvek uživatele se pak posune nastavením jeho TranslationX a TranslationY vlastností na počítané hodnoty.

Při posouvání obsahu v prvku, který nezabývá celou obrazovku, lze výšku a šířku oblasti zobrazení získat z prvků Height a Width vlastností.

Poznámka:

Zobrazení obrázků s vysokým rozlišením může výrazně zvýšit nároky na paměť aplikace. Proto by se měly vytvořit pouze v případě potřeby a měly by být vydány, jakmile je aplikace už nevyžaduje. Další informace naleznete v tématu Optimalizace prostředků image.