Přidat nástroj pro rozpoznávání gesta posunu

Download Sample Stažení ukázky

Gesto posunu se používá k detekci pohybu prsty na obrazovce a k použití tohoto přesunu na obsah a implementuje se s PanGestureRecognizer třídou. Běžným scénářem gesta posouvání je horizontální a vertikálně posunutí obrázku, aby se veškerý obsah obrázku mohl zobrazit, když se zobrazuje v zobrazení menším než rozměry obrázku. To se provádí přesunutím obrázku v rámci zobrazení a je znázorněno v tomto článku.

Chcete-li nastavit prvek uživatelského rozhraní jako mobilní gesto pro posouvání, vytvořte PanGestureRecognizer instanci, zpracujte PanUpdated událost a přidejte nový nástroj pro rozpoznávání gest do GestureRecognizers kolekce v prvku uživatelského rozhraní. Následující příklad kódu ukazuje, že je PanGestureRecognizer připojen k Image elementu:

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

To lze také dosáhnout v jazyce 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 pro OnPanUpdated obslužnou rutinu události je poté přidán do souboru kódu na pozadí:

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

Vytvoření kontejneru pan

Tato část obsahuje zobecněnou pomocnou třídu, která provádí posouvání volného tvaru, což je obvykle vhodné k navigaci v rámci obrázků nebo map. Zpracování gesta posunu pro provedení této operace vyžaduje, aby některé matematické výrazy transformoval uživatelské rozhraní. Tato matematika se používá pro posouvání pouze v rámci hranic zabalených prvků 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 posouvat zabalený prvek uživatelského rozhraní. Následující příklad kódu XAML ukazuje PanContainer obtékání 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>

Následující příklad kódu ukazuje, jak PanContainer zabalí Image prvek na stránce 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 obou příkladech WidthRequestHeightRequest jsou vlastnosti a nastaveny na hodnoty Width a Height zobrazeného obrázku.

Když Image prvek obdrží gesto posunu, zobrazí se zobrazená obrázek. Posun je proveden PanContainer.OnPanUpdated metodou, která je uvedena 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 prvku zabaleného uživatelského rozhraní na základě gesta posunu uživatele. Toho dosáhnete použitím hodnot TotalXTotalY vlastností a PanUpdatedEventArgs instance pro výpočet směru a vzdálenosti posouvání. App.ScreenWidthVlastnosti a App.ScreenHeight poskytují výšku a šířku zobrazení a jsou nastaveny na šířku obrazovky a hodnoty výšky obrazovky zařízení podle příslušných projektů specifických pro platformu. Zabalený uživatelský element je pak protékat nastavením jeho TranslationX vlastností a TranslationY na počítané hodnoty.

Při posouvání obsahu v prvku, který nevyužívá celou obrazovku, lze výšku a šířku zobrazení získat z Height vlastností elementu a Width .

Poznámka

Zobrazení imagí s vysokým rozlišením může značně zvýšit nároky na paměť aplikace. Proto by měly být vytvořeny pouze v případě potřeby a měly by být vydány, jakmile je aplikace již nevyžaduje. Další informace najdete v tématu optimalizace prostředků imagí.