iOS Tutorial Add Swipe Actions
A swipe gesture occurs when the user moves one or more fingers across the screen in a specific horizontal or vertical direction. In our TaskList application we want to add a custom action to each row so we can swipe right to left, have a button appear, and choose the action to complete that task.
To mark a task completed or not completed, we have a simple struct to hold a task definition in a separate swift file.
import Foundation enum TaskType { case daily, weekly, monthly } struct Task { var name : String var type : TaskType var completed : Bool var lastCompleted : NSDate? }
In view controller, we have three arrays of tasks for daily, weekly and monthly tasks.
var dailyTasks = [ Task(name: "daily task 1", type: .daily, completed: false, lastCompleted: nil), Task(name: "daily task 2", type: .daily, completed: false, lastCompleted: nil), Task(name: "daily task 3", type: .daily, completed: false, lastCompleted: nil), Task(name: "daily task 4", type: .daily, completed: false, lastCompleted: nil), Task(name: "daily task 5", type: .daily, completed: false, lastCompleted: nil), Task(name: "daily task 6", type: .daily, completed: false, lastCompleted: nil), Task(name: "daily task 7", type: .daily, completed: false, lastCompleted: nil) ] var weeklyTasks = [ Task(name: "weekly task 1", type: .weekly, completed: false, lastCompleted: nil ), Task(name: "weekly task 2", type: .weekly, completed: false, lastCompleted: nil ), Task(name: "weekly task 3", type: .weekly, completed: false, lastCompleted: nil ) ] var monthlyTasks = [ Task(name:"monthly task 1", type: .monthly, completed: false, lastCompleted: nil ), Task(name:"monthly task 2", type: .monthly, completed: false, lastCompleted: nil ), Task(name:"monthly task 3", type: .monthly, completed: false, lastCompleted: nil ) ]
In the cellForRowAt indexPath, for the table view, instead of just having a string instance we will have now a task instance.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell()
// to hold the current task
var currentTask: Task!
switch indexPath.section {
case 0:
currentTask = dailyTasks[indexPath.row]
case 1:
currentTask = weeklyTasks[indexPath.row]
case 2:
currentTask = monthlyTasks[indexPath.row]
default:
break
}
// use the name property to set the value of the cell.
cell.textLabel!.text = currentTask.name
if currentTask.completed {
cell.textLabel?.textColor = UIColor.lightGray
cell.accessoryType = .checkmark
} else {
cell.textLabel?.textColor = UIColor.black
cell.accessoryType = .none
}
// clear out the background
cell.backgroundColor = UIColor.clear
return cell
}
We have also added some additional functionality; if the task is completed, then it should look different in the table view.
You can handle swipe actions in UITableView using the following two methods.
- LeadingSwipeActions
- TrailingSwipeActions
The leading swipe is from the left to the right, and the trailing Swipe is from the right to the left, and these methods were introduced as a part of UITableViewDelegate. Here we need to implement a trailingSwipeActions method.
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
let completeAction = UIContextualAction(style: .normal, title: "Complete") { (action:UIContextualAction, sourceView:UIView, actionPerformed:(Bool) -> Void) in
// find the right object and set it to completed
switch indexPath.section {
case 0:
self.dailyTasks[indexPath.row].completed = true
case 1:
self.weeklyTasks[indexPath.row].completed = true
case 2:
self.monthlyTasks[indexPath.row].completed = true
default:
break
}
tableView.reloadData()
actionPerformed(true)
}
return UISwipeActionsConfiguration(actions: [completeAction])
}
This method will be called automatically when user swipe from right to left on any task. Let's run your application.
Tap the Complete option on the right side, and it will be marked as completed.
