tableViewCell删除按钮自定义

来源:互联网 发布:手机视频缓存软件 编辑:程序博客网 时间:2024/06/05 02:38

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

1 0
原创粉丝点击