返回 导航

Swift

hangge.com

Swift - 单元格滑动按钮库SwipeCellKit使用详解3（自动扩展样式）

作者：hangge | 2017-12-27 08:10

四、设置自动扩展样式（Expansion Styles）

在我们滑动单元格的过程中，事件按钮不断地显露出来。当按钮全部显示完毕后，我们其实还是可以继续滑动单元格。而扩展样式就用来描述当单元格滑过预定义的阈值时的行为。

1，自带的几种扩展样式

（1）SwipeCellKit 在 SwipeExpansionStyle 里一共内置了 3 种展开样式。具体效果如下：
  • .none：不扩展，抬起手指则还原。

  • .selection：扩展时自动执行最后一个按钮动作。

  • .destructive：扩展时自动删除当前 cell。

（2）同样通过 editActionsOptionsForRowAt 这个代理方法，我们可以设置扩展样式。这里以 .destructive 样式为例。
         
注意：
内置的 .destructive 扩展样式在调用时会自动执行行删除。而我们的删除行为可能需要与其他行动画（如内部 beginUpdates 和 endUpdates ）进行协调。在这种情况下，需要将 automaticallyDelete参数设置为 false，然后再手动执行删除。
import UIKit
import SwipeCellKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource,
SwipeTableViewCellDelegate{
    
    var tableView:UITableView?
    
    var items = ["这个是条目1","这个是条目2","这个是条目3","这个是条目4",
                 "这个是条目5","这个是条目6","这个是条目7","这个是条目8",]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建表格视图
        self.tableView = UITableView(frame:self.view.frame, style:.plain)
        self.tableView!.delegate = self
        self.tableView!.dataSource = self
        //创建一个重用的单元格
        self.tableView!.register(SwipeTableViewCell.self,
                                 forCellReuseIdentifier: "SwiftCell")
        self.view.addSubview(self.tableView!)
    }
    
    //在本例中，有1个分区
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    //返回表格行数（也就是返回控件数）
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }
    
    //创建各单元显示内容(创建参数indexPath指定的单元）
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)
        -> UITableViewCell {
            //为了提供表格显示性能，已创建完成的单元需重复使用
            let identify:String = "SwiftCell"
            //同一形式的单元格重复使用，在声明时已注册
            let cell = tableView.dequeueReusableCell(
                withIdentifier: identify, for: indexPath) as! SwipeTableViewCell
            cell.delegate = self
            cell.textLabel?.text = items[indexPath.row]
            return cell
    }
    
    //自定义滑动按钮
    func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath,
                   for orientation: SwipeActionsOrientation) -> [SwipeAction]? {
        //分别返回左侧、右侧的按钮
        if orientation == .left {
            //返回左侧事件按钮
            return nil
        } else{
            //创建“旗标”事件按钮
            let favoriteAction = SwipeAction(style: .default, title: "旗标") {
                action, indexPath in
                UIAlertController.showAlert(message: "点击了“旗标”按钮")
            }
            favoriteAction.backgroundColor = .orange
            
            //创建“删除”事件按钮
            let deleteAction = SwipeAction(style: .destructive, title: "删除") {
                action, indexPath in
                //将对应条目的数据删除
                self.items.remove(at: indexPath.row)
                tableView.reloadData()
            }
            
            //返回右侧事件按钮
            return [deleteAction, favoriteAction]
        }
    }
    
    //自定义滑动行为（可选）
    func tableView(_ tableView: UITableView,
                   editActionsOptionsForRowAt indexPath: IndexPath,
                   for orientation: SwipeActionsOrientation) -> SwipeTableOptions {
        var options = SwipeTableOptions()
        options.transitionStyle = .border //变化样式（使用默认的不变）
        options.expansionStyle = .destructive(automaticallyDelete: false) //扩展样式
        return options
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

//扩展UIAlertController
extension UIAlertController {
    //在指定视图控制器上弹出普通消息提示框
    static func showAlert(message: String, in viewController: UIViewController) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "确定", style: .cancel))
        viewController.present(alert, animated: true)
    }
    
    //在根视图控制器上弹出普通消息提示框
    static func showAlert(message: String) {
        if let vc = UIApplication.shared.keyWindow?.rootViewController {
            showAlert(message: message, in: vc)
        }
    }
}

（3）.destructive 扩展样式还有一个注意的地方是：默认当其扩展行为执行时（拖动到一定距离后，或者松手），会立刻执行按钮动作，比如上面样例单元格直接消失。
    我们可以将 timing 属性设置为 .after，待扩展动画完毕后再去执行按钮动作，删除单元格数据。
options.expansionStyle = .destructive(automaticallyDelete: false, timing: .after)

2，自定义扩展样式

（1）我们也可以直接使用 SwipeExpansionStyle 来创建自定义的扩展样式，该类型有如下几个参数属性可以设置：
  • target：相对目标的扩展阈值。当达到这个指定值时，则发生扩展。
  • additionalTriggers：额外的触发器，用于确定是否应该扩展。
  • elasticOverscroll：是否弹性覆盖。指定按钮是否应该扩展到整个过度滚动量（overscroll），还是按比例展开。
  • completionAnimation：指定扩展动画的完成样式。
  • minimumTargetOverscroll：如果配置的目标小于整个完全展示的操作视图，则指定所需的最小过度滚动量（overscroll）。
  • targetOverscrollElasticity：拖过扩展目标时使用的弹性量。
关于这些参数更详细的用法，可以查看官方的说明文档：点击查看。

（2）下面是两种展开样式比较。一种是内置的 destructive 样式，一种是自定义样式。不过它们最终效果是一样的。
//使用内置的 destructive 样式
options.expansionStyle = .destructive(automaticallyDelete: false, timing: .after)

//使用自定义样式
options.expansionStyle = SwipeExpansionStyle(target: .edgeInset(30),
                                        additionalTriggers: [.touchThreshold(0.8)],
                                        elasticOverscroll: false,
                                        completionAnimation: .fill(.manual(timing: .after)))

3，自定义扩展时按钮的行为样式

（1）通过 SwipeTableOptions 的 expansionDelegate 代理（实现 SwipeExpanding 协议），可以实现完全自定义的扩展行为。

（2）我们还可以直接使用 ScaleAndAlphaExpansion 类提供静态 default 配置（不指定的话默认就是这个），其是效果：当发生扩展行为时，多余的按钮会逐个缩小消失。
//自定义滑动过渡行为（可选）
func tableView(_ tableView: UITableView,
        editActionsOptionsForRowAt indexPath: IndexPath,
               for orientation: SwipeActionsOrientation) -> SwipeTableOptions {
    var options = SwipeTableOptions()
    options.transitionStyle = .reveal
    options.expansionStyle = .selection
    options.expansionDelegate = ScaleAndAlphaExpansion.default
    //设置按钮区域背景色
    options.backgroundColor = UIColor(red: 245/255, green: 245/255,
                                      blue: 245/255, alpha: 1)
    return options
}

（3）当然使用 ScaleAndAlphaExpansion 时也可以不用它的 default 配置，而是自己指定动画时长、缩小比例、播放间隔这些参数。 
options.expansionDelegate = ScaleAndAlphaExpansion(duration: 0.5, scale: 0.2,
                                                   interButtonDelay: 0.1)
评论

全部评论（0）

回到顶部