A custom UITableViewCell that supports cell dragging gesture to reveal a custom menu of buttons or other views. It supports:
- fully customizable
UIViewto 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.
BMXSwipableCell try to mimic the original behaviour of iOS7 Mail App by all aspects.
BMXSwipableCell is storyboard-friendly as does not implements cell contents on its own but uses the elements defined in Interface Builder. It is of course possible to implement the content by code.
BMXSwipableCell is generic in terms of what to show when a cell is swiped. It could be two buttons, one buttons or an entirely different content. For this reason BMXSwipableCell does not implement "More" and "Delete" buttons on its own, but it exports a basement view, that is the view underneath the original content view defined in Interface Builder. In tableView:cellForRowAtIndexPath it is then possible to add the desidered buttons or view.
Add pod 'BMXSwipableCell' to your Podfile.
Drag BMXSwipableCellDemo/BMXSwipableCell folder into your project and add it to your targets.
- If you're using Interface Builder, define the
Custom Classof the cell asBMXSwipableCell. If you're going by code, registerBMXSwipableCellwith yourUITableView. - Implement the
tableView:cellForRowAtIndexPathmethod and configure the cell as desired. Here it is done by a category:
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
BMXSwipableCell *cell = (BMXSwipableCell *)
[tableView dequeueReusableCellWithIdentifier: @"Cell"
forIndexPath: indexPath];
[cell configureCellForItem: [_data objectAtIndex: indexPath.row]];
return cell;
} Before adding subviews to the basement you can check if the cell was already initialized using the property basementConfigured (cell that get reused can already have the custom basement content):
@implementation BMXSwipableCell (ConfigureCell)
- (void)configureCellForItem:(BMXDataItem*)item
{
CGFloat cellHeight = CGRectGetHeight(self.bounds);
CGFloat x = self.basementVisibleWidth - cellHeight * 2;
//
// configure cell only if not already done
//
if (!self.basementConfigured) {
// first button...
//
// delete button
//
UIButton *deleteButton = [UIButton buttonWithType:UIButtonTypeCustom];
deleteButton.backgroundColor =
[UIColor colorWithRed:1.0f green:0.231f blue:0.188f alpha:1.0f];
deleteButton.frame = CGRectMake(x + cellHeight, 0, cellHeight, cellHeight);
[deleteButton setTitle:@"Delete" forState:UIControlStateNormal];
[deleteButton setTitleColor:[UIColor whiteColor]
forState: UIControlStateNormal];
[deleteButton addTarget: self
action: @selector(userPressedDeleteButton:)
forControlEvents: UIControlEventTouchUpInside];
[self.basementView addSubview: deleteButton];
}
// configure cell contents
}
//... more- Add few methods to your
UITableViewController/UITableViewDelegateto manage automatic hiding of basements when device is rotated or when the list is scrolled:
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
duration:(NSTimeInterval)duration
{
[super willRotateToInterfaceOrientation: toInterfaceOrientation
duration: duration];
[BMXSwipableCell coverBasementOfAllCells];
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[BMXSwipableCell coverBasementOfAllCells];
}This code is also available in the UITableViewController+BMXSwipableCellSupport category for your convenience.
Check out the sample project for a complete usage example.
- Remember to set
Custom ClasstoBMXSwipableCell. - To always get correct background colors (both in normal and editing modes), configure the
Backgroundproperty in both cell and content view.
- Original idea, tutorial and code by Ash Furrow - UITableViewCell-Swipe-for-Options
- Strategy to be able to let UITableView / UITableViewCell do the highlight / selection by richardmarktl - SMMoreOptionsCell
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent