Github: https://github.com/ZIYOCHIRO/DesignTips/tree/master/UITableView-Delete
1.自定义圆角TableViewCell
新建DeleteTableViewCell以及DeleteTableViewCell.xib文件
在DeleteTableViewCell的ContentView中添加一个View作为CornerView,并设置其Top及Bottom Constraints与ContentView的间隔为7.5,以实现每个cell中间的间隔。
将CornerView以及Lable连接到DeleteTableViewCell 的文件里,设置cornerView
的CornerRadius
cornerView.setCornerRadius(with: 10)
, 设置Cell的选中样式为无self.selectionStyle = .none
// DeleteTableViewCell.swift
// UITableView-Delete
import UIKit
class DeleteTableViewCell: UITableViewCell {
@IBOutlet weak var cornerView: UIView!
@IBOutlet weak var contentLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
cornerView.setCornerRadius(with: 10)
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
self.selectionStyle = .none
// Configure the view for the selected state
}
}
extension UIView {
func setCornerRadius(with Radius: CGFloat) {
self.layer.cornerRadius = Radius
}
func setShadow(withRadius Radius: CGFloat) {
self.layer.cornerRadius = Radius
self.layer.shadowOffset = CGSize(width: 0, height: 0)
self.layer.shadowColor = UIColor.lightGray.cgColor
self.layer.shadowOpacity = 0.4
self.layer.shadowRadius = 4
self.layer.masksToBounds = false
}
}
2.自定义侧滑删除按钮
自定义TableView的侧滑删除按钮,实际上就是要自定义一个TableView,改变其侧滑View里的button样式。
cellHeight
为每个cell的实际高度,也就是Cell的Corner View的高度,而不是Content View 的高度
buttonColor
为侧滑删除按钮的颜色
// DeleteTableView.swift
// UITableView-Delete
import UIKit
class DeleteTableView: UITableView {
@IBInspectable var cellHeight: CGFloat = 60 {
didSet {
layoutSubviews()
}
}
@IBInspectable var buttonColor: UIColor = .red {
didSet {
layoutSubviews()
}
}
var buttonTitle: String = "删除"
override func layoutSubviews() {
super.layoutSubviews()
if #available(iOS 11.0, *) {
for subview in self.subviews where subview.isKind(of: NSClassFromString("UISwipeActionPullView")!) {
for view in subview.subviews where view.isKind(of: NSClassFromString("UISwipeActionStandardButton")!) {
view.frame = CGRect.init(x: 0, y: 7.5, width: 60, height: cellHeight)
for subSubView in view.subviews where view.isKind(of: UIButton.self) {
subSubView.removeFromSuperview()
}
let deleteButton = setDeleteButton(frame: view.frame)
view.addSubview(deleteButton)
view.bringSubviewToFront(deleteButton)
}
}
} else { // IOS 10以及以下
for subview in subviews where subview.isKind(of: NSClassFromString("UITableViewCellDeleteConfirmationView")!) {
subview.backgroundColor = buttonColor
for view in subview.subviews where view.isKind(of: UIButton.self) {
view.backgroundColor = buttonColor
view.backgroundColor = UIColor.clear
view.frame = CGRect.init(x: 0, y: 7.5, width: 60, height: cellHeight )
let deleteButton = setDeleteButton(frame: view.frame)
view.addSubview(deleteButton)
view.bringSubviewToFront(deleteButton)
}
}
}
}
private func setDeleteButton(frame: CGRect) -> UIButton {
let deleteButton = UIButton(type: .custom)
deleteButton.frame = CGRect.init(x: 10, y: 0, width: cellHeight, height: cellHeight )
deleteButton.backgroundColor = buttonColor
deleteButton.setTitle(buttonTitle, for: .normal)
deleteButton.setTitleColor(UIColor.white, for: .normal)
deleteButton.titleLabel?.numberOfLines = 0
deleteButton.titleLabel?.font = UIFont.systemFont(ofSize: 15)
deleteButton.setCornerRadius(with: cellHeight / 2)
return deleteButton
}
}
3.使用自定义的TableView(带有自定义的侧滑按钮)以及自定的Cell
添加一个TableView,设置其class为DeleteTableView,并设置其cell高度,Button的颜色
将tableView连接到viewController,在viewDidLoad
方法里为tableView注册自定义的cell,不要忘了设置cell的identifier
// ViewController.swift
// UITableView-Delete
import UIKit
class ViewController: UIViewController {
var exampleContent: [String] = ["item1", "item2", "item3", "item4", "item5"]
@IBOutlet weak var exampleTableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
exampleTableView.delegate = self
exampleTableView.dataSource = self
exampleTableView.separatorStyle = .none
exampleTableView.register(UINib.init(nibName: "DeleteTableViewCell", bundle: nil), forCellReuseIdentifier: "DeleteTableViewCell")
}
}
extension ViewController: UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 80
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return exampleContent.count
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 10
}
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
let view = UIView()
view.backgroundColor = UIColor.clear
return view
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "DeleteTableViewCell", for: indexPath) as! DeleteTableViewCell
cell.contentLabel.text = exampleContent[indexPath.row]
return cell
}
func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
let delete = UITableViewRowAction.init(style: .default, title: "删除") { (action, indexpath) in
}
delete.backgroundColor = UIColor.lightGray
return [delete]
}
}