UITableview sliding menu has been launched from iOS8, convenient interface and good user experience, has become another feature that distinguishes iOS from Android, many apps have used this feature. However, the default style is too crude, and Apple has yet to offer a friendly way to customize it. Look at a lot of tutorials, often need to walk through the entire tableview, especially iOS11 after the View hierarchy has been adjusted, making traversal search more troublesome. Below, I will provide a more clever method to you.

The rest of the work is relatively simple, we need to add editActions events to the UITableview, otherwise the Cell cannot be dragged. The created UITableViewRowAction needs to have the backgroundColor set to UIColor(red: 0, green: 0, Blue: 0, alpha: 0) (cannot be set to Clear, it will display gray).

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]
    }
Copy the code

When you re-run the App, you’ll probably still see a blank screen with no custom views displayed. To understand why, we need to understand the ClipToBounds attribute.

A lot of people have used it for rounding corners, and its function is to cut out views outside the View boundary. We go back to our StoryBorad or XIB and click on the UITableViewCell and its ContentView, respectively, to uncliptobounds so that even views outside their boundaries (like our custom View) can be rendered.

At this point, I’m happy to tell you that your custom button is working. You should see something similar to the image below.

Wait, if you’re looking at it on a pre-ios 11 device, this is an awkward situation.

    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]
    }`
Copy the code

Finally, I mentioned at the beginning of this article that iOS11 has changed the swipe button. We tried opening Debug View Hierarchy to view the system Hierarchy for each iOS version.

What we can see is that in iOS11, the UISwipeActionPullView(blue area) is on top of the UITableview, which is different from before iOS11. And placed under ContentView). This change is insensitive to users, but developers need to be aware of it so they can make changes as needed.