当前位置: > > > Swift - 单元格滑动按钮库SwipeCellKit使用详解2(过渡样式)

Swift - 单元格滑动按钮库SwipeCellKit使用详解2(过渡样式)

三、设置过渡样式(Transition Styles)

过渡样式(或者称转场样式)是指在滑动过程中事件按钮出现的方式。

1,使用自带的样式

(1)包括前文我们使用的 border 这个样式,SwipeCellKit SwipeTransitionStyle 里一共内置了如下 3 种过渡样式。具体效果如下:
  • .border:所有的事件按钮在可见区域内是等分的。

  • .drag:所有的事件按钮看起来像是跟在 cell 后面,从屏幕外拖动进来的。

  • .reveal:所有的事件按钮看起来是藏在 cell 下面,随着 cell 的拖拽逐渐被揭露出来。


(2)通过 editActionsOptionsForRowAt 这个代理方法,我们可以设置过渡样式。
//自定义滑动过渡行为(可选)
func tableView(_ tableView: UITableView, editActionsOptionsForRowAt indexPath: IndexPath,
               for orientation: SwipeActionsOrientation) -> SwipeTableOptions {
    var options = SwipeTableOptions()
    options.transitionStyle = .reveal
    return options
}


2,自定义样式

除了使用上面内置的几个通用样式外,我们还可以通过 SwipeAction transitionDelegate 代理(实现 SwipeActionTransitioning 协议),给每个按钮设置完全自定义的变化样式。

(1)效果图
  • 为了更好演示效果,我这里去除每个按钮的背景色,同时按钮图标改成圆形的。
  • 当按钮未被揭露时(显示部分不到 50%),按钮缩小到只有正常的 80%
  • 当按钮被揭露时(显示部分超过 50%),则按钮变成正常大小。
  • 不管放大还是缩小,都是有过渡动画效果(持续时间 0.15 秒)
         

(2)样例代码 
这里我直接使用 ScaleTransition 类提供静态 default 配置,其是效果:显示部分超过一定的阀值(threshold)则正常,小于该阀值则缩小。
当然使用 ScaleTransition 时也可以不用它的 default 配置,而是自己指定阀值、缩小比例、动画时长:
moreAction.transitionDelegate = ScaleTransition(duration: 0.5, initialScale: 0.2, threshold: 0.5)
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.tableView!.rowHeight = 80
        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 = SwipeTableViewCell(style: .subtitle, reuseIdentifier: identify)
            cell.delegate = self
            cell.textLabel?.text = items[indexPath.row]
            cell.detailTextLabel?.text = "这个是备注信息"
            return cell
    }
    
    //自定义滑动按钮
    func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath,
                   for orientation: SwipeActionsOrientation) -> [SwipeAction]? {
        //分别返回左侧、右侧的按钮
        if orientation == .left {
            return nil
        } else{
            //创建“更多”事件按钮
            let moreAction = SwipeAction(style: .default, title: "更多") {
                action, indexPath in
                UIAlertController.showAlert(message: "点击了“更多”按钮")
            }
            moreAction.image = UIImage(named:"More-circle")
            moreAction.backgroundColor = .clear
            moreAction.textColor = .lightGray
            moreAction.font = .systemFont(ofSize: 13)
            moreAction.transitionDelegate = ScaleTransition.default
            
            //创建“旗标”事件按钮
            let favoriteAction = SwipeAction(style: .default, title: "旗标") {
                action, indexPath in
                UIAlertController.showAlert(message: "点击了“旗标”按钮")
            }
            favoriteAction.image = UIImage(named:"Flag-circle")
            favoriteAction.backgroundColor = .clear
            favoriteAction.textColor = .orange
            favoriteAction.font = .systemFont(ofSize: 13)
            favoriteAction.transitionDelegate = ScaleTransition.default
            
            //创建“删除”事件按钮
            let deleteAction = SwipeAction(style: .destructive, title: "删除") {
                action, indexPath in
                //将对应条目的数据删除
                self.items.remove(at: indexPath.row)
                tableView.reloadData()
            }
            deleteAction.image = UIImage(named:"Trash-circle")
            deleteAction.backgroundColor = .clear
            deleteAction.textColor = .red
            deleteAction.font = .systemFont(ofSize: 13)
            deleteAction.transitionDelegate = ScaleTransition.default
            
            //返回右侧事件按钮
            return [deleteAction, favoriteAction, moreAction]
        }
    }
    
    
    //自定义滑动过渡行为(可选)
    func tableView(_ tableView: UITableView,
            editActionsOptionsForRowAt indexPath: IndexPath,
                   for orientation: SwipeActionsOrientation) -> SwipeTableOptions {
        var options = SwipeTableOptions()
        options.transitionStyle = .reveal
        options.expansionStyle = .selection
        //设置按钮区域背景色
        options.backgroundColor = UIColor(red: 245/255, green: 245/255,
                                          blue: 245/255, alpha: 1)
        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)
        }
    }
}
源码下载hangge_1874.zip
评论0