UITableViewCell单多行操作(多行删除)
2016-07-07 本文已影响197人
smile丽语
首先我们来了解iOS的单行删除：
在 tableView 中有时候我们会对其进行增删操作,主要是使用系统的,而不是自定义的.
对于系统的可编辑状态我们可以看到有三种:
UITableViewCellEditingStyleNone,
UITableViewCellEditingStyleDelete,
UITableViewCellEditingStyleInsert
接着我们再来了解iOS的多行操作;比如下面的图所示:
如果UI不是大变动这时候没必要自定义了.其实这个系统也是给写好的.而且对于 cell 的循环利用问题已经做过处理了.
下面看一下重点,实现这个多选有两种方法:
1>使用 tableView 的属性:
@property (nonatomic) BOOL allowsMultipleSelectionDuringEditing
allowsMultipleSelectionDuringEditing这个属性默认是 NO, 设置成 YES. 就是出现多选.
2>使用 tableView 的代理方法.我们知道上面代理只有三个选项,没有多选的枚举值.
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
// 当我们 使用两个枚举值的按位或时,就会发现多选出现了.
return UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert;
}
当然如果需要这种效果,不要忘记设置为可编辑[self setEditing:YES animated:YES];
注意:如果需要自定义多选效果的话,一定要在数据模型中定义是否选中状态，否则 cell 循环利用,会使得选中的行有问题. 删数据时要注意的是删除相应数据后, 重新刷新一下表格.删除的数据,和删除的表格一定要对应起来.
1> 左滑出现删除按钮
// 1.确保cell 可以被编辑
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}
// 2.左滑后点击 delete 之后,会调用下面的方法,
// PS:这个方法必须写, 否则UITableViewRowAction 在ios9中正常 在ios8中无法滑动
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"%@", indexPath);
}
// 注意:这个方法可以不去写,如果写了必须 return 的是UITableViewCellEditingStyleDelete,否则不会出现侧滑效果
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
return UITableViewCellEditingStyleDelete;
}
// 3.如果希望修改标题的话.
- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath {// 测试用
return @"haha";
}
由于现在越来越多的新需求产生,很多时候我们侧滑会出多个选项.从 iOS 以后,苹果也有了相应的方法:
- (NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath {
// 使用 Block 回调,实现点击后的方法
UITableViewRowAction *action = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"增加" handler:^(UITableViewRowAction * _Nonnull action, NSIndexPath * _Nonnull indexPath) {
NSLog(@"%@", indexPath);
}];
UITableViewRowAction *action1 = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"减少" handler:^(UITableViewRowAction * _Nonnull action, NSIndexPath * _Nonnull indexPath) {
NSLog(@"%@", indexPath);
}];
// 苹果的习惯,右侧的多个按钮,显示位置是反着的
return @[action, action1];
}
现在下面是自定义实现 多行删除 的部分代码：
// 消息列表数组
@property (nonatomic, strong) NSMutableArray *messageList;
// 编辑按钮
@property (nonatomic, weak) UIButton *editBtn;
// 多选数组
@property (nonatomic, strong) NSMutableArray *selectedEditList;
// 消息主键
@property (nonatomic, copy) NSString *pushId;
#pragma mark - 懒加载
- (NSMutableArray *)messageList {
if (!_messageList) {
_messageList = [NSMutableArray array];
}
return _messageList;
}
- (NSMutableArray *)selectedEditList {
if (!_selectedEditList) {
_selectedEditList = [NSMutableArray array];
}
return _selectedEditList;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = QTXBackgroundColor;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
// 隐藏无数据的cell
self.tableView.tableFooterView = [[UIView alloc] init];
self.navigationItem.title = @"系统消息";
// 编辑按钮
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn addTarget:self action:@selector(editClick:) forControlEvents:UIControlEventTouchUpInside];
[btn setTitle:@"编辑" forState:UIControlStateNormal];
[btn setTitle:@"取消" forState:UIControlStateSelected];
[btn setTitleColor:QTXNavTitleColor forState:UIControlStateNormal];
btn.titleLabel.font = [UIFont systemFontOfSize:14];
// 让按钮内部的所以内容右对齐
btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
btn.size = CGSizeMake(44, 44);
self.editBtn = btn;
UIBarButtonItem *editItem = [[UIBarButtonItem alloc] initWithCustomView:btn];
self.navigationItem.rightBarButtonItem = editItem;
}
- (void)editClick:(UIButton *)btn {
btn.selected = !btn.selected;
if (btn.selected) {
self.deleteView.hidden = NO;
for (QTXSystemMessageModel *model in self.messageList) {
model.edit = YES;
model.checked = NO; // 选中编辑状态时 默认都是未选中
}
} else {
self.deleteView.hidden = YES;
[self.selectedEditList removeAllObjects];
for (QTXSystemMessageModel *model in self.messageList) {
model.edit = NO;
}
}
[self.tableView reloadData];
}
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.messageList.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
QTXSystemMessageListCell *cell =[QTXSystemMessageListCell cellWithTableView:tableView];
if (self.messageList.count) {
QTXSystemMessageModel *model = self.messageList[indexPath.row];
cell.model = model;
}
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath {
QTXSystemMessageModel *model = self.messageList[indexPath.row];
return model.cellH; // 自适应消息内容高度
}
#pragma mark - UITableViewDelegate
// 选中当前行已读
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
QTXSystemMessageModel *model = self.messageList[indexPath.row];
// 编辑状态 点击事件
if (self.editBtn.selected) {
model.checked = !model.isChecked;
[self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
if (model.isChecked) {
[self.selectedEditList addObject:model];
} else {
[self.selectedEditList removeObject:model];
}
} else {
// 取出模型判断是否已读，1）已读直接return，
if ([model.pushStatus isEqualToString:@"1"]) return；
#warning todo :
// 2) 未读点击选中发送请求修改状态已读
}
}
//先要设置Cell可编辑
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
//定义编辑样式
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
return UITableViewCellEditingStyleDelete;
}
//进入编辑模式，按下出现的编辑按钮后 编辑状态删除
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
QTXSystemMessageModel *model = self.messageList[indexPath.row];
[self uploadDeleteData:model.pushId reloadData:indexPath];
}
- (void)uploadDeleteData:(NSString *)pushId reloadData:(NSIndexPath *)indexPath {
#warning todo :
// 1.发送删除请求
// 2.删除成功后记得 移除当前模型的数据 和相对应的数据源cell
/*
if (indexPath) {
[weakSelf.messageList removeObjectAtIndex:indexPath.row]; // 移除当前模型的数据
[weakSelf.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationRight]; // 移除当前相应的数据源cell
}
[weakSelf.tableView reloadData];
*/
}
// 在请求消息数据方法里需要加载调用这个方法
/*
// 当前系统消息列表
NSArray *currentPageArray = [QTXSystemMessageModel loadSystemMessageFromJson:json[@"data"]];
[self currentEditStatus:currentPageArray];
// 所有系统消息列表
[weakSelf.messageList addObjectsFromArray:currentPageArray];
*/
- (void)currentEditStatus: (NSArray *)currentPageArray {
if (self.editBtn.selected) {
for (QTXSystemMessageModel *model in currentPageArray) {
model.edit = YES;
}
} else {
for (QTXSystemMessageModel *model in currentPageArray) {
model.edit = NO;
}
}
}
// 点击删除事件
- (void)deleteBtnClick {
for (QTXSystemMessageModel *model in self.selectedEditList) {
[self uploadDeleteData:model.pushId reloadData:nil];
}
[self.messageList removeObjectsInArray:self.selectedEditList];
[self.tableView reloadData];
[self editClick:self.editBtn];
}
效果如下：
1.png
2.png
