MGSwipeTableCell使用以及常用侧滑效果实践
2017-12-08 本文已影响436人
可惜你不是我的双子座
开发中经常用到侧滑功能，如QQ、微信，当然还有简书，这里不介绍系统的侧滑方法，介绍一个强大的第三方库MGSwipeTableCell，这里可以看看官方的效果
官方效果.gif
来两张效果图
纯文字.png
带图片.png
下面看看如何使用
1.继承于MGSwipeTableCell
@interface jianShuTableViewCell : MGSwipeTableCell
2.设置代理对象
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
jianShuTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kJianShuCell forIndexPath:indexPath];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
cell.delegate = self;//设置代理
return cell;
}
3.实现代理方法，主要是下面这两个方法
启用/禁用滑动手势 ，如果允许滑动，返回YES
-(BOOL) swipeTableCell:(MGSwipeTableCell*) cell canSwipe:(MGSwipeDirection) direction;
设置滑动按钮和滑动/扩展设置
-(NSArray*) swipeTableCell:(MGSwipeTableCell*) cell swipeButtonsForDirection:(MGSwipeDirection)direction
swipeSettings:(MGSwipeSettings*) swipeSettings expansionSettings:(MGSwipeExpansionSettings*) expansionSettings;
在实现功能之前 先来看看常用一些属性
- 滑出动画
@property (nonatomic, assign) MGSwipeTransition transition;
- 扩展之后出发button的下标值 （特别提醒： 如果不需要扩展属性，不写这就代码就正常了，被这个属性搞了很久）
@property (nonatomic, assign) NSInteger buttonIndex;
- 扩展填充单元格时是否弹回到其初始位置,如果为NO，则弹回到初始位置(试一试，就会发现区别)
@property (nonatomic, assign) BOOL fillOnTrigger;
- 滑动cell时触发扩展的比例阈值。 默认值1.5
@property (nonatomic, assign) CGFloat threshold;
- 扩展单元格时的颜色
@property (nonatomic, strong, nullable) UIColor * expansionColor;
- 扩展单元格时字体字体布局
@property (nonatomic, assign) MGSwipeExpansionLayout expansionLayout;
- 那么简书的滑动效果，设置属性，大家看名字就明白了
-(void) centerIconOverText;
-(void) centerIconOverTextWithSpacing: (CGFloat) spacing; // 可以设置图片和文字的间隔
注意 如果我们要适配滑出button的大小，可以设置这个属性
// 每一个button的宽度
CGFloat padding = 25;
说了这么多，看具体的实现(包括QQ样式和简书样式)
-(nullable NSArray<UIView*>*) swipeTableCell:(nonnull MGSwipeTableCell*) cell swipeButtonsForDirection:(MGSwipeDirection)direction
swipeSettings:(nonnull MGSwipeSettings*) swipeSettings expansionSettings:(nonnull MGSwipeExpansionSettings*) expansionSettings {
swipeSettings.transition = MGSwipeTransitionBorder; // 滑出动画
__weak ViewController *weakSelf = self;
if (direction == MGSwipeDirectionLeftToRight) {
// 扩张之后出发button的下标值
expansionSettings.buttonIndex = 0;
// 扩张填充单元格时是否弹回到其初始位置,如果为NO，则弹回到初始位置
expansionSettings.fillOnTrigger = YES;
// 尺寸比例阈值触发扩展按钮。 默认值1.5
expansionSettings.threshold = 1.5;
// 扩张单元格时的颜色
expansionSettings.expansionColor = [UIColor redColor];
// 扩张单元格时字体字体布局
expansionSettings.expansionLayout = MGSwipeExpansionLayoutBorder;
// 每一个button的宽度
CGFloat padding = 25;
MGSwipeButton * edit = [MGSwipeButton buttonWithTitle:@"置顶" backgroundColor:[UIColor colorWithRed:243/256.0 green:243/256.0 blue:243/256.0 alpha:1] padding:padding callback:^BOOL(MGSwipeTableCell *sender) {
NSIndexPath *indexPath = [weakSelf.tableView indexPathForCell:sender];
UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:nil message:[NSString stringWithFormat:@"右滑--点击了第%ld个cell的置顶",indexPath.row] preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *ok = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
[alertVC addAction:ok];
[weakSelf presentViewController:alertVC animated:YES completion:nil];
return YES; // 设置为YES 点击会滑动原始位置，否则不做任何处理
}];
MGSwipeButton * delete = [MGSwipeButton buttonWithTitle:@"删除" backgroundColor:[UIColor redColor] padding:padding callback:^BOOL(MGSwipeTableCell *sender) {
NSIndexPath *indexPath = [weakSelf.tableView indexPathForCell:sender];
[self.dataArray removeObjectAtIndex:indexPath.row]; //数据源删除
[self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationLeft];
return YES;
}];
return @[delete,edit];
}else {
expansionSettings.fillOnTrigger = YES;
expansionSettings.threshold = 1.5;
CGFloat padding = 10;
MGSwipeButton *edit = [MGSwipeButton buttonWithTitle:@"编辑" icon:[UIImage imageNamed:@"edit"] backgroundColor:[UIColor colorWithRed:243/256.0 green:243/256.0 blue:243/256.0 alpha:1] padding:padding callback:^BOOL(MGSwipeTableCell *sender) {
NSIndexPath *indexPath = [weakSelf.tableView indexPathForCell:sender];
UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:nil message:[NSString stringWithFormat:@"左滑--点击了第%ld个cell的编辑",indexPath.row] preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *ok = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
[alertVC addAction:ok];
[weakSelf presentViewController:alertVC animated:YES completion:nil];
return YES;//弹回原来状态
}];
[edit centerIconOverTextWithSpacing:7];
// 设置图片颜色
//[edit iconTintColor:[UIColor colorWithRed:56/256.0 green:56/256.0 blue:56/256.0 alpha:1]];
MGSwipeButton *delete = [MGSwipeButton buttonWithTitle:@"删除" icon:[UIImage imageNamed:@"delete"] backgroundColor:[UIColor colorWithRed:243/256.0 green:243/256.0 blue:243/256.0 alpha:1] padding:padding callback:^BOOL(MGSwipeTableCell *sender) {
NSIndexPath *indexPath = [weakSelf.tableView indexPathForCell:sender];
UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:nil message:[NSString stringWithFormat:@"左滑--点击了第%ld个cell的删除",indexPath.row] preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *ok = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
[alertVC addAction:ok];
[weakSelf presentViewController:alertVC animated:YES completion:nil];
return NO;
}];
[delete centerIconOverTextWithSpacing:7];
MGSwipeButton *issue = [MGSwipeButton buttonWithTitle:@"公开发布" icon:[UIImage imageNamed:@"issue"] backgroundColor:[UIColor colorWithRed:243/256.0 green:243/256.0 blue:243/256.0 alpha:1] padding:padding callback:^BOOL(MGSwipeTableCell *sender) {
NSIndexPath *indexPath = [weakSelf.tableView indexPathForCell:sender];
UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:nil message:[NSString stringWithFormat:@"左滑--点击了第%ld个cell的公开发布",indexPath.row] preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *ok = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
[alertVC addAction:ok];
[weakSelf presentViewController:alertVC animated:YES completion:nil];
return NO;
}];
[issue centerIconOverTextWithSpacing:7];
MGSwipeButton *set = [MGSwipeButton buttonWithTitle:@"文集设置" icon:[UIImage imageNamed:@"set"] backgroundColor:[UIColor colorWithRed:243/256.0 green:243/256.0 blue:243/256.0 alpha:1] padding:padding callback:^BOOL(MGSwipeTableCell *sender) {
NSIndexPath *indexPath = [weakSelf.tableView indexPathForCell:sender];
UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:nil message:[NSString stringWithFormat:@"左滑--点击了第%ld个cell的文集设置",indexPath.row] preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *ok = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
[alertVC addAction:ok];
[weakSelf presentViewController:alertVC animated:YES completion:nil];
return NO;
}];
[set centerIconOverTextWithSpacing:7];
return @[set,issue,delete,edit];
}
return nil;
}
