Swipe UITableViewCell without touch
Asked Answered
B

2

16

As my title saying I want to swipe first row of UITableView left to right when user will come on that ViewController.

In my ViewController I have one UITableView, each row have two button "More" and "Delete" action. Look at below code

func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
    return true
}

func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
    if (editingStyle == UITableViewCellEditingStyle.delete) {
    }
}


func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
    let deleteButton = UITableViewRowAction(style: .normal, title: "Delete") { action, index in
        // Edit Button Action
    }
    deleteButton.backgroundColor = UIColor.red

    let editButton = UITableViewRowAction(style: .normal, title: "Edit") { action, index in
        // Delete Button Action
    }
    editButton.backgroundColor = UIColor.lightGray

    return [deleteButton, editButton]
}

All is working good. But I want when end-user comes on this ViewController at first time so they will notify that there is swipe action available so they will perform it.

Question is: How can I do swipe left and right automatically for first row ?

What I have did?

 override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    let cell = posTblView.cellForRow(at: NSIndexPath(row: 0, section: 0) as IndexPath) as! POSUserTabelCell
    UIView.animate(withDuration: 0.3, animations: {
        cell.transform = CGAffineTransform.identity.translatedBy(x: -150, y: 0)
    }) { (finished) in
        UIView.animateKeyframes(withDuration: 0.3, delay: 0.25, options: [], animations: {
            cell.transform = CGAffineTransform.identity
        }, completion: { (finished) in
        })
    }
}

By above code swipe/moving cell is working but not display "Delete" and "More" button.

So please guide me on right direction.

Biggin answered 15/8, 2017 at 9:54 Comment(5)
your approach seems right for swiping left and right. However, i am not sure if the built in buttons could be highlighted like that. What you can do for sure, is to put a UIView looking like the native controls below your content, do the swipe to reveal them, and than remove/hide them from the cell. Check out this answer: #5302228Quirt
You can use this old framework: github.com/CEWendel/SWTableViewCell. Then in viewdidappear write: [cell showRightUtilityButtonsAnimated:YES];Lithographer
So, what are you aiming for is to let the first row do the swipe automatically, so you can see the edit buttons. Is that right?Ascot
@AhmadF - Yes because some time end-use does not know about this features, they can see only listing if we do like that then they can easily understand that some features available on swipe.Biggin
Here is another solution I used: #46881875Paver
U
8

I found one way to achieve it.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    if arrStudent.count > 0 {
        let indexPath = NSIndexPath(row: 0, section: 0)
        let cell = tblStudent.cellForRow(at: indexPath as IndexPath);

        let swipeView = UIView()
        swipeView.frame = CGRect(x: cell!.bounds.size.width, y: 0, width: 170, height: cell!.bounds.size.height)
        swipeView.backgroundColor = .clear

        let swipeEditLabel: UILabel = UILabel.init(frame: CGRect(x: 0, y: 0, width: 80, height: cell!.bounds.size.height))
        swipeEditLabel.text = "Edit";
        swipeEditLabel.textAlignment = .center
        swipeEditLabel.font = UIFont.systemFont(ofSize: 19)
        swipeEditLabel.backgroundColor = UIColor(red: 180/255, green: 180/255, blue: 180/255, alpha: 1) // Light Gray: Change color as you want
        swipeEditLabel.textColor = UIColor.white
        swipeView.addSubview(swipeEditLabel)

        let swipeDeleteLabel: UILabel = UILabel.init(frame: CGRect(x: swipeEditLabel.frame.size.width, y: 0, width: 90, height: cell!.bounds.size.height))
        swipeDeleteLabel.text = "Delete";
        swipeDeleteLabel.textAlignment = .center
        swipeDeleteLabel.font = UIFont.systemFont(ofSize: 19)
        swipeDeleteLabel.backgroundColor = UIColor(red: 255/255, green: 41/255, blue: 53/255, alpha: 1) // Red color: Change color as you want
        swipeDeleteLabel.textColor = UIColor.white
        swipeView.addSubview(swipeDeleteLabel)

        cell!.addSubview(swipeView)

        UIView.animate(withDuration: 0.60, animations: {
            cell!.frame = CGRect(x: cell!.frame.origin.x - 170, y: cell!.frame.origin.y, width: cell!.bounds.size.width + 170, height: cell!.bounds.size.height)
        }) { (finished) in
            UIView.animate(withDuration: 0.60, animations: {
                cell!.frame = CGRect(x: cell!.frame.origin.x + 170, y: cell!.frame.origin.y, width: cell!.bounds.size.width - 170, height: cell!.bounds.size.height)

            }, completion: { (finished) in
                for subview in swipeView.subviews {
                    subview.removeFromSuperview()
                }
                swipeView.removeFromSuperview()
            })

        }
    }
}

Add custom UIView at end of cell and remove it after animation is done.

  • You can set custom view's frame as you want
  • Add label(s) with background color and title as you want.

Here you should write code for not every time call this code in viewDidAppear it should be call once for only user indication.

Unamerican answered 7/9, 2017 at 12:1 Comment(4)
I will try your logic hope it will be help me.Biggin
Thanks you so much :) I tried and working perfect as I want. Thanks agin men.Biggin
@Biggin glad to help you :)Unamerican
Good example! but don't forget the set the animation on the main thread to ensure that it will work correctly.Isopleth
C
0

Transforming a cell to the left will not make the action button visible.

You need to send that cell into editing mode by calling the setEditing method on the cell, put this in your viewDidAppear:

let cell = posTblView.cellForRow(at: IndexPath(row: 0, section: 0))
cell.setEditing(true, animated: true)
Caballero answered 15/8, 2017 at 10:15 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.