自定义UITableview左滑菜单按钮

2,772 阅读3分钟

UITableview滑动菜单从iOS8开始就已经推出,方便的接口和良好的用户体验,成为了iOS区别于安卓的又一个特性,很多App中都使用到了这个特性。不过,系统默认的样式太过简陋,而Apple至今都没有给出友好的自定义方法。查看了许多教程,往往都需要遍历整个tableview,尤其是iOS11后对View的层级进行了调整,使得遍历查找更加麻烦。下面,我将提供一个更取巧的方法给大家。

屏幕快照 2018-01-12 10.06.03.png
方法其实很简单,我们在StoryBoard或XIB中画控件的时候,将我们的自定义View添加到Cell的右侧,给定约束,其中最重要的是该自定义View到Cell右侧的距离。根据AutoLayout的设定,无论Cell在屏幕的哪里,右侧的自定义View都会保持在Cell右侧与其保持一个固定的距离。这样,当我们向左拖动Cell的时候,右侧的View也会被一并拖过来。就是这!么!简!单!

剩下的工作比较简单,我们需要给UITableview添加editActions事件,否则Cell是无法拖动的。创建的UITableViewRowAction需要将backgroundColor设置为UIColor(red: 0, green: 0, blue: 0, alpha: 0)(不能设置为Clear,会显示灰色)。

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
        let action = UITableViewRowAction(style: .normal, title: nil) { (action, index) in
            self.delete(indexPath.row)
        }
        action.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0)
        return [action]
    }

这时候重新运行App,你可能看到的还是一片空白,并没有任何自定义View显示出来。要知道为什么,我们需要了解ClipToBounds属性。

很多人在切圆角的时候用过它,他的功能就是将View边界之外的View裁切掉。我们回到StoryBorad或XIB,分别点击UITableViewCell和它的ContentView,将它们的ClipToBounds属性取消,这样,即便是在它们边界之外的View(例如我们的自定义View)也能被渲染出来。

屏幕快照 2018-01-12 10.25.53.png

至此,很高兴的告诉你,你的自定义按钮已经生效了。你应该能看到类似下图的效果。

IMG_F424D6ED641E-1.jpeg

等等,如果你使用iOS11之前的设备查看时,会发现这样一个尴尬的情况。

IMG_0052.PNG
按钮只显示了一半,或者说,拖出来的距离非常小。我们打开视图查看一下。
iOS10
UISwipeActionPullView非常小,而Cell被拖出来的距离应该是由这个UISwipeActionPullView的大小决定的。那么如何控制UISwipeActionPullView的大小呢?系统没有暴露出UISwipeActionPullView,难道还要遍历一遍TableView?其实UITableViewRowAction有一个属性title,这个UISwipeActionPullView的大小,或者说Cell被拖出来的距离,就是由title的长度决定的。聪明的你一定想到了,只需要给title赋一堆空格就能解决问题了。

    func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
        let action = UITableViewRowAction(style: .normal, title: nil) { (action, index) in
            self.delete(indexPath.row)
        }
        action.title = "          "
        action.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0)
        return [action]
    }`

最后提一下文章开头提到的iOS11对于侧滑按钮的变化。 我们尝试打开Debug view Hierarchy来分别查看一下不同iOS版本下的系统层级。

iOS11
iOS11
iOS10
iOS10

我们发现,iOS11中,UISwipeActionPullView(蓝色区域)的层级在UITableview之上,这与iOS11之前的版本不一样(UISwipeActionPullView在UITableviewCell之上,且置于ContentView之下)。这个变化对用户是无感的,但开发人员需要了解,以便在需要的时候进行修改。