美文网首页
iOS - UITableViewCell 左滑多个按钮(编辑、

iOS - UITableViewCell 左滑多个按钮(编辑、

作者: 小_黑_屋 | 来源:发表于2016-11-06 23:06 被阅读0次

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

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


    效果演示

    目录

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


    左滑多个按钮

    • iOS 8 之后的调用系统的方法
    - (NSArray<UITableViewRowAction *> *)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.添加图片和毛玻璃的顺序必须注意,让图片在毛玻璃下面


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

    相关文章

      网友评论

          本文标题:iOS - UITableViewCell 左滑多个按钮(编辑、

          本文链接:https://www.haomeiwen.com/subject/ujynuttx.html