UISwipeActionsConfiguration with awesome Animation

 
Maniisha Gorasiya

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 = self

Add 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...




Comments

No Comment

Leave a Comment

Your email address will not be published.



First Floor, Madhav Complex, V. R. Nagar, Mirjapar Madhapar By Pass Ring Road, Bhuj-370001
+(91) 97 26 134340
Mon-Fri 9:00am-6:00pm
talk@lpktechnosoft.com
24 X 7 online support