Custom Swipe Table View Cell

In our most of the apps we generally see that we have some options that we can perform  while swiping the cell. Default swipe actions provided by iOS can only show the text and don’t have customization options. Today you will lean how we can add our custom swipe actions in a UITableview cell.

But before moving that we need PKSwipeTableViewCell file that I have created to provide custom swipe action. You can download the file from the below github sample project.

Now create a single view application and add a UITableView in view controller. Create a custom class for the cell and  inherit it from the PKSwipeTableViewCell. 

In our demo we will add a call button while swiping the cell, so create a function and add the code to display the call option.

func addRightViewInCell() {

       

        //Create a view that will display when user swipe the cell in right

        let viewCall = UIView()

        viewCall.backgroundColor = UIColor.lightGrayColor()

        viewCall.frame = CGRectMake(0, 0,CGRectGetHeight(self.frame)+20,CGRectGetHeight(self.frame))

        //Add a label to display the call text

        let lblCall = UILabel()

        lblCall.text  = "Call"

        lblCall.font = UIFont.systemFontOfSize(15.0)

        lblCall.textColor = UIColor.yellowColor()

        lblCall.textAlignment = NSTextAlignment.Center

        lblCall.frame = CGRectMake(0,CGRectGetHeight(self.frame) - 20,viewCall.frame.size.width,20)

        //Add a button to perform the action when user will tap on call and add a image to display

        let btnCall = UIButton(type: UIButtonType.Custom)

        btnCall.frame = CGRectMake((viewCall.frame.size.width - 40)/2,5,40,40)

        btnCall.setImage(UIImage(named: "call"), forState: UIControlState.Normal)

        btnCall.addTarget(self, action: "callButtonClicked", forControlEvents: UIControlEvents.TouchUpInside)

        viewCall.addSubview(btnCall)

        viewCall.addSubview(lblCall)

        //Call the super addRightOptions to set the view that will display while swiping

        super.addRightOptionsView(viewCall)

    }

Here you can see that we are calling super class function addRightOptions, this gives you the flexibility to show any view that you want to create. You can create multiple views(like call,message) and display them here.

When the user will swipe the cell and tap on any option then we have to again bring the cell in normal state. For that we have to call reset function.

func callButtonClicked(){

      //Reset the cell state and close the swipe action

        self.resetCellState()

}

It’s depends on the requirement that we have to make the cell again in normal state or not. If you want to remain open then there is no need to call the reset function.

Swipe cell class also provide the delegate methods when the swipe action begins on the cell. We may require in some case to reset the swipe cell when user tries to perform the swipe action on other cell. To achieve this you have to store the old cell on which swipe was performed and return that cell in the swipe delegate.

// PKSwipeTableViewCell Delegate

    func swipeBeginInCell(cell: PKSwipeTableViewCell) {

        oldStoredCell = cell

    }

   

    func swipeDoneOnPreviousCell() -> PKSwipeTableViewCell? {

        guard let cell = oldStoredCell else {

            return nil

        }

        return cell

    }

Note: - Don’t forgot to set the cell delegate to point your view controller otherwise methods will not get called.

That’s all we have successfully integrated it.

Here is sampleproject with all the code of the above tutorial.

If you face any issue or have any suggestions,please leave your comment.