ios - UITableView 自定义插入操作按钮 onSwipe

Question

我能够使 UITableViewCell 可滑动以显示 UIButton 以适应 Ray Wenderlich 的演练 here .

我们的目标是在 contentView 的所有侧面插入 onPanLeft 它将从右侧拉入一个具有类似顶部/底部插入的 uiButton .

我已经能够实现它，但是我很难解决一个问题:

1. 如果我开始向左缓慢拖动，contentView 会快速地向左/右来回移动。

初始 contentView 状态与 20 pt 前导/尾随填充到 UITableViewCell 容器。

以扩展宽度结束 contentView 状态(黄线是蓝色/灰色 subview 应该相遇的地方，蓝色 subview 宽度增加 - 已修复)

以下是我的相关代码供引用:

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
        }
    }
}

Answer 1

您可以像下面这样尝试使用您的图片。

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]
}

它在我的应用中运行良好。