自定义卡片式的cell以及自定义左划删除按钮

文中代码基于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