iOS

iOS Programming 101: How To Create Swipeable Table View Cell to Display More Options


When iOS 7 was first released, one of the many visual changes that particularly interested me was the swipe-to-delete gestures in the Mail app. By now you should be very familiar with the feature. After you swipe a table cell, you’ll see the Trash button, plus a new button named More. The More button will bring up an action sheet that shows a list of options such as Reply, Flag, etc.

I thought it’s a great feature to provide additional options for manipulating a table record. However, as you know, Apple didn’t make this feature available to developers in iOS 7. You can only create the swipe-to-delete option in table cell. The More feature is only limited to the stock Mail app. I have no idea why Apple keeps such great feature to its own app. Fortunately, some developers have created free solutions (such as UITableView-Swipe-for-Options, MCSwipeTableViewCell) and made them available freely.

In this tutorial, I’ll use SWTableViewCell and see how to implement swipe-to-show-options feature in your app. SWTableViewCell is pretty to easy to use. If you understand how to implement UITableView, you shouldn’t have any problem with SWTableViewCell. On top of that, it supports utility buttons on both swipe directions. You’ll understand what it means in a minute.

Swipeable UITableViewCell

Let’s get started and build our demo app.

Xcode Project Template for Demo App

I encourage you to create the project from scratch. The demo app is simply a table view app showing a list of custom table cell. However, as the focus of this tutorial is on SWTableViewCell, I have pre-built the project for you. You can download the project template from here. If you know how to create a custom table view, you should understand how the template works. After downloading the template, you can compile it and have a trial run. The app should display a list of pattern images (courtesy of ThePatternLibrary.com).

swipetablecell demo app template

Adding the SWTableViewCell Library

The SWTableViewCell library is developed by Chris Wendel. It’s freely available on GitHub. To use the library, first download it from the GitHub, extract the zipped archive and add the files under SWTableViewCell/PodFiles to your Xcode project. For better organization, you may create a new group and put the files there.

swtableviewcell files

Using SWTableViewCell

SWTableViewCell is very easy to integrate. If you’re familiar with UITableView and UITableViewCell, you shouldn’t have any problem with the integration. In general, here are the few things you need to do to use SWTableViewCell:

  1. Extend your custom table view cell from SWTableViewCell class instead of UITableViewCell – the SWTableViewCell is actually a subclass of UITableView Cell but provides additional utility buttons when user swipes across a table cell.
  2. Update the cellForRowAtIndexPath: method to create the utility buttons – the SWTableViewCell comes with two properties named leftUtilityButtons and rightUtilityButtons. These two properties represent the utility buttons to display depending on the swipe direction. You’ll need to create an array of buttons and assign it to the property. It’s not required to create both leftUtilityButtons and rightUtilityButtons.
  3. Implement the SWTableViewCellDelegate protocol – optional methods of the protocol allow developers to manage the actions of the utility buttons. When user swipes a table view cell, the cell will reveal a set of utility buttons. Depending on the direction of the swipe, the didTriggerRightUtilityButtonWithIndex: or didTriggerLeftUtilityButtonWithIndex: method will be called when the utility button is tapped. You’ll need to implement these methods to trigger the action of the utility buttons.

Okay, let’s modify the project template to use SWTableViewCell.

Extend Custom Table View Cell from SWTableViewCell Class

First, open the CustomTableViewCell.h and change the parent class to SWTableViewCell. Your code should look like this after the change:

Creating Utility Buttons

Next, we’ll update the cellForRowAtIndexPath: method in the SwipeTableViewController.m to create the utility buttons. But before we do, add the following import statement and implement the SWTableViewCellDelegate protocol in the SwipeTableViewController.h. We’ll talk about the protocol in the next section but let’s update the code first. Your code should look like this after the change:

Open the SwipeTableViewController.m and update the cellForRowAtIndexPath: method:

Here we create two sets of utility buttons. One will be revealed when user swipes the cell from left to right. The other set will be displayed when the cell is swiped in the opposite direction. We create a set of sharing buttons for the leftUtilityButtons, while we just create a “More” and “Delete” button for the rightUtilityButtons. As you can see from the above code, you can simply create a NSMutableArray and add the button using the sw_addUtilityButtonWithColor: method.

You’re now ready to compile and test the app. Once launched, try to swipe any of the table cell and you should see the utility buttons. However, the buttons do not work properly. It’s a known issue as we haven’t implemented any methods of the SWTableViewCellDelegate protocol. Let’s move on.

Implementing the SWTableViewCellDelegate Protocol

The SWTableViewCellDelegate protocol provides optional methods to manage the action of the utility buttons. If you read the code in the previous section carefully, you should notice the SwipeTableViewController is assigned as the delegate of the SWTableViewCell. We’ll then implement these two methods in the SwipeTableViewController.m:

  1. didTriggerLeftUtilityButtonWithIndex: method – triggered when any of the left utility buttons is tapped.
  2. didTriggerRightUtilityButtonWithIndex: method – triggered when any of the right utility buttons is tapped.

Add the following code in the SwipeTableViewController.m:

To keep thing simple, we’ll just display an alert message whenever any of the sharing button is tapped. In real app, you may need to implement Facebook and Twitter sharing.

For the right utility buttons, we implement the didTriggerRightUtilityButtonWithIndex: method with the following code:

Again, the code is simple and straightforward. When the More button is tapped, the app brings up an action sheet showing a list of social sharing options. For the delete action, we simply remove the item from the patterns and patternImages arrays, followed by calling the deleteRowsAtIndexPaths: method to remove the record from table view.

That’s it! You can now compile and run the app again. The utility buttons should work now.

Swipeable Table Cell App Demo

Summary

The SWTableViewCell makes it really easy to implement the swipe-for-option feature in table view. When you develop your next app, consider to add this feature. I believe it’ll take the user experience to the next level.

Though we can develop our own solution or use some third-party solutions, I truly hope that Apple will consider to open up such feature to all developers in the next iOS update.

For your reference, you can download the final Xcode project from here. As always, leave me comment and share your thought.

Tutorial
How to Use Xcode Targets to Manage Development and Production Builds
Swift
Building Your First Web App in Swift Using Vapor
iOS
iOS Programming 101: How to Customize Navigation Bar and Back Button
  • ohdowload

    ohdowloadohdowload

    Author Reply

    thanks for new article. could you please tell me when you usually post new article and how many times per week did you post an article because i think i just fall in love with this website. there is so many high quality tutorial to learn. thank you for making the tutorial for us. cheers


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      We used to publish tutorial article weekly. We’re now growing our team and hopefully we can create tutorials more frequently in near future.


  • ohdowload

    ohdowloadohdowload

    Author Reply

    can i request a tutorial about how to learn to use any third party project from github. could you please do a walkthrough for SWTableViewCell as an example because as a novice sometimes i can’t understand even though there is readme/guide documentation there. cheers.


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      Please send your suggestion to [email protected]. We’ll see if we can create a tutorial for it.


      • hemanthgk

        hemanthgkhemanthgk

        Author Reply

        Hi Simon,

        I get problem using push segue with it. It doesn’t navigate me to the next screen. What can I do to get that resolved.


  • AnthonyMarchenko

    Thanks! Exactly what I need to implement in current project 🙂


  • PAVAN

    PAVANPAVAN

    Author Reply

    How can I reduce width of buttons as per requirement.


  • durden

    durdendurden

    Author Reply

    great article, exactly what I’m looking for! but…is it just me or something, the final sample project code does not work, you cannot swipe at all…


  • LittlePeculiar

    Thank you for this. Fantastic.


  • Zucca86

    Zucca86Zucca86

    Author Reply

    Great tutorial !!
    Is there a way to create a segue connection from one swipe option to another controller with storyboard ??

    Thank you.


    • Tobias Mann

      have you found a solution?
      have the same problem right now


    • SwedishDev

      SwedishDevSwedishDev

      Author Reply

      Just use [self performSegueWithIdentifier:] in the table view controller and create a segue in Storyboard with an identifier that you plug into that message.


  • rycill

    rycillrycill

    Author Reply

    how can we add dynamic text under a png button. like number of votes or something like that.
    thanks


  • rycill

    rycillrycill

    Author Reply

    not under but over (sorry i’m french 😉


  • GJC

    GJCGJC

    Author Reply

    Great!


  • raj

    rajraj

    Author Reply

    Having trouble unzipping your starter template zip file. I’ve tried downloading several times, and used different extractors, but none of them work.


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      Just tested again. I had no problem unzipping the file using Mac’s archive utility. Please re-download the file and try again.


      • raj

        rajraj

        Author Reply

        Thanks, Simon. I haven’t retried yet, as I just saw your message right now. However, when I had the same problem with another site’s code, I realized that there’s a weird situation when downloading from Dropbox that sometimes happens. In these cases, the zip file is not downloading fully. So, re-downloading usually seems to do the trick.


        • raj

          rajraj

          Author Reply

          Nope, still having problems, even after re-downloading the template and final zip files. They just will not unzip.


  • محمد عبد الرازق

    hi I have a problem I did the whole thing but when I click on the cell it doesn’t make a push seque , I have my UIcontrollerView concatenated to UInavigationController to make push segues but after I changed the cell SWCell it doesn’t do segues


    • hemanthgk

      hemanthgkhemanthgk

      Author Reply

      Were you able to solve the issue. I am having the same problem using it.


  • Cool Fish

    Cool FishCool Fish

    Author Reply

    It looks like if i keep the auto-generated implementation for

    – (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;

    Then i will get complaints when swiping a cell to left like the following

    Unable to simultaneously satisfy constraints.

    Probably at least one of the constraints in the following list is one you don’t want. Try this: (1) look at each constraint and try to figure out which you don’t expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you’re seeing NSAutoresizingMaskLayoutConstraints that you don’t understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)

    (

    “”,

    “”

    )

    Will attempt to recover by breaking constraint

    Break on objc_exception_throw to catch this in the debugger.

    The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in may also be helpful.


    • サンプラー

      hey have you resolved this issue? I having the same, and I don’t have any idea what to do next


      • Cool Fish

        Cool FishCool Fish

        Author Reply

        Yes, you don’t need to implement the delegate method. You just capture the button press event for table data changes.


        • ISwearImNotTrolling

          could you elaborate on you don’t need the delegate method because i have the same problem and don’t know which specific delegate your talking about


  • Rajesh Maurya

    It looks like there is problem in Xcode 6(beta). More and delete option not showing in Xcode 6(beta) while right swiping. I am implemented this code into swift. Left swipe works as usual but right swipe not shows any option.


  • Shiya

    ShiyaShiya

    Author Reply

    I downloaded the project template, compiled it on my phone and the swipe function is not working O_o, can anyone give me some help, I’m using Xcode 5.1 and iOS 7.1.


    • Tobias Mann

      the finished project have a problem somewhere, do it on your own, takes 5 mins to go through the tutorial and it works 😉


  • Ejiro Ogagarue

    HOW DO YOU EDIT THE ICON POSITION,SIZE AND CHANGE THE BACKGROUND COLOR I HATE THE YELLOW USED


  • Yan

    YanYan

    Author Reply

    Thank you so much for the tutorial! It is very helpful! Even works on iPhone6!


  • IOSBeginner

    Great Tutorial – any idea how to close the current cell when a different cell is swiped open?


  • SwedishDev

    SwedishDevSwedishDev

    Author Reply

    I’m getting an error with conflicting constrains upon running my test app with the library described in this article. Here is the error: (which repeats for each row in the table)

    “”,

    “<NSLayoutConstraint:0x7ff491f20570 SWUtilityButtonView:0x7ff491f1ef90.width ”

    Anyone got some tips on how to get rid of this error? It seems as it has to do with the width of the utility button.


  • F90530 .

    F90530 .F90530 .

    Author Reply

    Sorry to bother you guys with silly questions but I have issues with the SWTableViewCells file that we were supposed to download and add to our project on this site. I have followed the first two steps and tried to launch my project but it couldn’t because of 13 errors which are all related to the NSMutableArray+SWUtilityButton .m & .h files.

    In .h file:
    #import

    @interface NSMutableArray (SWUtilityButtons)

    “- (void)sw_addUtilityButtonWithColor:(UIColor *)color title:(NSString *)title;

    – (void)sw_addUtilityButtonWithColor:(UIColor *)color attributedTitle:(NSAttributedString *)title;

    – (void)sw_addUtilityButtonWithColor:(UIColor *)color icon:(UIImage *)icon;

    – (void)sw_addUtilityButtonWithColor:(UIColor *)color normalIcon:(UIImage *)normalIcon selectedIcon:(UIImage *)selectedIcon;”

    the problem is that it says “expected a type” for all the four and for the last two 2 and 3, respectively.

    In .m file:
    “- (void)sw_addUtilityButtonWithColor:(UIColor *)color title:(NSString *)title”

    ‘expected a type’

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.backgroundColor = color;
    [button setTitle:title forState:UIControlStateNormal];

    Use of undeclared identifier ‘button’ for all three

    #import “NSMutableArray+SWUtilityButtons.h”

    @implementation NSMutableArray (SWUtilityButtons)

    “- (void)sw_addUtilityButtonWithColor:(UIColor *)color attributedTitle:(NSAttributedString *)title

    – (void)sw_addUtilityButtonWithColor:(UIColor *)color icon:(UIImage *)icon

    – (void)sw_addUtilityButtonWithColor:(UIColor *)color normalIcon:(UIImage *)normalIcon selectedIcon:(UIImage *)selectedIcon

    for all three it states ‘expected a type’

    Do you guys maybe know how to solve this problem? I am completely new to the programming world and apologise for these silly questions. I have not changed anything in the downloaded files. Thank You in advance!


  • Chris

    ChrisChris

    Author Reply

    How do you reset the title of the leftmost right button and disable it once pressed? thanks.


  • traceur

    traceurtraceur

    Author Reply

    Is there any difference of “swipe to delete” between iOS7 and iOS8? (I am just asking for swipe to delete, not swipe for more options). My app has swipe to delete feature and it works fine on iOS8. I also tested it on several iOS7 devices. When I swipe, it does show the delete button, however, the table cell will not be deleted after I tap the delete button.


    • DB

      DBDB

      Author Reply

      I”m having this same issue with the button not displaying in ios 7 but works fine in ios8. did you solve this issue.


      • traceur

        traceurtraceur

        Author Reply

        Not yet. Hope someone can give us an answer.


  • Praveen

    PraveenPraveen

    Author Reply

    This is not working in ios 8 version device


  • Mubashir Mohammed

    I am getting parse error in iOS 8


  • ryan

    ryanryan

    Author Reply

    How would you change what happens when “More” is pressed and the otherButtonTitles:@””,@”” are then pressed……like if one of the otherButtonTitles: is pressed…i would want to log the data to the logger window of the cell.row selected. I plan i doing more than just logging this data but once I know where to edit this, i can change the rest myself.


    • ryan

      ryanryan

      Author Reply

      Nevermind. I figured it out! Let me know if anyone else needs this answer too. Not going to post an answer to my own question!!! (unless someone wants to know also!)


  • ciscoboy

    ciscoboyciscoboy

    Author Reply

    This works perfectly fine in the new xCode and IOS 8, but the question is how to add actions to the button? For example i want to add action for the Download option instead of Delete? is there anyway to add action within this code ? there are many solutions but how about this code ?


  • Ilan Levy

    Ilan LevyIlan Levy

    Author Reply

    Now in iOS 9 – we get a WARNING: WARNING: A Gesture recognizer (<UILongPressGestureRecognizer: 0x14f7f4cc0; state = Possible; view = >) was setup in a storyboard/xib to be added to more than one view (-><UITableViewCellContentView: 0x14f794150; frame = (0 0; 320 43.5); clipsToBounds = YES; opaque = NO; gestureRecognizers = ; layer = >) at a time, this was never allowed, and is now enforced. Beginning with iOS 9.0 it will be put in the first view it is loaded into.

    Does the team intend to publish a swifty solution more adapted to iOS9 ?


  • himanth maddi

    how can I manage scroll view scrolling speed?


  • Janbask – Online IT Training

    I want to say that this article is awesome, great written and include almost all vital info’s. I would like to see extra posts like this .


  • Chris H

    Chris HChris H

    Author Reply

    Nicely done. Did Apple make this feature/code available in later releases of iOS?
    Chris


  • Muhammad Usman Zia Akram

    how can i use this in swift??


  • Cooper Edmunds

    How do you change the width of the buttons?
    Thanks


  • JanBask Training

    This is another very helpful post. Thanks..really it’s very helpful for beginners as well as experienced.


  • Amir Khanzada

    How to Add image with empty title .. i don’t talk about background image remember


Shares