2015-04-30 65 views
3

在Xamarin.Forms中,我希望能够左右滑动浏览图片列表。目前我只想在每次检测到滑动时都能触发一个事件。在渲染器中使用Xamarin UISwipeGestureRecognizer渲染器

子类:

public class LRMasterDetailPage : ContentView 
{ 
} 

我有一个使用LRM类这样的ContentPage:

public class ImagePage : ContentPage 
    { 

    public ImagePage(Photo photo) 
     { 
      _image = new WebImage 
       { 
        Url = photo.Url, 
        Placeholder = "placeHolder2.png" 
       }; 

      var imageView = new LRMasterDetailPage { 
       Content = _image 
      }; 

      this.Content = imageView; 
      } 
     } 

这是我的渲染:

[assembly:ExportRenderer (typeof(LRMasterDetailPage), typeof(LRMDPRenderer))] 
namespace Project.iOS 
{ 
    public class LRMDPRenderer : ViewRenderer<LRMasterDetailPage,UIView> 
    { 
     UISwipeGestureRecognizer swipe; 

     protected override void OnElementChanged (ElementChangedEventArgs<LRMasterDetailPage> e) 
     { 
      base.OnElementChanged (e); 
      // Do someting else, init for example 
      swipe = new UISwipeGestureRecognizer(); 
      this.AddGestureRecognizer (swipe); 

      if (swipe.Direction == UISwipeGestureRecognizerDirection.Left) 
      { 
       UpdateLeft(); 
      } 

      if (swipe.Direction == UISwipeGestureRecognizerDirection.Right) 
      { 
       UpdateRight(); 
      } 
     } 

     protected override void OnElementPropertyChanged (object sender, System.ComponentModel.PropertyChangedEventArgs e) 
     { 
      if (e.PropertyName == "Renderer") 
       return; 
      base.OnElementPropertyChanged (sender, e); 

     } 

     private void UpdateLeft(){ 
      // Insert view of DetailLeft element into subview 
      // Add button to open Detail to parent navbar, if not yet there 
      // Add gesture recognizer for left swipe 
      Console.WriteLine ("Left swipe"); 

     } 
     private void UpdateRight(){ 
      // same as for left, but flipped 
      Console.WriteLine ("Right swipe"); 

     } 
    } 
} 

当ContentPage显示时,向右滑动事件被激活,但是当我尝试在顶部滑动时没有任何反应图片。我猜测我对渲染器的逻辑错误?

回答

4

经过很多痛苦和搜索网络后,我找到了解决方案。

你需要做的很简单:在渲染器中声明并添加手势。确保你通过声明他们的方向来为左右各创建一个滑动手势。从那里使用lambda来调用您想要为特定轻扫而激活的功能:

滑动手势的占位符类。

public class LRMasterDetailPage : ContentView 
    { 

    } 

图像页面,当时

public class ImagePage : ContentPage 
{ 

    //view holding the image 
    LRMasterDetailPage imageView; 

    //collection of images using the photo.Url 
    ObservableCollection<Image> images; 

    //current image index 
    int index = 0; 

public ImagePage(){ 

     images = new ObservableCollection<Image>(); 
     imageView = new LRMasterDetailPage { 
      Content = this.images [index] 
     }; 

     this.Content = imageView; 
} 

//Subscribe to the swipeLeft and swipeRight message 
    protected override void OnAppearing() 
    { 
     base.OnAppearing(); 

     MessagingCenter.Subscribe <string> (this,"LeftSwipe", (sender) => { 

      //Do something 
      if(index < images.Count-1){ 
       index++; 
      } 

      imageView.Content = this.images[index]; 


     }); 
     MessagingCenter.Subscribe <string> (this, "RightSwipe", (sender) => { 

      //Do something 
      if(index > 0){ 
       index--; 
      } 

      imageView.Content = this.images[index]; 


     }); 
    } 

    protected override void OnDisappearing() 
    { 
     base.OnDisappearing(); 

     //this._image = null; 

     images = null; 

     MessagingCenter.Unsubscribe<string>(this,"LeftSwipe"); 
     MessagingCenter.Unsubscribe<string>(this, "RightSwipe"); 
     MessagingCenter.Unsubscribe<string>(this, "LongPress"); 

     //GC.Collect(); 
    } 

} 

渲染LRMasterDetailPage

[assembly:ExportRenderer (typeof(LRMasterDetailPage), typeof(LRMDPRenderer))] 
namespace Manager.iOS 
{ 
    public class LRMDPRenderer : ViewRenderer<LRMasterDetailPage,UIView> 
    { 

     UILongPressGestureRecognizer longPressGestureRecognizer; 
     UIPinchGestureRecognizer pinchGestureRecognizer; 
     //UIPanGestureRecognizer panGestureRecognizer; 
     UISwipeGestureRecognizer swipeRightGestureRecognizer; 
     UISwipeGestureRecognizer swipeLeftGestureRecognizer; 
     UIRotationGestureRecognizer rotationGestureRecognizer; 

     protected override void OnElementChanged (ElementChangedEventArgs<LRMasterDetailPage> e) 
     { 
      base.OnElementChanged (e); 

      longPressGestureRecognizer = new UILongPressGestureRecognizer (() => Console.WriteLine ("Long Press")); 
      pinchGestureRecognizer = new UIPinchGestureRecognizer (() => Console.WriteLine ("Pinch")); 
      //panGestureRecognizer = new UIPanGestureRecognizer (() => Console.WriteLine ("Pan")); 

      swipeRightGestureRecognizer = new UISwipeGestureRecognizer (() => UpdateRight()){Direction = UISwipeGestureRecognizerDirection.Right}; 
      swipeLeftGestureRecognizer = new UISwipeGestureRecognizer (() => UpdateLeft()){Direction = UISwipeGestureRecognizerDirection.Left}; 
      rotationGestureRecognizer = new UIRotationGestureRecognizer (() => Console.WriteLine ("Rotation")); 

      if (e.NewElement == null) { 
       if (longPressGestureRecognizer != null) { 
        this.RemoveGestureRecognizer (longPressGestureRecognizer); 
       } 
       if (pinchGestureRecognizer != null) { 
        this.RemoveGestureRecognizer (pinchGestureRecognizer); 
       } 

       /* 
       if (panGestureRecognizer != null) { 
        this.RemoveGestureRecognizer (panGestureRecognizer); 
       } 
       */ 

       if (swipeRightGestureRecognizer != null) { 
        this.RemoveGestureRecognizer (swipeRightGestureRecognizer); 
       } 
       if (swipeLeftGestureRecognizer != null) { 
        this.RemoveGestureRecognizer (swipeLeftGestureRecognizer); 
       } 

       if (rotationGestureRecognizer != null) { 
        this.RemoveGestureRecognizer (rotationGestureRecognizer); 
       } 
      } 

      if (e.OldElement == null) { 
       this.AddGestureRecognizer (longPressGestureRecognizer); 
       this.AddGestureRecognizer (pinchGestureRecognizer); 
       //this.AddGestureRecognizer (panGestureRecognizer); 
       this.AddGestureRecognizer (swipeRightGestureRecognizer); 
       this.AddGestureRecognizer (swipeLeftGestureRecognizer); 
       this.AddGestureRecognizer (rotationGestureRecognizer); 
      } 
     } 

     private void UpdateLeft(){ 
      MessagingCenter.Send ("Swiped to the left", "LeftSwipe"); 

     } 
     private void UpdateRight(){ 
      // same as for left, but flipped 
      MessagingCenter.Send ("Swiped to the Right", "RightSwipe"); 

     } 
    } 
} 
+0

拥有一个像你有没有得到完成布线了UpdateLeft和UpdateRight功能?看看你是如何从这里更新视图会非常有帮助:) @ScarletMerlin –

+0

我将编辑答案在几分钟内显示完整的代码。我所做的只是发送一条消息,说更新右/左。 – ScarletMerlin

+0

非常感谢! –