美文网首页iOS开发
UITableViewCell三种常用编辑模式:删除、插入、移动

UITableViewCell三种常用编辑模式:删除、插入、移动

作者: ME进哥哥 | 来源:发表于2019-08-10 17:51 被阅读0次

在开发中常常会有对TableViewCell编辑操作的需求,比如点击某个按钮,让cell处于编辑状态;还有向左滑动时,cell右侧出现相应按钮可对cell进行相应编辑。例如qq的好友列表,长按可以对好友列表进行分组管理,可以新增分组、删除已有分组、对分组进行移动排序等。


QQ好友分组管理.PNG
一、系统方式实现简单的删除、插入、移动

实现三个方法即可实现上图效果:
1.获取编辑样式

 - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath

UITableViewCellEditingStyle编辑样式枚举有三种,当然可以进行位运算组合

  typedef NS_ENUM(NSInteger, UITableViewCellEditingStyle) {
    UITableViewCellEditingStyleNone, 
    UITableViewCellEditingStyleDelete,
    UITableViewCellEditingStyleInsert
};

说明

UITableViewCellEditingStyleNone  没有编辑样式
UITableViewCellEditingStyleDelete  删除样式
UITableViewCellEditingStyleInsert  插入样式
UITableViewCellEditingStyleInsert | UITableViewCellEditingStyleDelete  多选模式

2.提交编辑,在这个方法根据相应的编辑样式,进行相应的数据、UI处理

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath

3.当cell处于编辑状态下时,是不能移动的,需实现这个方法,才能实现拖动Cell进行移动,

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath

4、特别说明:如果需要当Cell处于编辑状态下时,Cell可以进行拖动移动、Cell不会缩进且左侧没有插入或删除按钮。则编辑状态选择应UITableViewCellEditingStyleNone,且实现下面这个方法

//处于编辑状态下,cell是否缩进 编辑样式是UITableViewCellEditingStyleNone才有效
- (BOOL)tableView:(UITableView *)tableView shouldIndentWhileEditingRowAtIndexPath:(NSIndexPath *)indexPath
{
    return NO;
}
二、左滑cell右侧实现多个按钮
左滑cell右侧多个按钮.jpg

1、在iOS8.0之前,要实现这样的效果图,是需要自定义的,系统并未提供相关的API。在iOS8.0系统提供了一个这样的API:

//左滑右侧添加多个按钮iOS8.0出的API
- (nullable NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath

该方法返回一个UITableViewRowAction类型的数组,系统提供了两种按钮样式

  • UITableViewRowActionStyleNormal 灰底白字
  • UITableViewRowActionStyleDestructive 红底白字
    没有提供有字体大小及颜色的自定义,但可以修改背景色,使用backgroundColor来进行设置。要想自定义只能采用别的方式,下面会介绍
    2、在iOS11.0系统还提供一个新的API
- (UISwipeActionsConfiguration *)tableView:(UITableView *)tableView trailingSwipeActionsConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath

比上面那个就多了一个图片的设置,但图片会被系统渲染成白色的。只有当cell达到一定得高度时,图片和文字才会一起显示,否则只会显示图片,不会显示文字


1542110709207.jpg

具体实现

- (UISwipeActionsConfiguration *)tableView:(UITableView *)tableView trailingSwipeActionsConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UIContextualAction *collectAction = [UIContextualAction contextualActionWithStyle:UIContextualActionStyleNormal title:@"收藏" handler:^(UIContextualAction * _Nonnull action, __kindof UIView * _Nonnull sourceView, void (^ _Nonnull completionHandler)(BOOL)) {
            [self.dataSurces insertObject:@"我是新添加的" atIndex:indexPath.row];
            [tableView insertRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationBottom];
        completionHandler(YES);
    }];
    collectAction.image = [UIImage imageNamed:@"collect_icon"];
//    collectAction.backgroundColor = [UIColor greenColor];
    UIContextualAction *deleteAction = [UIContextualAction contextualActionWithStyle:UIContextualActionStyleDestructive title:@"删除" handler:^(UIContextualAction * _Nonnull action, __kindof UIView * _Nonnull sourceView, void (^ _Nonnull completionHandler)(BOOL)) {
            [self.dataSurces removeObjectAtIndex:indexPath.row];
            [tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationBottom];
        completionHandler(YES);
    }];
    //设置了图片,图片会被系统渲染成白色的
    deleteAction.image = [UIImage imageNamed:@"delete_icon"];
    return [UISwipeActionsConfiguration configurationWithActions:@[deleteAction,collectAction]];
}

这种方式有个缺点就是,图片都被渲染成了白色的了,可能有时这并不是需求想要的,那怎么办呢?需求虐我千百遍,我待需求如初恋。没关系下面我们就来看怎么去自定义

三、自定义左滑cell右侧实现多个按钮

先上张效果图


图片.jpeg

其实很简单的,只需要先用iOS8.0提供的API来实现多按钮,然后在去 API

- (void)tableView:(UITableView *)tableView willBeginEditingRowAtIndexPath:(NSIndexPath *)indexPath

重写即可,具体实现

- (void)tableView:(UITableView *)tableView willBeginEditingRowAtIndexPath:(NSIndexPath *)indexPath
{
    for (UIView *subview in tableView.subviews) {
        if ([NSStringFromClass([subview class]) isEqualToString:@"UISwipeActionPullView"]) {
            if ([NSStringFromClass([subview.subviews[0] class]) isEqualToString:@"UISwipeActionStandardButton"]) {
                UIButton *collectBtn = subview.subviews[0];
                collectBtn.backgroundColor = [UIColor greenColor];
                [collectBtn setImage:[UIImage imageNamed:@"collect_icon"] forState:UIControlStateNormal];
                [collectBtn setTitle:@"插入" forState:UIControlStateNormal];

                UIButton *deleteBtn = subview.subviews[1];
                [deleteBtn setImage:[UIImage imageNamed:@"delete_icon"] forState:UIControlStateNormal];
                [deleteBtn setTitle:@"删除" forState:UIControlStateNormal];
            }
        }
    }
}

简单吧

Demo传送门

相关文章

  • UITableViewCell三种常用编辑模式:删除、插入、移动

    在开发中常常会有对TableViewCell编辑操作的需求,比如点击某个按钮,让cell处于编辑状态;还有向左滑动...

  • vim 编辑器常用命令

    vim 编辑器常用命令说明 启动or退出vim 移动光标命令 插入模式or普通模式命令 复制删除类命令 替换更改类...

  • vim 编辑器常用命令及三种模式说明

    本文只列出我目前常用的命令 三种模式: 一、光标移动(命令行模式下) 二、复制、粘贴、删除、撤销、编辑(命令行模式...

  • Vim文本编辑命令汇总-Vim入门教程(2)

    介绍Vim三种操作模式和文本编辑命令。Vim编辑模式插入字符,行尾、行首插入,删除一个字符和删除整行命令,Vim复...

  • Vim 基本操作

    三种模式: 命令模式,可以移动光标,修改、删除、复制、搜索插入模式,通过 aio 进入,可以修改文件内容扩展模式,...

  • UITableView 编辑模式

    UITableView 编辑模式 相关方法 UITableView 插入、删除和移动表格的行和分区 (Insert...

  • VIM的三种模式和转换

    一、三种常见模式:1、命令模式或者普通模式:默认模式,可以实现移动光标,剪切和复制文本;2、插入模式或编辑模式,用...

  • VIM使用常用命令

    vim常用命令vim三种模式:命令模式、插入模式、编辑模式。使用ESC或i或:来切换模式。 命令模式(按ESC)下...

  • vim学习笔记

    vim学习笔记 移动 搜索 替换 删除、复制与粘贴 进入插入或取代的编辑模式 命令模式 vim 环境癿变更 字符编...

  • day-7 vim编辑器

    1. vim常用的三种模式 vim普通模式 光标跳转 复制与粘贴 删除、剪切、撤销 vim编辑模式 vim命令模式...

网友评论

    本文标题:UITableViewCell三种常用编辑模式:删除、插入、移动

    本文链接:https://www.haomeiwen.com/subject/ncalfqtx.html