Swift - 单元格滑动按钮库SwipeCellKit使用详解1(基本用法)
作者:hangge | 2017-12-22 08:10
在之前的两篇文章中我分别介绍了如何使用 iOS8 和 iOS11 提供的相关代理方法,来实现 tableView 单元格滑动事件按钮:
但它们局限性还是比较大的,前者只能实现尾部按钮,且按钮只能使用文字无法使用图片。而后者对系统版本又要求比较高。
下面介绍一个好用的第三方滑动单元格组件:SwipeCellKit。不仅使用方便,而且功能强大,可以自由设置各种样式和动画效果。只要系统版本在 iOS9.0 以上就可以使用。
一、基本介绍
使用 SwipeCellKit 可以很方便地实现类似系统里邮件 App 那样的滑动效果。
1,功能特点
- 支持左滑和右滑操作。
- 动作按钮支持纯文本、文本+图片以及纯图片样式。
- 支持触觉反馈
- 可自定义转场效果,比如 Border、Drag 以及 Reveal
- 可自定义按钮滑动时的行为
- 支持滑动超过一定范围时的自动展开动画
- 可自定义自动展开动画
2,安装配置
(1)从 GitHub 上下载最新的代码:https://github.com/SwipeCellKit/SwipeCellKit
(2)将下载下来的源码包中 SwipeCellKit.xcodeproj 拖拽至你的工程中
(3)工程 -> General -> Embedded Binaries 项,把 SwipeCellKit.framework 添加进来。
(4)最后,在需要使用 SwipeCellKit 的地方 import 进来就可以了
import SwipeCellKit
二、使用样例
1,纯文字的滑动按钮
(1)效果图
- 我们在 tableView 上向左滑动某个 cell 时,其右侧会出现“旗标”“删除”这两个按钮选项。当点击“旗标”按钮时,页面上会弹出相关的操作信息。
- 而最右侧的“删除”按钮除了点击会触发外,直接往左一滑到底也会触发,触发后会将当前行数据给删除。
- 而右滑单元格时左侧会出现“未读”按钮,点击后同样在页面上弹出相关的操作信息。
(2)样例代码
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 { //创建“未读”事件按钮 let unreadAction = SwipeAction(style: .default, title: "未读") { action, indexPath in UIAlertController.showAlert(message: "点击了“未读”按钮") } unreadAction.backgroundColor = UIColor(red: 52/255, green: 120/255, blue: 246/255, alpha: 1) //返回左侧事件按钮 return [unreadAction] } 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 = .selection //展开样式(默认为.none) 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) } } }
2,修改文字的颜色和字体
通过 SwipeAction 的 textColor 和 font 属性,我们可以分别修改按钮上文字的颜色和字体大小。
//创建“未读”事件按钮 let unreadAction = SwipeAction(style: .default, title: "未读") { action, indexPath in UIAlertController.showAlert(message: "点击了“未读”按钮") } //设置按钮的文字颜色和字体大小 unreadAction.textColor = .green unreadAction.font = .systemFont(ofSize: 20) unreadAction.backgroundColor = UIColor(red: 52/255, green: 120/255, blue: 246/255, alpha: 1)
3,带图标的滑动按钮
(1)如果想要实现想邮件 App 那样“图标 + 文字”的按钮,我们只需要给对应的 SwipeAction 设置个 image 就可以了。
//创建“未读”事件按钮 let unreadAction = SwipeAction(style: .default, title: "未读") { action, indexPath in UIAlertController.showAlert(message: "点击了“未读”按钮") } //设置按钮图标 unreadAction.image = UIImage(named: "unread") unreadAction.backgroundColor = UIColor(red: 52/255, green: 120/255, blue: 246/255, alpha: 1)
(2)如果按钮只想要图标,不需要文字标题的话,把 title 设置为 nil 即可。
//创建“未读”事件按钮 let unreadAction = SwipeAction(style: .default, title: nil) { action, indexPath in UIAlertController.showAlert(message: "点击了“未读”按钮") } //设置按钮图标 unreadAction.image = UIImage(named: "unread") unreadAction.backgroundColor = UIColor(red: 52/255, green: 120/255, blue: 246/255, alpha: 1)
4,自动展开事件按钮
(1)上面的样例中,不管是左侧还是右侧的事件按钮,都是通过滑动手势来展开的。有时我们可能想通过程序来自动触发这个行为,那么只要调用 SwipeTableViewCell 的 showSwipe 方法即可。(2)下面是一个简单的样例,当我们点击某个 cell 时,这个 cell 右侧的功能按钮便会自动出现。
//点击某个单元格 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { let cell = tableView.cellForRow(at: indexPath) as! SwipeTableViewCell //自动展开该单元格右侧的事件按钮 cell.showSwipe(orientation: .right) }
全部评论(1)
航哥你好,为什么我不管是将这个库拖进工程或者是用cocoapds,都是能使用该第三方库。调不出SwipeTableViewCellDelegate。
站长回复:那就奇怪了,我又测试了下确实是好的,不知道你那边是什么情况。