文中代码基于swift4.0 demo github: XXCellAndDeleteAction
一、 自定义卡片式的tableViewCell
1. 要想cell之间有间隔，可以用一种“假间隔”的方式设置
将cell设大一点，再添加一个卡片的view，和cell的contenView间隔一定的距离
2. 注意颜色设置，避免以下问题
- 1 是cell的颜色；
- 2 是tableView当左划时多出的一个UISwipeActionPullView的背景颜色（ios11之前是不存在这个问题的）；
- 3 是删除View的背景颜色
删除View高度（与cell高度一致）与卡片的高度不一样，所以1、2、3的颜色要保持一致，否则呈现的效果很丑。
cellDele.png
3. ios11对删除按钮的层级做了改变。最显著的改变是从是UITableViewCell的子视图变成了UITableView的子视图（引用自：https://www.jianshu.com/p/779f36c21632）。
iOS 8-10: UITableView -> UITableViewCell -> UITableViewCellDeleteConfirmationView -> _UITableViewCellActionButton
iOS 11 (Xcode 8编译): UITableView -> UITableViewWrapperView -> UISwipeActionPullView -> UISwipeActionStandardButton
iOS 11 (Xcode 9编译): UITableView -> UISwipeActionPullView -> UISwipeActionStandardButton
4. 为了适配ios11，需要改变UISwipeActionPullView的背景颜色。
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if #available(iOS 11.0, *) {
for view in tableView.subviews {
if view.isKind(of: NSClassFromString("UISwipeActionPullView")!) {
//这里可以改变view的背景颜色
}
}
}
}
二、 自定义左划删除按钮
override func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
let kCellActionWidth: CGFloat = 100
let whitespace = whitespaceString(width: kCellActionWidth)//根据宽度返回占位的空格字符串
let deleAction = UITableViewRowAction(style: .default, title: whitespace) { (action, indexPath) in
//delete callback
}
deleAction.backgroundColor = UIColor(patternImage: getDeleteIcon())
return [deleAction]
}
1. 删除按钮的宽度，是根据给定删除按钮的文字来变化的。
2. 只显示图片不显示文字。根据预定的删除按钮的宽度，全部用" "空格来占位。
//根据宽度返回带有空格的string类型
fileprivate func whitespaceString(font: UIFont = UIFont.systemFont(ofSize: 15), width: CGFloat) -> String {
let kPadding: CGFloat = 20
let mutable = NSMutableString(string: "")
let attribute = [NSAttributedStringKey.font: font]
while mutable.size(withAttributes: attribute).width < width - (2 * kPadding) {
mutable.append(" ")
}
return mutable as String
}
3. 给删除按钮设置图片，注意删除按钮没有image属性（ios11新出了一个API带有image属性，但是也无法实现我想要的效果，后面会提到）
deleAction.backgroundColor = UIColor(patternImage: getDeleteIcon())
func getDeleteIcon() -> UIImage {
let kCellActionWidth: CGFloat = 100
let kCellHeight: CGFloat = 176
let kActionImageSize: CGFloat = 18
let kImageBackViewSize: CGFloat = 44
let view = UIView(frame: CGRect(x: 0, y: 0, width: kCellActionWidth, height: kCellHeight))
let deleteBackView = UIView(frame: CGRect(x: (kCellActionWidth - kImageBackViewSize) / 2,
y: (kCellHeight - kImageBackViewSize) / 2,
width: kImageBackViewSize,
height: kImageBackViewSize))
deleteBackView.layer.cornerRadius = kImageBackViewSize / 2
deleteBackView.clipsToBounds = true
deleteBackView.backgroundColor = UIColor.white
let imageView = UIImageView(frame: CGRect(x: (kCellActionWidth - kActionImageSize) / 2,
y: (kCellHeight - kActionImageSize) / 2,
width: kActionImageSize,
height: kActionImageSize))
imageView.image = UIImage(named: "delete")
view.backgroundColor = UIColor(red: 224.0/255.0, green: 227.0/255.0, blue: 232.0/255.0, alpha: 1.0)
view.addSubview(deleteBackView)
view.addSubview(imageView)
return view.image()
}
4. 将view转化成image
view.image() //给view添加一个extension实现将view转化成image的功能
extension UIView {
func image() -> UIImage {
UIGraphicsBeginImageContextWithOptions(bounds.size, isOpaque, 0)
guard let context = UIGraphicsGetCurrentContext() else {
return UIImage()
}
layer.render(in: context)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
ios10.3.png
ios11.png
5. 设置完以上几步，ios11之前显示就很正常了。但是ios11有一点瑕疵。因为ios11 用空格来占位不起作用了。如果action的title 是正常的字符，则会根据字符多少设置删除按钮的宽度。如果action的title为nil或者“ ”空格，那么action会给一个默认的宽度，这个宽度比我之前设置的100要小，为了让显示更美观，修改方法getDeleteIcon() 中垃圾桶背景view与垃圾桶的x值。
var deletBackViewX: CGFloat = 0
var imageViewX: CGFloat = 0
if #available(iOS 11.0, *) {
deletBackViewX = kActionImageSize / 2
imageViewX = kActionImageSize / 2 + (kImageBackViewSize - kActionImageSize) / 2
} else {
deletBackViewX = (kCellActionWidth - kImageBackViewSize) / 2
imageViewX = (kCellActionWidth - kActionImageSize) / 2
}
修改垃圾桶和垃圾桶背景的x值后.png
ageView2/2/w/1240)
6. ios11出了下面的新API，UIContextualAction可以直接设置image。但是image以及文字的颜色默认都是白色。image会被渲染成白色，而我的垃圾桶是红色，所以无用。当然也可以修改成红的，通过修改tableView里面imageView的appearance。但是这个设置对所有tableView中的imageView都有效。所以有时候不是很适用。
@available(iOS 11.0, *)
override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
let deleteAction = UIContextualAction(style: .normal, title: nil) { (action, view, completeHandler) in
//delete action
}
return UISwipeActionsConfiguration(actions: [deleteAction])
}
image.png
