JASwipeCell
##Overview
An iOS 8 Mail Inspired. A UITableViewCell subclass that displays customizable left or right buttons that are revealed as the user swipes the cell in either direction. The edge-most buttons will pin to the container view and will execute an event similar to how the delete/archive button work in IOS 8 mail.
##Features
- Supports adding actionable buttons on either side of the cell.
- You can customize a button's title text and color.
- Each button will have a block handler that will execute when pressed.
- The left/right most button will pin to the top container view as the user swipes all the way. This will also execute that button's action.
- Supports IOS 7+
Example of the buttons revealing as you swipe left:
Example of the right most button pinning to the container view:
##Usage
###Available via CocoaPods
Add the following to your Podfile.
pod 'JASwipeCell'
Run pod install from your Terminal. This will install the necessary files.
###Set up the cell
First step is to subclass JASwipeCell.h. You have full control of the views rendered on this cell and they must be added as subviews to JASwipeCell's topContainerView. You can use a xib file or do this in code. The example provided is done in code using PureLayout.
###Set up the buttons
Next step is to set up the left/right buttons. I've created a JAActionButton class that has a class method to quickly create a button with a title, background color, and completion handler.
- (NSArray *)leftButtons
{
__typeof(self) __weak weakSelf = self;
JAActionButton *button1 = [JAActionButton actionButtonWithTitle:@"Delete" color:[UIColor redColor] handler:^(UIButton *actionButton, JASwipeCell*cell) {
[cell completePinToTopViewAnimation];
[weakSelf leftMostButtonSwipeCompleted:cell];
}];
JAActionButton *button2 = [JAActionButton actionButtonWithTitle:@"Mark as unread" color:kUnreadButtonColor handler:^(UIButton *actionButton, JASwipeCell*cell) {
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Mark As Unread" message:@"Done!" delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil];
[alert show];
}];
return @[button1, button2];
}
- (NSArray *)rightButtons
{
__typeof(self) __weak weakSelf = self;
JAActionButton *button1 = [JAActionButton actionButtonWithTitle:@"Archive" color:kArchiveButtonColor handler:^(UIButton *actionButton, JASwipeCell*cell) {
[cell completePinToTopViewAnimation];
[weakSelf rightMostButtonSwipeCompleted:cell];
}];
JAActionButton *button2 = [JAActionButton actionButtonWithTitle:@"Flag" color:kFlagButtonColor handler:^(UIButton *actionButton, JASwipeCell*cell) {
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Flag" message:@"Flag pressed!" delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil];
[alert show];
}];
JAActionButton *button3 = [JAActionButton actionButtonWithTitle:@"More" color:kMoreButtonColor handler:^(UIButton *actionButton, JASwipeCell*cell) {
UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"More Options" delegate:nil cancelButtonTitle:@"Cancel" destructiveButtonTitle:@"Option 1" otherButtonTitles:@"Option 2",nil];
[sheet showInView:weakSelf.view];
}];
return @[button1, button2, button3];
}###Set up the table view.
Now you must create your cell instances using the button creation methods above.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
JATableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kJATableViewCellReuseIdentifier];
[cell addActionButtons:[self leftButtons] withButtonWidth:kJAButtonWidth withButtonPosition:JAButtonLocationLeft];
[cell addActionButtons:[self rightButtons] withButtonWidth:kJAButtonWidth withButtonPosition:JAButtonLocationRight];
cell.delegate = self;
[cell configureCellWithTitle:self.tableData[indexPath.row]];
[cell setNeedsLayout];
[cell setNeedsUpdateConstraints];
[cell updateConstraintsIfNeeded];
return cell;
}###Respond to delegate methods.
There are a list of delegate methods available that get called as swipe events occur on the cell.
@protocol JASwipeCellDelegate <NSObject>
- (void)leftMostButtonSwipeCompleted:(JASwipeCell *)cell;
- (void)rightMostButtonSwipeCompleted:(JASwipeCell *)cell;
@optional
- (void)swipingRightForCell:(JASwipeCell *)cell;
- (void)swipingLeftForCell:(JASwipeCell *)cell;
@endIn the project example, swiping a cell all the way to the left will trigger the "Archive" button to execute. This will call the delegate method rightMostButtonSwipeCompleted:, which is responsible for updating the table's data and deleting the row.
- (void)rightMostButtonSwipeCompleted:(JASwipeCell *)cell
{
NSIndexPath *indexPath = [self.tableView indexPathForCell:cell];
[self.tableData removeObjectAtIndex:indexPath.row];
[self.tableView beginUpdates];
[self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
[self.tableView endUpdates];
}##Example Project An example project is provided. It requires IOS7 and can be run on device or simulator. This will work for any device size.
##Creator Jose Alvarez
##License JASwipeCell is available under the MIT license. See the LICENSE file for more info.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent