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

来源:互联网 发布:淘宝网首页登陆电脑版 编辑:程序博客网 时间:2024/05/16 11:43

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



左滑出现删除按钮

  • 需要实现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.tableViewsetEditing:!self.tableView.editinganimated: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按钮的方法不会被调用





原创粉丝点击