UITableView Custom Inset Action Button onSwipe

Question

I was able to make a UITableViewCell swipable to show a UIButton adapting Ray Wenderlich's walkthrough here.

The goal was an all-side inset contentView where onPanLeft it would pull in from the right a uiButton with similar top/bottom insets.

I have been able to achieve it, however I am having an incredibly difficult time resolving one issue:

If I start dragging left slowly, the contentView rapidly spazzes left/right back-and-forth.

Initial contentView state with 20 pt leading/trailing padding to UITableViewCell Container.

End contentView state with expanded width (yellow line is where blue/gray subViews should've met, blue subView width increased - FIXED)

The following is my relevant code for reference:

var panStartPoint = CGPoint.zero
var startingRightLayoutConstraintConstant: CGFloat = 20

let kBounceValue: CGFloat = 20.0

func buttonTotalWidth() -> CGFloat {
    return deleteButton.frame.width
}

func updateConstraintsIfNeeded(_ animated: Bool, completion: @escaping (_ finished: Bool) -> Void) {
    var duration: Float = 0
    if animated {
        duration = 0.1
    }

    UIView.animate(withDuration: TimeInterval(duration), delay: 0, options: .curveEaseOut, animations: {
        self.layoutIfNeeded()
    }, completion: completion)
}

@objc func panThisCell(_ sender: UIPanGestureRecognizer) {

    if let cell = sender.view?.superview?.superview as? PostTableViewCell {
        switch sender.state {
        case .began:

            cell.panStartPoint = sender.translation(in: cell.myContentView)
            cell.startingRightLayoutConstraintConstant = cell.contentViewRightConstraint.constant
            break
        case .changed:
            let currentPoint: CGPoint = sender.translation(in: cell.myContentView)
            let deltaX: CGFloat = currentPoint.x - cell.panStartPoint.x
            var panningLeft = false

            if (currentPoint.x < cell.panStartPoint.x) { panningLeft = true }

            if (cell.startingRightLayoutConstraintConstant == 20) {
                if (!panningLeft) {
                    let constant: CGFloat = max(-deltaX, 20)

                    if (constant == 20) {
                        resetConstraintContstants(cell, toZero: true, notifyDelegateDidClose: true)
                    } else {
                        cell.contentViewLeftConstraint.constant = 20 - constant
                        cell.contentViewRightConstraint.constant = 20 + constant
                    }
                } else {
                    let constant: CGFloat = min(-deltaX, cell.buttonTotalWidth())
                    if (constant == cell.buttonTotalWidth()) {
                        setConstraintsToShowAllButtons(cell, true, notifyDelegateDidOpen: true)
                    } else {
                        cell.contentViewLeftConstraint.constant = 20 - constant
                        cell.contentViewRightConstraint.constant = 20 + constant
                    }
                }
            } else {
                let adjustment: CGFloat = cell.startingRightLayoutConstraintConstant - deltaX
                if (!panningLeft) {
                    let constant: CGFloat = max(adjustment, 20)
                    if (constant == 20) {
                        resetConstraintContstants(cell, toZero: true, notifyDelegateDidClose: true)
                    } else {
                        cell.contentViewLeftConstraint.constant = 20 - constant
                        cell.contentViewRightConstraint.constant = 20 + constant
                    }
                } else {
                    let constant: CGFloat = min(adjustment, cell.buttonTotalWidth())
                    if (constant == cell.buttonTotalWidth()) {
                        setConstraintsToShowAllButtons(cell, true, notifyDelegateDidOpen: true)
                    } else {
                        cell.contentViewLeftConstraint.constant = 20 - constant
                        cell.contentViewRightConstraint.constant = 20 + constant
                    }
                }
            }
        break
        case .ended:
            let halfOfButton: CGFloat = cell.deleteButton.frame.width / 2
                if cell.contentViewRightConstraint.constant >= halfOfButton {


                    setConstraintsToShowAllButtons(cell, true, notifyDelegateDidOpen: true)
                } else {
                    resetConstraintContstants(cell, toZero: true, notifyDelegateDidClose: true)
                }
            break
        case .cancelled:                
            if cell.startingRightLayoutConstraintConstant == 20 {
                resetConstraintContstants(cell, toZero: true, notifyDelegateDidClose: true)
            } else {
                setConstraintsToShowAllButtons(cell, true, notifyDelegateDidOpen: true)
            }
            break
        default:
            break
        }
    }
}

func setConstraintsToShowAllButtons(_ cell: PostTableViewCell, _ animated: Bool, notifyDelegateDidOpen notifyDelegate: Bool) {
    if cell.startingRightLayoutConstraintConstant == 20 + cell.buttonTotalWidth() && cell.contentViewRightConstraint.constant == 20 + cell.buttonTotalWidth() {
        return
    }
    cell.contentViewLeftConstraint.constant = 20 - cell.buttonTotalWidth() - cell.kBounceValue
    cell.contentViewRightConstraint.constant = 20 + cell.buttonTotalWidth() + cell.kBounceValue
    cell.deleteButtonTrailingConstraint.constant = cell.kBounceValue

    cell.updateConstraintsIfNeeded(animated) { finished in

        cell.contentViewLeftConstraint.constant = 20 - cell.buttonTotalWidth()
        cell.contentViewRightConstraint.constant = 20 + cell.buttonTotalWidth()
        cell.deleteButtonTrailingConstraint.constant = 0

        cell.updateConstraintsIfNeeded(animated) { finished in

            cell.startingRightLayoutConstraintConstant = cell.contentViewRightConstraint.constant
        }
    }
}

func resetConstraintContstants(_ cell: PostTableViewCell,toZero animated: Bool, notifyDelegateDidClose notifyDelegate: Bool) {
    if cell.startingRightLayoutConstraintConstant == 20 && cell.contentViewRightConstraint.constant == 20 {
        //Already all the way closed, no bounce necessary
        return
    }

    cell.contentViewRightConstraint.constant = 20 - cell.kBounceValue
    cell.contentViewLeftConstraint.constant = 20 + cell.kBounceValue
    cell.deleteButtonTrailingConstraint.constant = -cell.deleteButton.frame.width - cell.kBounceValue

    cell.updateConstraintsIfNeeded(animated) { finished in
        cell.contentViewRightConstraint.constant = 20
        cell.contentViewLeftConstraint.constant = 20
        cell.deleteButtonTrailingConstraint.constant = -cell.deleteButton.frame.width

        cell.updateConstraintsIfNeeded(animated) { finished in
            cell.startingRightLayoutConstraintConstant = cell.contentViewRightConstraint.constant
        }
    }
}

Virani Vivek Virani Vivek · Accepted Answer · 2018-09-21T08:57:57

You can try like below with your image.

override func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [AnyObject]? {

    let moreClosure = { (action: UITableViewRowAction!, indexPath: NSIndexPath!) -> Void in
        println("More closure called")
    }

    let moreAction = UITableViewRowAction(style: .Normal, title: "  ", handler: moreClosure)

    if let image = UIImage(named: "image.png"){
        moreAction.backgroundColor = UIColor(patternImage: image)

    }
    return [moreAction]
}

It working fine in my app.

UITableView Custom Inset Action Button onSwipe

2 Answers