Sometimes table views needs to quick actions use without any custom buttons. There is one easy way which create swipe buttons on table view cells. Let’s learn how you can implement these buttons on swipe and know about interesting hidden feature you can use it quickly.
Create a UISwipeActionsConfiguration object to associate custom swipe actions with a row/cell of your table view. Users swipe horizontally left or right in a table view to reveal the actions associated with a row. Each swipe-actions object contains the set of actions like edit & delete to display for each type of swipe.
In this tutorial, You can learn how to adding swipe actions to a tableView.
Declare tableview and String Array:
@IBOutlet weak var tableView: UITableView!
var itemList = ["Desserts", "Drink", "Pasta", "Salad", "Wraps"] // for row title
Add UITableView in Main.StoryBoard and build connection and create delegation in func viewDidLoad()
self.tableView.dataSource = self
self.tableView.delegate = selfAdd UITableviewCell class and connect UILabel with storyboard.
class ListViewClass: UITableViewCell {
@IBOutlet weak var titleLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
Configuration of UITableview:
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return itemList.count
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
{
return 100.0//Choose your custom row height
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "tbCell", for: indexPath) as! ListViewClass
cell.titleLabel.text = "\(itemList[indexPath.row])"
cell.cellView.layer.cornerRadius = 6
cell.cellView.layer.masksToBounds = false
// animation of cell
cell.transform = CGAffineTransform(rotationAngle: 360)
UIView.animate(withDuration: 0.8, delay: 0.05 * Double(indexPath.row), animations: {
cell.transform = CGAffineTransform(rotationAngle: 0.0)
})
return cell
}
func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
return true
}
Create trailingSwipeActionsConfigurationForRowAt function:
func tableView(_ tableView: UITableView,
trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?
{
}Add UIContextualAction in this function as per your requirement, you can add action with name or action’s icon. Here i’m using icons for better looks. Delete & Edit actions on swipe:
let TrashAction = UIContextualAction(style: .normal, title: "", handler: { [self] (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
itemList.remove(at: indexPath.row)
tableView.deleteRows(at: [indexPath], with: .fade)
self.tableView.reloadData()
success(true)
})
TrashAction.image = UIImage(systemName: "trash")
TrashAction.image?.withTintColor(UIColor(red: 48/255, green: 194/255, blue: 208/255, alpha: 1.0))
TrashAction.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)
let EditAction = UIContextualAction(style: .normal, title: "", handler: { [self] (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
// AlertView with Textfield for enter text
let alert = UIAlertController(title: "Want to Edit Item?",message: "",preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "NO", style: UIAlertAction.Style.default, handler: {
(alertAction: UIAlertAction!) in
alert.dismiss(animated: true, completion: nil)
}))
alert.addTextField { (textField) in
textField.text = "\(itemList[indexPath.row])"
}
alert.addAction(UIAlertAction(title: "YES", style: UIAlertAction.Style.default, handler: {
(alertAction: UIAlertAction!) in
let textField = alert.textFields![0] // Force unwrapping because we know it exists.
if let i = itemList.firstIndex(of: "\(itemList[indexPath.row])") {
itemList[i] = textField.text!
}
self.tableView.reloadData() // reload your tableview here
}))
alert.view.tintColor = UIColor.black // change text color of the buttons
alert.view.layer.cornerRadius = 25 // change corner radius
present(alert, animated: true, completion: nil)
success(true)
})
EditAction.image = UIImage(systemName: "square.and.pencil")
EditAction.image?.withTintColor(UIColor(red: 80/255, green: 191/255, blue: 156/255, alpha: 1.0))
EditAction.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)
And at last return UISwipeActionsConfiguration with above 2 actions:
return UISwipeActionsConfiguration(actions: [TrashAction,EditAction])That’s it your swipe action is done!!! Hope this article helpful for you...
