Aracılığıyla paylaş

Kaydırma hareketi tanıyıcısı ekleme

  • Makale

Kaydırma hareketi, parmağın ekranda hareket ettiğini algılamak ve bu hareketi içeriğe uygulamak için kullanılır ve sınıfıyla birlikte PanGestureRecognizer uygulanır. Kaydırma hareketi için yaygın bir senaryo, bir görüntüyü yatay ve dikey olarak kaydırmaktır; böylece görüntü içeriği görüntü boyutlarından daha küçük bir görünümportunda görüntülendiğinde görüntülenebilir. Bu, görüntüyü görünüm penceresine taşıyarak gerçekleştirilir ve bu makalede gösterilmiştir.

Bir kullanıcı arabirimi öğesini kaydırma hareketiyle taşınabilir hale getirmek için bir PanGestureRecognizer örnek oluşturun, olayı işleyin PanUpdated ve kullanıcı arabirimi öğesindeki koleksiyona GestureRecognizers yeni hareket tanıyıcısını ekleyin. Aşağıdaki kod örneği, bir öğeye eklenmiş bir PanGestureRecognizerImage öğeyi gösterir:

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

Bu, aşağıdaki kod örneğinde gösterildiği gibi XAML'de de elde edilebilir:

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

Ardından olay işleyicisinin OnPanUpdated kodu arka planda kod dosyasına eklenir:

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

Kaydırma kapsayıcısı oluşturma

Bu bölüm, genellikle görüntüler veya haritalar içinde gezinmek için uygun olan serbest biçimli kaydırma gerçekleştiren genelleştirilmiş bir yardımcı sınıfı içerir. Bu işlemi gerçekleştirmek için kaydırma hareketinin işlenmesi, kullanıcı arabirimini dönüştürmek için biraz matematik gerektirir. Bu matematik yalnızca sarmalanan kullanıcı arabirimi öğesinin sınırları içinde kaydırmak için kullanılır. Aşağıdaki kod örneği sınıfını PanContainer gösterir:

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

Bu sınıf, hareketin sarmalanmış kullanıcı arabirimi öğesini kaydırması için bir kullanıcı arabirimi öğesi etrafında sarmalanabilir. Aşağıdaki XAML kodu örneği, bir Image öğenin sarmalama işlemini PanContainer gösterir:

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

Aşağıdaki kod örneği, bir Image öğenin C# sayfasında nasıl kaydırılır PanContainer gösterir:

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

Her iki örnekte de ve HeightRequest özellikleri, WidthRequest görüntülenen görüntünün genişlik ve yükseklik değerlerine ayarlanır.

Image Öğe bir kaydırma hareketi aldığında, görüntülenen görüntü kaydırılır. Kaydırma, aşağıdaki kod örneğinde gösterilen yöntemiyle PanContainer.OnPanUpdated gerçekleştirilir:

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

Bu yöntem, sarmalanan kullanıcı arabirimi öğesinin görüntülenebilir içeriğini kullanıcının kaydırma hareketlerine göre güncelleştirir. Bu, tava yönünü ve mesafesini hesaplamak için örneğin ve TotalY özelliklerinin PanUpdatedEventArgs değerleri TotalX kullanılarak elde edilir. App.ScreenWidth ve App.ScreenHeight özellikleri görünüm penceresinin yüksekliğini ve genişliğini sağlar ve ilgili platforma özgü projeler tarafından cihazın ekran genişliği ve ekran yüksekliği değerlerine ayarlanır. Sarmalanan kullanıcı öğesi daha sonra ve TranslationY özellikleri hesaplanan değerlere ayarlanarak TranslationX kaydırılır.

Tam ekranı kaplamayan bir öğedeki içeriği kaydırma sırasında, öğenin ve özelliklerinden görünüm penceresinin Height yüksekliği ve Width genişliği elde edilebilir.

Not

Yüksek çözünürlüklü görüntülerin görüntülenmesi, bir uygulamanın bellek ayak izini büyük ölçüde artırabilir. Bu nedenle, bunlar yalnızca gerektiğinde oluşturulmalı ve uygulama artık bunları gerektirmediği anda serbest bırakılmalıdır. Daha fazla bilgi için bkz . Görüntü Kaynaklarını İyileştirme.