UI 一一 左滑删除,编辑模式,批量删除

看到标题好麻烦.直接看效果图吧

左滑出现删除按钮

• 需要实现tableView的代理方法

/**
 *  只要实现了这个方法，左滑出现Delete按钮的功能就有了
 *  点击了“左滑出现的Delete按钮”会调用这个方法
 */
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 删除模型
    [self.wineArray removeObjectAtIndex:indexPath.row];

    // 刷新
    [tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationLeft];
}

/**
 *  修改Delete按钮文字为“删除”
 */
- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return @"删除";
}

左滑出现N个按钮

• 需要实现tableView的代理方法

/**
 *  只要实现了这个方法，左滑出现按钮的功能就有了
 (一旦左滑出现了N个按钮，tableView就进入了编辑模式, tableView.editing = YES)
 */
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{

}

/**
 *  左滑cell时出现什么按钮
 */
- (NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewRowAction *action0 = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"关注" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
        NSLog(@"点击了关注");

        // 收回左滑出现的按钮(退出编辑模式)
        tableView.editing = NO;
    }];

    UITableViewRowAction *action1 = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"删除" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
        [self.wineArray removeObjectAtIndex:indexPath.row];
        [tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
    }];

    return @[action1, action0];
}

进入编辑模式

// self.tabelView.editing = YES;
[self.tableView setEditing:YES animated:YES];
// 默认情况下，进入编辑模式时，左边会出现一排红色的“减号”按钮

在编辑模式中多选

// 编辑模式的时候可以多选
self.tableView.allowsMultipleSelectionDuringEditing = YES;
// 进入编辑模式
[self.tableView setEditing:YES animated:YES];

// 获得选中的所有行
self.tableView.indexPathsForSelectedRows;

实现上面效果图的思路:

1.  整个界面是由橙色的UIView 和 UITableView组成的,所以在storyboard中用UIVIewController就行

2.  创建一个酒模型,用来给每一行cell设置数据.ZYWine

3.  创建一个继承UITableViewCell 的ZYWineCell 用来接收酒模型传来的数据

4.  实现tableView的数据源方法,给ZYWineCell 设置每一行数据

5. 对每一个cell左滑,显示 关注 和 删除 按钮,当点击关注后,退出编辑模式.当点击删除按钮,删除这个cell

6. 当点击编辑按钮,设置编辑模式.并把删除按钮显示出来

[self.tableView setEditing:!self.tableView.editing animated:YES];

7. 选中的每一行cell,点击删除按钮,删除指定的cell.再点击编辑按钮退出编辑模式

8. 通过对模型的修改来达到增,删,改操作

具体代码如下:

ZYWine 文件

/** 酒数据模型 */
@interface ZYWine : NSObject

/** 图片名 */
@property (nonatomic, copy) NSString *image;

/** 价格 */
@property (nonatomic, copy) NSString *money;

/** 酒名称 */
@property (nonatomic, copy) NSString *name;

@end

@implementation ZYWine

@end

ZYWineCell文件

#import <UIKit/UIKit.h>
@class ZYWine;
// 每一个cell
@interface ZYWineCell : UITableViewCell

/** 酒的数据模型 */
@property(nonatomic,strong)ZYWine * wine;

@end

#import "ZYWine.h"
@implementation ZYWineCell

// 重写wine的set方法,把模型中的数据赋值进来
- (void)setWine:(ZYWine *)wine
{
    _wine = wine;
    
    self.imageView.image = [UIImage imageNamed:wine.image];
    self.textLabel.text = wine.name;
    self.detailTextLabel.text = [NSString stringWithFormat:@"¥%@",wine.money];
    self.detailTextLabel.textColor = [UIColor orangeColor];
}

@end

ViewController文件

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end

#import "ViewController.h"
#import "MJExtension.h"
#import "ZYWineCell.h"
#import "ZYWine.h"

@interface ViewController () <UITableViewDataSource,UITableViewDelegate>
@property (weak, nonatomic) IBOutlet UITableView *tableView;

/** 酒模型数组,装的都是酒模型 */
@property (strong,nonatomic) NSMutableArray *wineArray;

/** 删除按钮 */
@property (weak, nonatomic) IBOutlet UIButton *deleteBtn;


@end

@implementation ViewController

// 懒加载
- (NSMutableArray *)wineArray
{
    if (!_wineArray) {
        _wineArray = [ZYWine mj_objectArrayWithFilename:@"wine.plist"];
    }
    return _wineArray;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 告诉tableView在编辑模式下可以多选
    self.tableView.allowsMultipleSelectionDuringEditing = YES;
    // 隐藏删除按钮
    self.deleteBtn.hidden = YES;
}

#pragma -mark 按钮的点击方法
/**
    以后想要修改tableView上面显示的数据,要通过模型去决定
 
 */

/** 编辑按钮 */
- (IBAction)editorBtn {
    // 设置编辑模式
    //    self.tableView.editing = !self.tableView.editing; // 没有动画效果
    [self.tableView setEditing:!self.tableView.editing animated:YES];

    // 当在编辑模式的情况下,显示删除按钮,不再编辑模式下隐藏删除按钮
    self.deleteBtn.hidden = !self.tableView.isEditing;
    
}

/** 删除按钮 */
- (IBAction)removeBtn {
    //注意: 千万不要一边遍历一边删除,因为每删除一个元素,其他元素的索引可能会发生变化
    //1. 先把用户选中的每一个cell的索引保存在一个数组中,然后再把这个数组删除
    NSMutableArray *deleteWine = [NSMutableArray array];
    
    //2. 拿到用户选中的每一个索引
//    self.tableView.indexPathsForSelectedRows; // 当前用户选中这些行的索引.返回一个数组
    //2.1 从用户选中行的索引数组中 拿到当前选中的每一个索引
    for (NSIndexPath *indexPath in self.tableView.indexPathsForSelectedRows) {
        //2.2 根据拿到选中的每一个索引,找到选中的那一行并添加到数组中
        [deleteWine addObject:self.wineArray[indexPath.row]];
    }
    
    //3. 删除这些选中的cell(模型)
    [self.wineArray removeObjectsInArray:deleteWine];
    
    //4. 刷新表格
    // 注意: 此时删除的索引数组 就是用户选中的行
    [self.tableView deleteRowsAtIndexPaths:self.tableView.indexPathsForSelectedRows withRowAnimation:UITableViewRowAnimationAutomatic];
}



#pragma -mark 实现数据源方法
/** 有多少行数据 */
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.wineArray.count;
}

/** 每一行数据的内容 */
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//    NSLog(@"cellForRowAtIndexPath--%ld",indexPath.row);
    // 定义一个重用标识
    static NSString *ID = @"wine";
    ZYWineCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    // 判断缓存池中是否有可重用的cell,如果没有就创建
    if (cell == nil) {
        cell = [[ZYWineCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
    }
    
    // 改变cell的前景色
    cell.tintColor = [UIColor redColor];
    
    // 设置每一行数据
    cell.wine = self.wineArray[indexPath.row];
    
    return cell;
}

#pragma -mark 代理方法


/**
 第一个作用:
 只要实现这个方法,就拥有左滑删除功能
 @param indexPath 用户滑动的哪一行
 
 第二个作用:
 点击左滑出现的Delete按钮,回调用这个方法
 
 */
//- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
//{
//    //删除哪一行
//    [self.wineArray removeObjectAtIndex:indexPath.row];
//    [self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationRight];
//}
//
///**
//    修改系统默认Delete按钮的文字
// */
//- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath
//{
//    return @"删除";
//}


/**
    左滑出现多个按钮
 */
/** 注意: 当使用这个方法设置多个左滑按钮的时候,系统默认的Delete按钮的方法不会被调用 */
- (NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // tableView一般有编辑模式
    /*
        self.tableView.editing = NO; //一般情况下默认为NO,当滑动cell的时候,就改为YES.
     */
    UITableViewRowAction *action = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"关注" handler:^(UITableViewRowAction * _Nonnull action, NSIndexPath * _Nonnull indexPath) {
        // 如果关注之后要回到原来的状态需要.退出编辑模式
        self.tableView.editing = NO;
    }];
    action.backgroundColor = [UIColor orangeColor];
    
    /*
     UITableViewRowActionStyleDestructive 这个样式,当设置删除的时候使用,因为是红色!
     */
    UITableViewRowAction *action2 = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDestructive title:@"删除" handler:^(UITableViewRowAction * _Nonnull action, NSIndexPath * _Nonnull indexPath) {
        
        // 在这个block代码块中写点击按钮后的操作
        // 删除哪一行
        [self.wineArray removeObjectAtIndex:indexPath.row];
        [self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationRight];
        
    }];
    
    return @[action2,action];
}

@end

注意点:

   1. 千万不要一边遍历一边删除,因为每删除一个元素,其他元素的索引可能会发生变化

 2.  当使用多个左滑按钮方法的时候,系统默认的Delete按钮的方法不会被调用