Swipe Table Cell To Perform RowAction In TableView In Xamarin.iOS

Introduction

In this article, we will learn how to create an iOS application using Xamarin. We will learn how to add and work with a table view and its row swipe action. We will have a table of contents and we will swipe the row to the left to perform an action. 

Prerequisite

1. Basic knowledge of C# and programming.
2. Knowledge of Xamarin.

This article will cover the following.

1. Xamarin iOS application.
2. Table View in the application.
3. TableViewDelegate for performing TableViewAction.

Implementation

Open Visual Studio Community Edition.

 

Select the single view app and click "Next".

Give the app a name and click "Next".

 

Give project and solution names and create the application.

Open Main.storyboard and add the Table View to your controller.

Open toolbox pad and search for tableview and drag the View to your controller.

 

Resize it and set the name property to “CarsTable”.

Add two class files to your solution.

1. CarSource.cs
   

   using System;
   using System.Collections.Generic;
   using Foundation;
   using UIKit;
   
   namespace SwipeTable {
       public class CarSource : UITableViewSource {
           List<String> cars;
           public CarSource(List<String> source) {
               this.cars = source;
           }
   
           public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) {
               var cell = new UITableViewCell(UITableViewCellStyle.Default, "");
               cell.TextLabel.Text = cars[indexPath.Row];
               return cell;
           }
   
           public override nint RowsInSection(UITableView tableview, nint section) {
               return cars.Count;
           }
       }
   }

2. CarDelegate.cs
   

   using System;
   using UIKit;
   
   namespace SwipeTable {
       public class CarsDelegate : UITableViewDelegate {
           public override UITableViewRowAction[] EditActionsForRow(UITableView tableView, Foundation.NSIndexPath indexer) {
               var action = UITableViewRowAction.Create(
                   UITableViewRowActionStyle.Default, "Like", (arg1, arg2) => {
                       var cell = tableView.CellAt(arg2);
                       cell.TextLabel.Text += " ( Liked )";
                   }
               );
               return new UITableViewRowAction[] { action };
           }
       }
   }

Open ViewController.cs and add the below contents.

using System;
using System.Collections.Generic;
using Foundation;
using UIKit;

namespace SwipeTable
{
    public partial class ViewController : UIViewController
    {
        protected ViewController(IntPtr handle) : base(handle)
        {
            // Note: this .ctor should not contain any initialization logic.
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            var cars = new List<String>
            {
                "Mercedes", "BMW", "Porsche", "Ferrari", "Lamborghini", "Mazerati", "Jaguar", "Lexus", "Toyota","Ford", "Audi"
            };
            CarsTable.Source = new CarSource(cars);
            CarsTable.Delegate = new CarsDelegate();
        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
            // Release any cached data, images, etc that aren't in use.
        }
    }
}

Your solution directory structure will be as shown below.

 

Build and run the application.

You will have the table view with the given strings of contents as cars.

 

Now, swipe left any cell content (suppose we swipe the element BMW).

 

Now, click on Like button.

 

You can see the element has been liked.

Now, click anywhere on the screen and you can see the Table View with its data.

Note

We are creating the table source in class file  CarSource.cs and assigning it to the added table view in our viewController named CarsTable.

Then for adding the functionalities like the ability to manage selections, configure section headers and footers, delete and reorder cells of the table source you require UITableViewDeimglelgate to provide behavior along with the data that is getting from UITableViewSource.

Implementing UITableView often requires both the subclasses. So, in this way, you can achieve the Table View with data with attached behavior as called swipe of the cell in this demo which is possible by overriding the method EditActionsForRow and creating the UITableViewRowAction.Create an event that is the static method under the class UITableViewRowAction.