swift 拖动按钮_Swift - 单元格滑动按钮库SwipeCellKit使用详解1（基本用法）

在之前的两篇文章中我分别介绍了如何使用 iOS8和 iOS11提供的相关代理方法，来实现 tableView单元格滑动事件按钮：

但它们局限性还是比较大的，前者只能实现尾部按钮，且按钮只能使用文字无法使用图片。而后者对系统版本又要求比较高。

下面介绍一个好用的第三方滑动单元格组件：SwipeCellKit。不仅使用方便，而且功能强大，可以自由设置各种样式和动画效果。只要系统版本在iOS9.0以上就可以使用。

一、基本介绍

使用 SwipeCellKit可以很方便地实现类似系统里邮件 App那样的滑动效果。

1，功能特点

支持左滑和右滑操作。

动作按钮支持纯文本、文本+图片以及纯图片样式。

支持触觉反馈

可自定义转场效果，比如 Border、Drag以及 Reveal

可自定义按钮滑动时的行为

支持滑动超过一定范围时的自动展开动画

可自定义自动展开动画

2，安装配置

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

}