tableViewCell删除按钮自定义

tableViewCell删除按钮自定义

在做列表删除的时候，我们往往要根据UI的设计图来重新设计，因此可能会走很多弯路；这里有一个简单的办法，可以做出跟UI设计图一样的效果，使用方式简单，效果图如下

通过reveal我们可以看到，在调用删除按钮的时候，cell中会多出来一个子视图UITableViewCellDeleteConfirmationView，这个子视图就包含了删除按钮，于是，我们就可以监听cell滑动时候的事件，来获取到这个button，进而修改成我们想要的样式
查看苹果官方文档可以找到这样两个方法

- (void)willTransitionToState:(UITableViewCellStateMask)state NS_AVAILABLE_IOS(3_0);
- (void)didTransitionToState:(UITableViewCellStateMask)state NS_AVAILABLE_IOS(3_0);

这样我们就可以监控cell的变化了。

但是，如果我们仅仅只是用系统提供的button的话，在修改的完成之后，系统内部会将文字调整为居中，这样就达不到我们想要的效果了。所以需要我们可以自定义一个和系统按钮一样的父视图，到这样式基本上就完成了，

- (void)didTransitionToState:(UITableViewCellStateMask)state {
    [super didTransitionToState:state];
    if ((state & UITableViewCellStateShowingDeleteConfirmationMask) == UITableViewCellStateShowingDeleteConfirmationMask) {
        for (UIView *subView in self.subviews) {
            if ([subView isKindOfClass:NSClassFromString(@"UITableViewCellDeleteConfirmationView")]) {
                for (UIView *aSubView in subView.subviews) {
                    if ([aSubView isKindOfClass:[UIButton class]]) {
                        //原有的系统button在显示的时候会将文字调整到居中，所以无法设置文字的位置，只能自定义视图
                        UIButton *actionButton = [UIButton buttonWithType:UIButtonTypeCustom];

                        actionButton.frame = aSubView.frame;
                        [actionButton setBackgroundColor:[UIColor redColor]];
                        [actionButton setImage:[UIImage imageNamed:@"rule_delete.png"] forState:UIControlStateNormal];
                        [actionButton.titleLabel setFont: [UIFont fontWithName:@".PingFangSC-Regular" size:15]];
                        [actionButton setTitle:@"删除" forState:UIControlStateNormal];
                        [actionButton addTarget:self action:@selector(deleteCell) forControlEvents:UIControlEventTouchUpInside];
                        [actionButton layoutButtonWithEdgeInsetsStyle:MKButtonEdgeInsetsStyleTop imageTitleSpace:13];
                        [subView addSubview:actionButton];
                        [subView bringSubviewToFront:actionButton];
                        break;
                    }
                }
            }
        }
    }
}

但是不要高兴的太早，你会发现，当点击删除的时候并没有反应，原来我们此时调用的是自己的删除方法，并没有调用父类的方法，怎么才能调用父类的方法呢？别忘了，我们通常在写tableView删除的时候有一个这样的方法

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

所以呢，便想到了这样一个方法，在cell中写一个代理方法给tableView，然后在tableView中实现这个代理方法，在代理方法中调用上面的方法就可以了。

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    return YES;
}

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
    //删除数据源
    [_datasArray removeObjectAtIndex:indexPath.row];
    //刷新cell
    [self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
}

- (void)didDeleteCell:(RightDeleteTableViewCell *)cell {
    [self tableView:self.tableView commitEditingStyle:UITableViewCellEditingStyleDelete forRowAtIndexPath:[self.tableView indexPathForCell:cell]];
}

到此，我们就完成了左划删除按钮的自定义，但是有时候UI设计图中给出的是点击编辑后删除，怎么办呢


其实iOS内部已经给我们提供了这样的接口

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    return YES;
}

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
    return UITableViewCellEditingStyleDelete;
}

并且在点击编辑的时候将tableView设置为编辑状态

- (IBAction)editCell:(id)sender {
    self.tableView.editing = !self.tableView.editing;
}

此时的效果图其实已经跟UI差不多了

不过如果点击图片的话，又会出现右边的删除按钮，有时候我们并不想这样，我们只是希望在点击左边图片的时候就删除cell，此时首先想到的就是拦截删除方法，同样用到右滑删除中的代理方法，只不过我们这次在编辑状态中获取到的cell中的子视图为UITableViewCellEditControl，其中包含了两张图片，给这两张图片添加点击方法，之后跟上面一样的处理方法就可以实现点击即可删除。
但是图片还是没有跟UI的图片一样，这里我试了好几种方法，总是会出现原视图闪烁一下的情况，有知道的大神可以告知小弟一二。
详情可以看代码https://github.com/xiaoerlong/Demo