Xamarin Forms ViewCell Swipe Buttons zeigen

Question

tl; dr: Wie kann ich Swipe verwenden zeigen Tasten in Xamarin Formen wie die iOS-Mail-App

Ich versuche Swipe zu implementieren Tasten zeigen für eine Xamarin iOS Forms App ähnlich der Benutzeroberfläche der iOS-Mail-App oder diese https://components.xamarin.com/view/swtableviewcell. Diese Komponente neben vielen anderen Beispielen, die ich gefunden habe, sieht gut aus für native iOS-Implementierungen, aber ich muss diese Benutzeroberfläche über Xamarin-Formulare anzeigen.

Zur Zeit habe ich eine benutzerdefinierte Swipe Gestenerkenner wie folgt aus:

[assembly: ExportRenderer(typeof(SwipeViewCell), typeof(SwipeIosRenderer))] 

namespace MyApp.iOS.Renderers 
    { 
    public class SwipeIosRenderer : ViewCellRenderer 
     { 


    UISwipeGestureRecognizer swipeRightGestureRecognizer; 
    UISwipeGestureRecognizer swipeLeftGestureRecognizer; 

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


     swipeRightGestureRecognizer = new UISwipeGestureRecognizer(() => UpdateRight()) { Direction = UISwipeGestureRecognizerDirection.Right }; 
     swipeLeftGestureRecognizer = new UISwipeGestureRecognizer(() => UpdateLeft()) { Direction = UISwipeGestureRecognizerDirection.Left }; 

     if (e.NewElement == null) 
     { 

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

     if (e.OldElement == null) 
     { 

      this.AddGestureRecognizer(swipeRightGestureRecognizer); 
      this.AddGestureRecognizer(swipeLeftGestureRecognizer);     
     } 

    } 

    private void UpdateLeft() 
    { 

     Console.WriteLine("Left swipe"); 

    } 
    private void UpdateRight() 
    { 

     Console.WriteLine("Right swipe"); 

    } 
} 

, die auf viewcells in einer Liste gebunden ist. Jetzt, wo ich die "Swipe" -Geste erkennen kann, brauche ich Hilfe, wie ich die Ansichtszelle tatsächlich bewegen kann und einen Knopf wie die Beispiele, die ich oben angegeben habe, zeige.

Es wäre großartig, dies in den Ansichten XAML zu tun, aber offen für alles. Ich habe eine UpdateLeft und UpdateRight-Funktion, die auf den entsprechenden Swipe-Bewegungen auch aufgerufen wird, wenn das verwendet werden kann?

** BEARBEITEN: Ich muss dies für beide linken und rechten Swipe tun. ContextActions stellt nur die linke Swipe-Funktionalität bereit.

Hoffe das macht Sinn!

Answer 1

Würde Context Actions für Sie arbeiten? Ich habe es nicht auf anderen Plattformen versucht, aber auf iOS wird es ein Wischmenü wie die Mail App erstellen. Sie sollten XAML verwenden und auch an Befehlseigenschaften binden können.

Edit: Da Sie stellte klar, dass Sie mit der linken und rechten Seite Swipe Tasten müssen, die in den ContextActions nicht vorhanden sind, können Sie die vorhandene SWTableViewCell Komponente verwenden, die bereits das gewünschte Verhalten hat und Anpassung an Xamarin.Forms .

iOSRenderer:

public class SwipeIosRenderer : TextCellRenderer 
{ 

static NSString rid = new NSString("SWTableViewCell"); 

public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv) 
{ 
    var forms_cell = (SwipeCell)item; 

    SWTableViewCell native_cell = reusableCell as SWTableViewCell; 
    if (native_cell == null) 
    { 
     native_cell = new SWTableViewCell(UITableViewCellStyle.Default, rid); 

     if (forms_cell != null) 
     { 
      var cellDelegate = new CellDelegate(forms_cell); 
      native_cell.Delegate = cellDelegate; 

      if (forms_cell.LeftContextActions != null) 
      { 
       var left = new NSMutableArray(); 
       foreach (var btn in forms_cell.LeftContextActions) 
       { 
        AddButton(left, btn); 
       } 
       native_cell.LeftUtilityButtons = NSArray.FromArray<UIButton>(left); 
      } 

      if (forms_cell.RightContextActions != null) 
      { 
       var right = new NSMutableArray(); 
       foreach (var btn in forms_cell.RightContextActions) 
       { 
        AddButton(right, btn); 
       } 
       native_cell.RightUtilityButtons = NSArray.FromArray<UIButton>(right); 
       } 
      } 
      native_cell.TextLabel.Text = forms_cell.Text; 
    } 
    var fs = forms_cell.ImageSource as FileImageSource; 
    if (fs != null) 
    { 
     native_cell.ImageView.Image = UIImage.FromBundle(fs.File); 
    } 
    return native_cell; 
} 
void AddButton(NSMutableArray array,Button btn){ 
    if (!String.IsNullOrEmpty(btn.Image?.File)) 
    { 
     array.AddUtilityButton(btn.BorderColor.ToUIColor(), UIImage.FromBundle(btn.Image.File)); 
    } 
    else 
    { 
     array.AddUtilityButton(btn.BorderColor.ToUIColor(), btn.Text); 
    } 
} 

public class CellDelegate : SWTableViewCellDelegate 
{ 
    SwipeCell forms_cell; 

    public CellDelegate(SwipeCell forms_cell) 
    { 
     this.forms_cell = forms_cell; 
    } 

    public override void DidTriggerLeftUtilityButton(SWTableViewCell cell, nint index) 
    { 
     if (forms_cell.LeftContextActions.Count > index) 
     { 
      var c = forms_cell.LeftContextActions[(int)index]; 
      var cmd = c.Command; 
      if (cmd != null) 
      { 
       cmd.Execute(c.CommandParameter); 
      } 
     } 
    } 

    public override void DidTriggerRightUtilityButton(SWTableViewCell cell, nint index) 
    { 
     if (forms_cell.RightContextActions.Count > index) 
     { 
      var c = forms_cell.RightContextActions[(int)index]; 
      var cmd = c.Command; 
      if (cmd != null) 
      { 
       cmd.Execute(c.CommandParameter); 
      } 
     } 
    } 
} 

Beispiel XAML:

<ListView x:Name="SwipeList"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 

      <test:SwipeCell Text="{Binding Data}" ImageSource="{Binding Image}"> 
        <test:SwipeViewCell.LeftContextActions> 
         <Button Text="L1" Command="{Binding LeftAction}" BorderColor="Aqua"/> 
         <Button Command="{Binding LeftAction2}" BorderColor="Gray" Image="xamarin.png"/> 
        </test:SwipeViewCell.LeftContextActions> 
        <test:SwipeViewCell.RightContextActions> 
         <Button Text="R1" Command="{Binding RightAction}" BorderColor="Blue" /> 
         <Button Text="R2" Command="{Binding RightAction2}" BorderColor="Purple" /> 
        </test:SwipeViewCell.RightContextActions> 
       </test:SwipeViewCell> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 

Beispielcode Hinter

public class MyListItem 
{ 
    Page page; 
    public MyListItem(Page page) 
    { 
     this.page = page; 
     this.LeftAction= new Command(() => this.page.DisplayAlert("Left 1", this.Data, "OK")); 
     this.LeftAction2= new Command(() => this.page.DisplayAlert("Left 2", this.Data, "OK")); 
     this.RightAction= new Command(() => this.page.DisplayAlert("Right 1", this.Data, "OK")); 
     this.RightAction2= new Command(() => this.page.DisplayAlert("Right 2", this.Data, "OK")); 
    } 
    public string Image{ get; set; } 
    string data; 
    public string Data 
    { 
     get 
     { 
      return data; 
     } 
     set 
     { 
      data = value; 
     } 
    } 
    ICommand leftAction; 
    public ICommand LeftAction 
    { 
     get 
     { 
      return leftAction; 
     } 
     set 
     { 
      leftAction = value; 
     } 
    } 
    ICommand leftAction2; 
    public ICommand LeftAction2 
    { 
     get 
     { 
      return leftAction2; 
     } 
     set 
     { 
      leftAction2 = value; 
     } 
    } 
    ICommand rightAction; 
    public ICommand RightAction 
    { 
     get 
     { 
      return rightAction; 
     } 
     set 
     { 
      rightAction = value; 
     } 
    } 
    ICommand rightAction2; 
    public ICommand RightAction2 
    { 
     get 
     { 
      return rightAction2; 
     } 
     set 
     { 
      rightAction2 = value; 
     } 
    } 
    public override string ToString() 
    { 
     return this.Data; 
    } 
    } 
    public TestPage() 
    { 
     InitializeComponent(); 
     this.SwipeList.ItemsSource = new List<MyListItem>(){ 
      new MyListItem(this){Data="A"}, 
      new MyListItem(this){Data="B", Image="xamarin.png"}, 
      new MyListItem(this){Data="C"}, 
      new MyListItem(this){Data="D"}, 
     }; 
    }