UITableView自定义左滑删除按钮(带图片)

转载请注明本文出自surfaceeee的博客（http://blog.csdn.NET/u010519146/article/details/42882635），请尊重他人的辛勤劳动成果，谢谢！

本人一枚新入行的iOS程序猿，苦于tableviewcell左划删除按钮自定义(需要自定义图片)的方法，网上寻找多日未果，遂闭关两日，琢磨得此方法，第一次写博客，各位看官轻拍！废话少说，直入正题。

实现效果如图：    

注意：此种方法适用于单个按钮功能自定义，但不适用于左划出现多个按钮的自定义（其实是我在赶项目，也没想如何多个按钮= =），而且可以点击任意地方取消删除操作，cell返回原来的位置

本方法实现的原理是将自定义按钮加在tableViewCell.contentView的屏幕外的frame上，打个比方，如果是5系的话，那么你自定义按钮的frame的起点就在（320+，0）（320+表示大于等于320…），当你滑动，整个cell往左偏移的时候，这时候本应该右边显示为这样：

   

但是由于我们把自定义的按钮add到屏幕外，此时contentView上的自定义按钮就将原删除按钮给遮住了。然后接下来就是实现删除了，重写-(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath方法，有了indexPath就可以将cell删除了，然后刷新tableView即可

贴上代码：

覆写的tableViewCell的初始化方法：

[objc] view plain copy

print ?

1. -(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{  
2.     self=[super initWithStyle:style reuseIdentifier:reuseIdentifier];  
3.     if (self) {  
4.           
5.           
6.         _deleteView=[[UIView alloc]initWithFrame:CGRectMake(kScreenWidth, 0, kScreenWidth, 100)];  
7.         _deleteView.backgroundColor=BaseViewBackgroundColor;  
8.         [self.contentView addSubview:_deleteView];  
9.         ButtonItem *deleteBtn=[[ButtonItem alloc]initWithFrame:CGRectMake(0, 0, 80, 100) WithImageName:@”icon_delete” WithImageWidth:48 WithImageHeightPercentInItem:.7 WithTitle:NSLocalizedString(@”DeleteOrder”, nil) WithFontSize:14 WithFontColor:[UIColor blackColor] WithGap:-5];  
10. <span style=”white-space:pre”>    </span>//ButtonItem是我自己定义的一个控件，下面有介绍，<span style=”font-family: Arial, Helvetica, sans-serif;”>@”icon_delete”是删除按钮的图片</span>  
11.   
12.         [_deleteView addSubview:deleteBtn];  
13.   
14.     }  
15.     return self;  
16. }  

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    self=[super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {


        _deleteView=[[UIView alloc]initWithFrame:CGRectMake(kScreenWidth, 0, kScreenWidth, 100)];
        _deleteView.backgroundColor=BaseViewBackgroundColor;
        [self.contentView addSubview:_deleteView];
        ButtonItem *deleteBtn=[[ButtonItem alloc]initWithFrame:CGRectMake(0, 0, 80, 100) WithImageName:@"icon_delete" WithImageWidth:48 WithImageHeightPercentInItem:.7 WithTitle:NSLocalizedString(@"DeleteOrder", nil) WithFontSize:14 WithFontColor:[UIColor blackColor] WithGap:-5];
<span style="white-space:pre">    </span>//ButtonItem是我自己定义的一个控件，下面有介绍，<span style="font-family: Arial, Helvetica, sans-serif;">@"icon_delete"是删除按钮的图片</span>

        [_deleteView addSubview:deleteBtn];

    }
    return self;
}

覆写tableView的代理方法：

[objc] view plain copy

print ?

1. -(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath{  
2.     [mutableArray removeObjectAtIndex:indexPath.row];  
3.     [tableView reloadData];  
4.   
5. }  

-(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath{
    [mutableArray removeObjectAtIndex:indexPath.row];
    [tableView reloadData];

}

当然如果只是这样，你会发现你左划完成之后，你的按钮只会有原delete按钮的宽度，此时就可以再通过如下代理方法进行宽度的调节…

[objc] view plain copy

print ?

1. -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath{  
2.     return @”通过改变title的长度，你想多宽就多宽”;  
3. }  

-(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath{
    return @"通过改变title的长度，你想多宽就多宽";
}

Tips：

ButtonItem是我自己写的一个继承于UIControl的控件，上面有UIImageView和UILable，便于我实现那种带图片和文字的按钮

[objc] view plain copy

print ?

1. - (id)initWithFrame:(CGRect)frame WithImageName:(NSString *)imageName WithImageWidth:(CGFloat)imgWidth WithImageHeightPercentInItem:(CGFloat)imgPercent WithTitle:(NSString *)title WithFontSize:(CGFloat)fontSize WithFontColor:(UIColor *)color WithGap:(CGFloat)gap{  
2.     self.backgroundColor=[UIColor clearColor];  
3.     self=[super initWithFrame:frame];  
4.     if (self) {  
5.         _imageView=[[UIImageView alloc]initWithFrame:CGRectMake((frame.size.width-imgWidth)/2, 5, imgWidth, imgPercent*frame.size.height)];  
6.         if (imageName) {  
7.             _imageView.image=[UIImage imageNamed:imageName];  
8.         }  
9.         _imageView.contentMode=UIViewContentModeScaleAspectFit;  
10.         [self addSubview:_imageView];  
11.           
12.         _label=[[UILabel alloc]initWithFrame:CGRectMake(0, gap+_imageView.frame.size.height, frame.size.width, (1-imgPercent)*frame.size.height)];  
13.         _label.text=title;  
14.         _label.textColor=color;  
15.         _label.textAlignment=NSTextAlignmentCenter;  
16.         _label.font=[UIFont systemFontOfSize:fontSize];  
17.         [self addSubview:_label];  
18.           
19.           
20.     }  
21.     return self;  
22. }  

- (id)initWithFrame:(CGRect)frame WithImageName:(NSString *)imageName WithImageWidth:(CGFloat)imgWidth WithImageHeightPercentInItem:(CGFloat)imgPercent WithTitle:(NSString *)title WithFontSize:(CGFloat)fontSize WithFontColor:(UIColor *)color WithGap:(CGFloat)gap{
    self.backgroundColor=[UIColor clearColor];
    self=[super initWithFrame:frame];
    if (self) {
        _imageView=[[UIImageView alloc]initWithFrame:CGRectMake((frame.size.width-imgWidth)/2, 5, imgWidth, imgPercent*frame.size.height)];
        if (imageName) {
            _imageView.image=[UIImage imageNamed:imageName];
        }
        _imageView.contentMode=UIViewContentModeScaleAspectFit;
        [self addSubview:_imageView];

        _label=[[UILabel alloc]initWithFrame:CGRectMake(0, gap+_imageView.frame.size.height, frame.size.width, (1-imgPercent)*frame.size.height)];
        _label.text=title;
        _label.textColor=color;
        _label.textAlignment=NSTextAlignmentCenter;
        _label.font=[UIFont systemFontOfSize:fontSize];
        [self addSubview:_label];


    }
    return self;
}

至此，自定义tableView删除按钮就全部完成了，其实也就是就原delete按钮进行覆盖，然后根据你要的宽度设置title的长度；点击任意地方取消删除也是直接用的系统的方法。

第一次写博客，语言比较混乱，希望大家谅解。