{"id":90,"date":"2014-04-16T17:16:44","date_gmt":"2014-04-16T08:16:44","guid":{"rendered":"http:\/\/curry.azen.co.kr\/?p=90"},"modified":"2014-04-17T10:24:25","modified_gmt":"2014-04-17T01:24:25","slug":"swipe-library-swtableviewcell","status":"publish","type":"post","link":"http:\/\/curry.azen.co.kr\/?p=90","title":{"rendered":"swipe library &#8211; SWTableViewCell"},"content":{"rendered":"<h1>SWTableViewCell<br \/>\n===============<\/h1>\n<p align=\"center\"><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/njKCjK8.gif\" alt=\"\" \/><\/p>\n<p>An easy-to-use UITableViewCell subclass that implements a swipeable content view which exposes utility buttons (similar to iOS 7 Mail Application)<\/p>\n<p>##Functionality<br \/>\n###Right Utility Buttons<br \/>\nUtility buttons that become visible on the right side of the Table View Cell when the user swipes left. This behavior is similar to that seen in the iOS apps Mail and Reminders.<\/p>\n<p align=\"center\"><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/gDZFRpr.gif\" alt=\"\" \/><\/p>\n<p>###Left Utility Buttons<br \/>\nUtility buttons that become visible on the left side of the Table View Cell when the user swipes right.<\/p>\n<p align=\"center\"><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/qt6aISz.gif\" alt=\"\" \/><\/p>\n<p>###Features<br \/>\n* Dynamic utility button scalling. As you add more buttons to a cell, the other buttons on that side get smaller to make room<br \/>\n* Smart selection: The cell will pick up touch events and either scroll the cell back to center or fire the delegate method `- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath`<\/p>\n<p align=\"center\"><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/TYGx9h8.gif\" alt=\"\" \/><\/p>\n<p>So the cell will not be considered selected when the user touches the cell while utility buttons are visible, instead the cell will slide back into place (same as iOS 7 Mail App functionality)<br \/>\n* Create utilty buttons with either a title or an icon along with a RGB color<br \/>\n* Tested on iOS 6.1 and above, including iOS 7<\/p>\n<p>##Usage<\/p>\n<p>###Standard Table View Cells<\/p>\n<p>In your `tableView:cellForRowAtIndexPath:` method you set up the SWTableView cell and add an arbitrary amount of utility buttons to it using the included `NSMutableArray+SWUtilityButtons` category.<\/p>\n<pre>- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {\r\nstatic NSString *cellIdentifier = @\"Cell\";\r\n\r\nSWTableViewCell *cell = (SWTableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];\r\n\r\nif (cell == nil) {\r\nNSMutableArray *leftUtilityButtons = [NSMutableArray new];\r\nNSMutableArray *rightUtilityButtons = [NSMutableArray new];\r\n\r\n[leftUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:0.07 green:0.75f blue:0.16f alpha:1.0]\r\nicon:[UIImage imageNamed:@\"check.png\"]];\r\n[leftUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:1.0f green:1.0f blue:0.35f alpha:1.0]\r\nicon:[UIImage imageNamed:@\"clock.png\"]];\r\n[leftUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:1.0f green:0.231f blue:0.188f alpha:1.0]\r\nicon:[UIImage imageNamed:@\"cross.png\"]];\r\n[leftUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:0.55f green:0.27f blue:0.07f alpha:1.0]\r\nicon:[UIImage imageNamed:@\"list.png\"]];\r\n\r\n[rightUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:0.78f green:0.78f blue:0.8f alpha:1.0]\r\ntitle:@\"More\"];\r\n[rightUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:1.0f green:0.231f blue:0.188 alpha:1.0f]\r\ntitle:@\"Delete\"];\r\n\r\ncell = [[SWTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle\r\nreuseIdentifier:cellIdentifier\r\ncontainingTableView:_tableView \/\/ For row height and selection\r\nleftUtilityButtons:leftUtilityButtons\r\nrightUtilityButtons:rightUtilityButtons];\r\ncell.delegate = self;\r\n}\r\n\r\nNSDate *dateObject = _testArray[indexPath.row];\r\ncell.textLabel.text = [dateObject description];\r\ncell.detailTextLabel.text = @\"Some detail text\";\r\n\r\nreturn cell;\r\n}<\/pre>\n<p>###Custom Table View Cells<\/p>\n<p>Thanks to [Matt Bowman](https:\/\/github.com\/MattCBowman) you can now create custom table view cells using Interface Builder that have the capabilities of an SWTableViewCell<\/p>\n<p>The first step is to design your cell either in a standalone nib or inside of a<br \/>\ntable view using prototype cells. Make sure to set the custom class on the<br \/>\ncell in interface builder to the subclass you made for it:<\/p>\n<p align=\"center\"><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/mfrT1Ex.png\" alt=\"\" \/><\/p>\n<p>Then set the cell reuse identifier:<\/p>\n<p align=\"center\"><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/dlmArZ1.png\" alt=\"\" \/><\/p>\n<p>When writing your custom table view cell&#8217;s code, make sure your cell is a<br \/>\nsubclass of SWTableViewCell:<\/p>\n<pre>#import\r\n\r\n@interface MyCustomTableViewCell : SWTableViewCell\r\n\r\n@property (weak, nonatomic) UILabel *customLabel;\r\n@property (weak, nonatomic) UIImageView *customImageView;\r\n\r\n@end<\/pre>\n<p>If you are using a separate nib and not a prototype cell, you&#8217;ll need to be sure to register the nib in your table view:<\/p>\n<pre>- (void)viewDidLoad\r\n{\r\n[super viewDidLoad];\r\n\r\n[self.tableView registerNib:[UINib nibWithNibName:@\"MyCustomTableViewCellNibFileName\" bundle:nil] forCellReuseIdentifier:@\"MyCustomCell\"];\r\n}<\/pre>\n<p>Then, in the `tableView:cellForRowAtIndexPath:` method of your `UITableViewDelegate` (usually your view controller), initialize your custom cell:<\/p>\n<pre>- (UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath\r\n{\r\nstatic NSString *cellIdentifier = @\"MyCustomCell\";\r\n\r\nMyCustomTableViewCell *cell = (MyCustomTableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier\r\nforIndexPath:indexPath];\r\n__weak MyCustomTableViewCell *weakCell = cell;\r\n\/\/Do any fixed setup here (will be executed once unless force is set to YES)\r\n[cell setAppearanceWithBlock:^{\r\nweakCell.containingTableView = tableView;\r\n\r\nNSMutableArray *leftUtilityButtons = [NSMutableArray new];\r\nNSMutableArray *rightUtilityButtons = [NSMutableArray new];\r\n\r\n[leftUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:0.07 green:0.75f blue:0.16f alpha:1.0]\r\nicon:[UIImage imageNamed:@\"check.png\"]];\r\n[leftUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:1.0f green:1.0f blue:0.35f alpha:1.0]\r\nicon:[UIImage imageNamed:@\"clock.png\"]];\r\n[leftUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:1.0f green:0.231f blue:0.188f alpha:1.0]\r\nicon:[UIImage imageNamed:@\"cross.png\"]];\r\n[leftUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:0.55f green:0.27f blue:0.07f alpha:1.0]\r\nicon:[UIImage imageNamed:@\"list.png\"]];\r\n\r\n[rightUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:0.78f green:0.78f blue:0.8f alpha:1.0]\r\ntitle:@\"More\"];\r\n[rightUtilityButtons sw_addUtilityButtonWithColor:\r\n[UIColor colorWithRed:1.0f green:0.231f blue:0.188 alpha:1.0f]\r\ntitle:@\"Delete\"];\r\n\r\nweakCell.leftUtilityButtons = leftUtilityButtons;\r\nweakCell.rightUtilityButtons = rightUtilityButtons;\r\n\r\nweakCell.delegate = self;\r\n} force:NO];\r\n\r\ncell.customLabel.text = @\"Some Text\";\r\ncell.customImageView.image = [UIImage imageNamed:@\"MyAwesomeTableCellImage\"];\r\n[cell setCellHeight:cell.frame.size.height];\r\nreturn cell;\r\n}<\/pre>\n<p>###Delegate<\/p>\n<p>The delegate `SWTableViewCellDelegate` is used by the developer to find out which button was pressed. There are two methods:<\/p>\n<pre>- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerLeftUtilityButtonWithIndex:(NSInteger)index;\r\n- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerRightUtilityButtonWithIndex:(NSInteger)index;<\/pre>\n<p>The index signifies which utility button the user pressed, for each side the button indices are ordered from right to left 0&#8230;n<\/p>\n<p>####Example<\/p>\n<pre class=\"lang:objc decode:true\">#pragma mark - SWTableViewDelegate\r\n\r\n- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerLeftUtilityButtonWithIndex:(NSInteger)index {\r\nswitch (index) {\r\ncase 0:\r\nNSLog(@\"check button was pressed\");\r\nbreak;\r\ncase 1:\r\nNSLog(@\"clock button was pressed\");\r\nbreak;\r\ncase 2:\r\nNSLog(@\"cross button was pressed\");\r\nbreak;\r\ncase 3:\r\nNSLog(@\"list button was pressed\");\r\ndefault:\r\nbreak;\r\n}\r\n}\r\n\r\n- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerRightUtilityButtonWithIndex:(NSInteger)index {\r\nswitch (index) {\r\ncase 0:\r\nNSLog(@\"More button was pressed\");\r\nbreak;\r\ncase 1:\r\n{\r\n\/\/ Delete button was pressed\r\nNSIndexPath *cellIndexPath = [self.tableView indexPathForCell:cell];\r\n\r\n[_testArray removeObjectAtIndex:cellIndexPath.row];\r\n[self.tableView deleteRowsAtIndexPaths:@[cellIndexPath]\r\nwithRowAnimation:UITableViewRowAnimationAutomatic];\r\nbreak;\r\n}\r\ndefault:\r\nbreak;\r\n}\r\n}<\/pre>\n<p>(This is all code from the included example project)<\/p>\n<p>###Gotchas<\/p>\n<p>#### Custom `UITableViewCell` content<br \/>\n* Accessing view of the cell object or managing the predefined content still works fine. So for example if you change the cell&#8217;s `imageView` or `backgroundView`, `SWTableViewCell` will still work as expected<br \/>\n* Don&#8217;t use accessory views in your cell, because they live above the `contentView` and will stay in place when the cell scrolls.<\/p>\n<p>#### Seperator Insets<br \/>\n* If you have left utility button on iOS 7, I recommend changing your Table View&#8217;s seperatorInset so the seperator stretches the length of the screen<\/p>\n<pre> tableView.separatorInset = UIEdgeInsetsMake(0, 0, 0, 0);<\/pre>\n<p>##Contributing<br \/>\nUse [Github issues](https:\/\/github.com\/cewendel\/SWTableViewCell\/issues) to track bugs and feature requests.<\/p>\n<p>I&#8217;m really busy in college and not actively working on this, so pull requests would be greatly appreciated.<\/p>\n<p>##Contact<\/p>\n<p><a title=\"https:\/\/github.com\/cewendel\/SWTableViewCell\/\" href=\"https:\/\/github.com\/cewendel\/SWTableViewCell\/\" target=\"_blank\">https:\/\/github.com\/cewendel\/SWTableViewCell\/<\/a><\/p>\n<p>Chris Wendel<\/p>\n<p>&#8211; http:\/\/twitter.com\/CEWendel<\/p>\n<p>## Licence<\/p>\n<p>MIT<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SWTableViewCell =============== An easy-to-use UITableViewCell subclass that implements a swipeable content view which exposes utility buttons (similar to iOS 7 Mail Application) ##Functionality ###Right Utility Buttons Utility buttons that become visible on the right side of the Table View Cell when the user swipes left. This behavior is similar to that seen in the iOS &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/curry.azen.co.kr\/?p=90\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;swipe library &#8211; SWTableViewCell&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=90"}],"version-history":[{"count":5,"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":99,"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions\/99"}],"wp:attachment":[{"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/curry.azen.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}