iOS - UITableViewCell 左滑多个按钮（编辑、更多、删除等）及背景毛玻璃效果

人一切的痛苦，本质上都是对自己的无能的愤怒。

** 上篇文章介绍了UITableView的最基本的使用，现在这篇补充一点左滑出现多个按钮的功能 以及对这些按钮的设置 **

---

效果演示

目录

**1.左滑多个按钮
2.对tableView背景设置毛玻璃
3.对滑动出来的按钮设置背景图片以及毛玻璃效果 **

---

左滑多个按钮

• iOS 8 之后的调用系统的方法

- (NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 添加一个删除按钮
    UITableViewRowAction *deleteRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDestructive title:@"删除" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
        NSLog(@"点击了删除");
    }];
    

    // 添加一个更多按钮
    UITableViewRowAction *moreRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"更多" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
        NSLog(@"点击了更多");  
    }];
    moreRowAction.backgroundColor = [UIColor clearColor];
    
    return @[deleteRowAction,moreRowAction];
}

/*
UITableViewRowAction 的几个属性
@property (nonatomic, copy, nullable) NSString *title;    名称
@property (nonatomic, copy, nullable) UIColor *backgroundColor; // default background color is dependent on style    背景颜色
@property (nonatomic, copy, nullable) UIVisualEffect* backgroundEffect;    毛玻璃效果
*/

注：
1.这里设置 UITableViewRowAction 属性不要使用代码块中的action来设置，我尝试过，没有效果。
2.这里这个毛玻璃效果我也使用它来设置过，也是没有效果的，不知道是不是我没设置好，如果哪位清楚，欢迎再评论中指点。
3.这里数组中添加顺序是从右到左的，也就是，数组当中的第一个，就是你按钮中最右边的那个

• iOS 8 之前的话，网上有些第三方，以及其他方法，因为现在iOS10出来了，并且9、10升级率占九成以上，这里就不写了。

---

对UItableView背景设置毛玻璃效果

• 首先设置背景图片
• 然后在背景图片上添加毛玻璃效果
• 然后将cell设置为透明的就可以了

    UIImageView * imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"tableViewBackgroundImage"]];
    
    UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc]initWithEffect:blurEffect];
    effectView.frame = self.view.bounds;
    [imageView addSubview:effectView];

    tableView.backgroundView = imageView;

cell.backgroundColor = [UIColor clearColor];

---

对滑动出来的按钮设置背景图片以及毛玻璃效果

• 首先 我们要搞清楚这里 UITableViewCell 中间子控件的层级关系

层级关系

这里可以清晰的看到，cell有两个子控件，一个是我们常见的
UITableViewCellContentView，还有一个就是
UITableViewCellDeleteConfirmationView，而这个就是我们侧滑出来的按钮位子的父视图。
那我们直接是没有办法调用到这个UITableViewCellDeleteConfirmationView的，因此，我们要在自定义的cell中自己去遍历cell的子控件，来找出这个视图。

弄清楚了层级关系，那么我的想法就是在UITableViewCellDeleteConfirmationView 上添加一个背景图片，并且添加上毛玻璃效果就可以了

自定义的cell中实现这个方法

- (void)layoutSubviews
{
    [super layoutSubviews];
    for (UIView * subView in self.subviews) {
        if ([subView isKindOfClass:NSClassFromString(@"UITableViewCellDeleteConfirmationView")]) {

//这个判断我认为是比较重要的 ，避免你多次添加图片，你不添加这个判断，会发现会添加多次图片
            if (self.backImage == nil) {
                self.backImage = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"123"]];
                self.backImage.frame = CGRectMake(0, 0, 134, 44);    //这里我是直接打印出两个按钮的位置来定的位置，实际项目中，更具你按钮的个数进行调整
                [subView addSubview:self.backImage];
                
                UIBlurEffect * blurEffect =[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
                // 毛玻璃视图
                self.effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
                //添加到要有毛玻璃特效的控件中
                self.effectView.frame = self.backImage.frame;
                [subView addSubview:self.effectView];

                //注意：这里顺序不能反，要先将毛玻璃效果放到最后面，再将图片放在最后面，这样才能确保毛玻璃是在图片上面的
                [subView sendSubviewToBack:self.effectView];
                
                [subView sendSubviewToBack:self.backImage];
                
                break;
            } else {
                [subView addSubview:self.effectView];
                [subView sendSubviewToBack:self.effectView];
                
                [subView addSubview:self.backImage];
                [subView sendSubviewToBack:self.backImage];
                break;
            }

            
        }
    }
    
}

这里有几个注意点 ：
1.添加图片的时候进行判断，因为这个方法调用时在你滑动的时候多次调用的，不进行判断就会多次添加图片
2.添加图片和毛玻璃的顺序必须注意，让图片在毛玻璃下面

---

如果对文章有任何疑问或者有改进的地方，欢迎各位在评论中留言，我会尽快回复改正