无需触摸即可滑动 UITableViewCell

Posted 2023-02-27

【中文标题】无需触摸即可滑动 UITableViewCell

【英文标题】：Swipe UITableViewCell without touch

【发布时间】：2017-08-15 09:54:07

【问题描述】：

正如我的标题所说，当用户访问 ViewController 时，我想从左到右滑动 UITableView 的第一行。

在我的ViewController 我有一个UITableView，每一行都有两个按钮“更多”和“删除”操作。看下面的代码

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]

一切正常。但我想当最终用户第一次访问此ViewController 时，他们会通知有可用的滑动操作，以便他们执行。

问题是：第一行如何自动左右滑动？

我做了什么？

 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
        )
    

通过上面的代码滑动/移动单元格正在工作，但不显示“删除”和“更多”按钮。

所以请指导我正确的方向。

【问题讨论】：

您的方法似乎适合左右滑动。但是，我不确定是否可以像这样突出显示内置按钮。您可以确定的是，在您的内容下方放置一个看起来像本机控件的UIView，滑动以显示它们，然后从单元格中删除/隐藏它们。看看这个答案：***.com/questions/5301728/…

你可以使用这个旧框架：github.com/CEWendel/SWTableViewCell。然后在 viewdidappear 中写：[cell showRightUtilityButtonsAnimated:YES];

所以，你的目标是让第一行自动滑动，这样你就可以看到编辑按钮。对吗？

@AhmadF - 是的，因为有些时候最终用户不知道此功能，如果我们这样做，他们只能看到列表，然后他们可以很容易地了解某些功能在滑动时可用。

这是我使用的另一个解决方案：***.com/questions/46881375/…

【参考方案1】：

我找到了一种方法来实现它。

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()
            )

        
    

在单元格末尾添加自定义UIView，并在动画完成后将其删除。

您可以根据需要设置自定义视图的框架 根据需要添加带有背景颜色和标题的标签。

在这里您应该编写代码，而不是每次在viewDidAppear 中调用此代码，它应该只为用户指示调用一次。

【讨论】：

我会试试你的逻辑，希望对我有帮助。

非常感谢 :) 我尝试过并且工作得如我所愿。谢谢各位。

@Johnty 很高兴为您提供帮助 :)

好例子！但不要忘记在主线程上设置动画以确保它可以正常工作。

【参考方案2】：

将单元格向左移动不会使操作按钮可见。

您需要通过调用单元格上的setEditing 方法将该单元格发送到编辑模式，将其放入您的viewDidAppear：

let cell = posTblView.cellForRow(at: IndexPath(row: 0, section: 0))
cell.setEditing(true, animated: true)