3

I would like to edit the UITableViewRowAction of my table. My cells have rounded edges and a border, I would like to edit the style of the RowAction to match the style of my cells.

I understand that currently only backgroundColor, title and style (default, destructive, normal...) can be changed (link). However, I feel that this is a little bit too restricted? Perhaps I could subclass UITableViewRowAction to create my own look and feel? Any advice would be appreciated.

Unfortunately I can't post an example image because I don't have 10 rep yet (haha). However I think the question is simple enough to be understood without a visual representation.

Community
  • 1
  • 1
Swankzilla
  • 115
  • 1
  • 6
  • your requirement is to add border the deleted button – Ramesh Muthe Nov 13 '14 at 12:28
  • moreAction.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"temp.png"]] you can add the required image to get it – Ramesh Muthe Nov 13 '14 at 12:32
  • Thanks for the quick reply. I have tested this solution and it does work, however the animation for the delete button disappearing (once clicked) looks a bit odd because the rounded edges of the image don't actually move, instead it disappears with a straight edge rolling upwards to show blank space beneath. I realise this is probably the best solution out there for now because of the limited functionality of UITableViewRowAction; but it does seems little sloppy of the API, in my opinion! – Swankzilla Nov 13 '14 at 13:37
  • Thanks for testing it.I will post the solution in order to help others. – Ramesh Muthe Nov 14 '14 at 04:05

2 Answers2

7

As you said the only things you can change on the action are:

  1. backgroundColor
  2. style (destructive (red backgroundcolor, ...)
  3. title

In order to change the style of the UITableViewRowAction is the probable solution is adding the image using 'patternimage'.

Here is the solution for this.And I am not saying this is the exact solution, because as now we not have access to all the properties of the 'UITableViewRowAction'

- (NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewRowAction *moreAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"test" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {

    // show UIActionSheet
}];
float wwidth =[moreAction.title sizeWithAttributes:@{NSFontAttributeName:[UIFont fontWithName:@"Helvetica" size:15.0]}].width;
wwidth = wwidth+<55 change this value for exact width>;
moreAction.backgroundColor = [[UIColor alloc] initWithPatternImage:[self imageWithImage:[UIImage imageNamed:@"temp.jpg"] scaledToSize:CGSizeMake(wwidth, tableView.rowHeight)]];

UITableViewRowAction *flagAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"Flag" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
    // flag the row
}];
flagAction.backgroundColor = [UIColor yellowColor];

return @[moreAction, flagAction];
}

Note: use the High resolution image so that it works for 

iPhone 6 Plus   736x414 points    5.5"
iPhone 6        667x375 points    4.7"
iPhone 5        568x320 points    4.0"
iPhone 4        480x320 points     3.5"

Useful post on this link http://pablin.org/

pgb
  • 24,813
  • 12
  • 83
  • 113
Ramesh Muthe
  • 811
  • 7
  • 15
0

You could try using this: Custom UITableViewCell A custom UITableViewCell that supports cell dragging gesture to reveal a custom menu of buttons or other views. It supports:

  • fully customizable UIView to use as a canvas for custom buttons and views;
  • Auto Layout;
  • storyboards;
  • easy cell reuse;
  • highlight / unhighlight of cells;
  • selection / deselection of cells;
  • normal and edit mode;
  • accessory views;
  • compatible with iOS 7 and 8.
abanet
  • 1,327
  • 17
  • 22