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.

Johnty
  • 195
  • 1
  • 11
  • 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: https://stackoverflow.com/questions/5301728/is-it-possible-to-programmatically-show-the-red-delete-button-on-a-uitableviewce – dirtydanee Aug 15 '17 at 10:54
  • You can use this old framework: https://github.com/CEWendel/SWTableViewCell. Then in viewdidappear write: [cell showRightUtilityButtonsAnimated:YES]; – Pranav Kasetti Aug 15 '17 at 13:36
  • 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? – Ahmad F Sep 07 '17 at 14:51
  • @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. – Johnty Sep 08 '17 at 08:20
  • Here is another solution I used: https://stackoverflow.com/questions/46881375/how-to-move-uitableviewcell-back-and-forth-to-show-it-can-be-swiped/54989879#54989879 – Mark Moeykens Mar 04 '19 at 19:04

2 Answers2

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.

Govaadiyo
  • 5,644
  • 9
  • 43
  • 72
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)
Swifty
  • 3,730
  • 1
  • 18
  • 23