一、需求
1、UIScrollView上有两个子控件UITableView(分别称作table1,table2)水平布局,作为左右滑动的分页
2、第一个UITableView的cell元素支持左滑弹出删除按钮删除和可选择删除功能
二、遇到的问题
1、table1元素左滑时UIScrollview会将该手势捕获导致左滑删除按钮不显示
2、进入编辑模式table1需要有可以选择的功能,table1编辑模式下的cell选中和不选中的图片需要替换
3、左滑删除的图片需要替换
4、ios11之前和ios11之后cell的删除左滑删除按钮弹出后层级有变化
三、手势问题解决
1、创建UIScrollView的拓展类,并重写shouldRecognizeSimultaneouslyWithGestureRecognizer方法,该方法返回YES表示手势向下传递
//是否支持多手势触发,返回YES,则可以多个手势一起触发方法,返回NO则为互斥
//是否允许多个手势识别器共同识别,一个控件的手势识别后是否阻断手势识别继续向下传播,默认返回NO;
//如果为YES,响应者链上层对象触发手势识别后,如果下层对象也添加了手势并成功识别也会继续执行,否则上层对象识别后则不再继续传播
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
if (gestureRecognizer.state != 0) {
NSLog(@"gestureRecognizer.state != 0");
return YES;
} else {
NSLog(@"gestureRecognizer.state == 0");
return NO;
}
}
开始左滑时需要让uiscrollView不能滚动,结束删除编辑后需要让uiscrollview能够滚动。开始左滑和结束删除编辑会回调下面两个方法,beginEditingBlock和endEditingBlock分别是禁止滚动和允许滚动方法。
- (void)tableView:(UITableView *)tableView willBeginEditingRowAtIndexPath:(NSIndexPath *)indexPath {
self.beginEditingBlock();
}
//结束左滑
- (void)tableView:(UITableView *)tableView didEndEditingRowAtIndexPath:(nullable NSIndexPath *)indexPath {
self.endEditingBlock();
}
四、删除状态和多选状态兼容
点击右上角编辑按钮tableview进入编辑状态,此时可以多选cell
//编辑状态下 删除状态|多选状态
-(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (tableView.isEditing) {//点击右上角编辑按钮tableview进入编辑状态,此时可以多选cell
// 多选
return UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert;
}else{
// 删除
return UITableViewCellEditingStyleDelete;
}
}
//编辑状态下可编辑的indexpath
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}
此时可以响应tableview的didselect和didDeselect方法,用NSMutableSet数组保存是否选中的元素index,在显示的时候根据是否选中显示我们自定义的图片
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
Cell *chatCell = (Cell *)cell;
//是否在编辑状态
if(self.mainTableV.isEditing == YES){
//判断选中的set里面是否有该行
NSInteger index = indexPath.row;
if([self.chooseSet containsObject:[NSNumber numberWithLong:index]]){
UIImageView *imageView = [[[cell.subviews lastObject]subviews]firstObject];
imageView.image = [UIImage imageNamed:@"choose"];
}
else{
UIImageView *imageView = [[[cell.subviews lastObject]subviews]firstObject];
imageView.image = [UIImage imageNamed:@"nochoose"];
}
}
}
}
五、左滑删除按钮的操作
实现editActionsForRowAtIndexPath回调,编辑左滑按钮数组,可以实现多个左滑按钮,此处只实现删除按钮
//实现删除按钮
- (NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath {
// 这里的标题我使用的 4 个空格进行占位
UITableViewRowAction *action = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@" " handler:^(UITableViewRowAction * _Nonnull action, NSIndexPath * _Nonnull indexPath) {
//点击按钮的操作实现
}];
return @[action];
}
六、左滑按钮的图片替换(重点)
ios11之前,可以在自定义的cell里实现layoutsubviews方法,找到删除按钮控件并替换图片。到了ios11之后左滑cell删除按钮的视图层级已经不在cell里面,所以不能用此方法去重新设置删除按钮图片
我们来看下左滑时cell的层级,以项目中聊天元素McChatCell左滑为例,测试机ios10的左滑cell层级:
UITableViewCellActionButton是左滑出现的按钮层级,它在MCChatCell的层级下面,是UITableViewCellActionButton这个视图。
测试机ios13的左滑cell层级:
ios11之后左滑导致整个cell被包裹在UITableViewCellSwipeContainerView这个控件里面,UISwipeActionStandardButton是左滑出现的删除按钮视图。
明显可以看到左滑出删除按钮时测试机ios10系统删除按钮在自定义cell层级内,但是测试机ios13的删除按钮层级和自定义cell处于同一层层级,所以ios11之后不能使用重写自定义cell的layoutsubviews方式去修改删除按钮的图片。
-(void)layoutSubviews{
[super layoutSubviews];
//遍历子视图,找出左滑按钮UITableViewCellDeleteConfirmationView
//ios11之前
NSString *systemVersion = [[UIDevice currentDevice] systemVersion];
if(systemVersion.floatValue < 11.0){
for (UIView *subView in self.subviews)
{
if([subView isKindOfClass:NSClassFromString(@"UITableViewCellDeleteConfirmationView")])
{
for (UIButton *btn in subView.subviews) {
if ([btn isKindOfClass:[UIButton class]]) {
//更改左滑按钮样式自定义
[btn setImage:[UIImage imageNamed:@"mc_message_delete"] forState:UIControlStateNormal];
[btn setBackgroundColor:McHexColor(0xEC6260)];
}
}
}
}
}
}
ios11之后可以直接实现uitableview的代理trailingSwipeActionsConfigurationForRowAtIndexPath便可以实现删除图片的自定义
// ios11之后的tableview提供的修改删除按钮样式的回调
-(UISwipeActionsConfiguration *)tableView:(UITableView *)tableView trailingSwipeActionsConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath{
//删除
if (@available(iOS 11.0, *)) {
mcWeakSelf(weakSelf);
UIContextualAction *delete = [UIContextualAction contextualActionWithStyle:UIContextualActionStyleDestructive title:@" " handler:^(UIContextualAction * _Nonnull action, __kindof UIView * _Nonnull sourceView, void (^ _Nonnull completionHandler)(BOOL)) {
//实现删除按钮点击操作
}];
delete.image = [UIImage imageNamed:@"delete"];//这里还可以设置图片
UISwipeActionsConfiguration *config = [UISwipeActionsConfiguration configurationWithActions:@[delete]];
return config;
} else {
return nil;
}
}
总结
做这个模块功能踩了很多坑,主要是uitableview的代理和一些处理方法在系统升级后有了改动,cell左滑后层级也有变化,在修改删除按钮和多选按钮图片的方式也要做响应修改。而且table的一些代理方法达到的效果有重叠,比如trailingSwipeActionsConfigurationForRowAtIndexPath和editActionsForRowAtIndexPath实现点击删除按钮方法,但是trailingSwipeActionsConfigurationForRowAtIndexPath只有在ios11之后才有效,而且如果不实现editActionsForRowAtIndexPath这个方法cell左滑也不会出现删除按钮效果,所以ios11之后这两个方法都需要实现,这些很容易让人迷惑