UITableViewCell - 右滑、左滑等操作

1、系统自带右滑按钮

在iOS8之后,苹果官方增加了UITableVIew的右滑操作接口,即新增了一个代理方法(tableView: editActionsForRowAtIndexPath:)和一个类(UITableViewRowAction)。

代理方法返回的是一个数组,我们可以在这个代理方法中定义所需要的操作按钮(删除、置顶等),这些按钮的类就是UITableViewRowAction。这个类只能定义按钮的显示文字、背景色、和按钮事件。并且返回数组的第一个元素在UITableViewCell的最右侧显示,最后一个元素在最左侧显示。

UITableViewRowActionStyleNormal  //背景色默认是灰色
UITableViewRowActionStyleDefault = UITableViewRowActionStyleDestructive //背景色默认是红色
//让tableView可编辑
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}

- (NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //删除
    UITableViewRowAction *deleteRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"删除" handler:^(UITableViewRowAction * _Nonnull action, NSIndexPath * _Nonnull indexPath) {

        NSLog(@"点击了删除");
    }];
    deleteRowAction.backgroundColor = [UIColor greenColor];
    //置顶
    UITableViewRowAction *topRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"置顶" handler:^(UITableViewRowAction * _Nonnull action, NSIndexPath * _Nonnull indexPath) {

        NSLog(@"点击了删除置顶");
    }];

    //标记为已读
    UITableViewRowAction *readedRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDestructive title:@"标记为已读" handler:^(UITableViewRowAction * _Nonnull action, NSIndexPath * _Nonnull indexPath) {

        NSLog(@"点击了标记为已读");
    }];

    if(indexPath.section == 0 && indexPath.row == 0)
    {
        return @[deleteRowAction];
    }
    else if(indexPath.section == 0 && indexPath.row == 1)
    {
        return @[deleteRowAction, readedRowAction];
    }
    else if (indexPath.section == 1 && indexPath.row == 0)
    {
        return @[topRowAction];
    }
    else
    {
        return @[deleteRowAction, topRowAction, readedRowAction];
    }
}

效果图:

UITableViewCell - 右滑、左滑等操作_第1张图片


2、自定义右滑按钮

但是在现实开发中往往会遇到右滑cell时显示的不只是文字,可能有图片,也可能文字图片共存。这就需要我们自定义控件实现这个需求。介绍一个我封装的控件。。。

1、首先将swipe文件夹拖入你的工程中,你可以直接使用SwipeTableCell,也可以继承自SwipeTableCell,然后实现SwipeTableViewCellDelegate的代理方法,去自定义你所需要的控件的样式

/**
 *  设置cell的滑动按钮的样式 左滑、右滑、左滑右滑都有
 *
 *  @param indexPath cell的位置
 */
- (SwipeTableCellStyle)tableView:(UITableView *)tableView styleOfSwipeButtonForRowAtIndexPath:(NSIndexPath *)indexPath;

/**
 *  左滑cell时显示的button
 *
 *  @param indexPath cell的位置
 */
- (NSArray *)tableView:(UITableView *)tableView leftSwipeButtonsAtIndexPath:(NSIndexPath *)indexPath;

/**
 *  右滑cell时显示的button
 *
 *  @param indexPath cell的位置
 */
- (NSArray *)tableView:(UITableView *)tableView rightSwipeButtonsAtIndexPath:(NSIndexPath *)indexPath;

2、在SwipeButton类中给出了创建自动以控件的方法,可以只有文字、只有图片、也可以是图片文字同时存在。

/**
 *  创建左滑或右滑时的button, button只有title没有Image
 *
 *  @param title button的标题
 *  @param font  button的字体大小 默认为15
 *  @param textColor button的字体颜色 默认黑色
 *  @param backgroundColor  button的背景颜色 默认白色
 */
+ (SwipeButton *)createSwipeButtonWithTitle:(NSString *)title backgroundColor:(UIColor *)backgroundColor touchBlock:(TouchSwipeButtonBlock)block;

+ (SwipeButton *)createSwipeButtonWithTitle:(NSString *)title font:(CGFloat)font textColor:(UIColor *)textColor backgroundColor:(UIColor *)backgroundColor touchBlock:(TouchSwipeButtonBlock)block;


/**
 *   创建左滑或右滑时的button, button只有Image没有title
 */
+ (SwipeButton *)createSwipeButtonWithImage:(UIImage *)image backgroundColor:(UIColor *)color touchBlock:(TouchSwipeButtonBlock)block;

/**
 *  创建左滑或右滑时的button,文字图片同时存在,且image在上 title在下
 */
+ (SwipeButton *)createSwipeButtonWithTitle:(NSString *)title backgroundColor:(UIColor *)backgroundColor image:(UIImage *)image touchBlock:(TouchSwipeButtonBlock)block;

+ (SwipeButton *)createSwipeButtonWithTitle:(NSString *)title font:(CGFloat)font textColor:(UIColor *)textColor backgroundColor:(UIColor *)backgroundColor image:(UIImage *)image touchBlock:(TouchSwipeButtonBlock)block;

3、到这运行程序基本上你就可以看到效果。语言总是苍白无力的,到我的git上下Demo自己学习吧!感觉还行的别忘了给我个Star。

上面的动画效果参考自:https://github.com/MortimerGoro/MGSwipeTableCell

你可能感兴趣的:(iOS开发)