UITableView自定义插入操作按钮onSwipe

时间:2018-09-21 07:29:38

标签: ios swift uitableview uipangesturerecognizer

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

目标是全方位插入contentView,其中onPanLeft将从右侧插入uiButton,具有相似的顶部/底部插入。

我已经能够实现它,但是解决一个问题却非常困难:

  1. 如果我开始缓慢向左拖动,则contentView会左右快速闪烁。

初始ContentView状态,带有20 pt领先/尾随填充到UITableViewCell容器。

以扩展的宽度结束contentView状态(黄线是应满足蓝色/灰色子视图的位置,蓝色子视图的宽度增加-固定)

以下是我的相关代码供参考:

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

2 个答案:

答案 0 :(得分: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]
}

在我的应用程序中运行正常。

答案 1 :(得分:0)

几年前,我写了这个问题中引用的原始教程,iOS 7发布不久。

老实说,我真的建议您现在使用tableView(_:editActionsForRowAt:)tableView(_:trailingSwipeActionsConfigurationForRowAt:) UITableViewDelegate方法。他们得到了官方的支持,并且方法比我在这里尝试的更简单。

第一个是iOS 8及更高版本,第二个是iOS 11及更高版本。我还怀疑自编写该教程以来,他们可能已经更改了该单元的某些基础体系结构。