美文网首页
UITableView自定义Cell侧滑(左滑) 删除等按钮样式

UITableView自定义Cell侧滑(左滑) 删除等按钮样式

作者: 芮淼一线 | 来源:发表于2021-12-01 23:53 被阅读0次

    记录一下,使用系统自带侧滑(左滑) 删除等按钮样式。

    场景

    使用系统自带的侧滑删除功能样式比较简单,iOS11之前只能设置文字和固定的样式颜色,iOS11之后可以设置文字,背景颜色,图片基本上能满足一些需求了。
    如果需要特定的样式就需要自己定制了,本文的思路是找到cell侧滑删除时的rowActionView以及其中具体的按钮items。

    实现侧滑删除功能

    想要实现侧滑删除功能(1个或多个按钮),只需要实现下面代码即可:

    /**
     设置向左侧滑时显示的按钮,同时还存在一个向右侧滑的操作协议,iOS11之后实现了该协议就不会执行editActionsForRowAtIndexPath:
     */
    -(UISwipeActionsConfiguration *)tableView:(UITableView *)tableView trailingSwipeActionsConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath API_AVAILABLE(ios(11.0))
    {
           UIContextualAction *deleteAction1 = [UIContextualAction contextualActionWithStyle:UIContextualActionStyleNormal title:@"   1   " handler:^(UIContextualAction * _Nonnull action, __kindof UIView * _Nonnull sourceView, void (^ _Nonnull completionHandler)(BOOL))
           {
               [tableView setEditing:NO animated:YES];  // 这句很重要,退出编辑模式,隐藏左滑菜单
               NSLog(@"click");
           }];
    
           UIContextualAction *deleteAction2 = [UIContextualAction contextualActionWithStyle:UIContextualActionStyleNormal title:@"   2   " handler:^(UIContextualAction * _Nonnull action, __kindof UIView * _Nonnull sourceView, void (^ _Nonnull completionHandler)(BOOL))
           {
               [tableView setEditing:NO animated:YES];
               NSLog(@"click");
           }];
    //       只能设置背景颜色,图片,文字
    //       deleteAction1.backgroundColor = [[UIColor purpleColor] colorWithAlphaComponent:0.0];
    //       deleteAction1.image = [UIImage imageNamed:@"list_deleting"];
    //       deleteAction1.title = @"Del";
           NSArray<UIContextualAction*> *contextualAction = @[deleteAction1,deleteAction2];
           UISwipeActionsConfiguration *actions = [UISwipeActionsConfiguration configurationWithActions:contextualAction];
           actions.performsFirstActionWithFullSwipe = NO;       // 禁止侧滑无线拉伸
           return actions;
    }
    
    /**
     设置向左侧滑时显示的按钮,iOS11之后推荐使用trailingSwipeActionsConfigurationForRowAtIndexPath:
     */
    - (NSArray*)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
    {
        //title不设为nil 而是空字符串 理由为啥 ?   自己实践 跑到ios11以下的机器上就知道为啥了
        UITableViewRowAction *deleteAction1 = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"       11     " handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){
            NSLog(@"click");
            [tableView setEditing:NO animated:YES];  // 这句很重要,退出编辑模式,隐藏左滑菜单
        }];
        UITableViewRowAction *deleteAction2 = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"       22     " handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){
            NSLog(@"click");
            [tableView setEditing:NO animated:YES];  // 这句很重要,退出编辑模式,隐藏左滑菜单
        }];
        return @[deleteAction1,deleteAction2];
    }
    

    如果只需要一个删除按钮,只需要实现下面的代码即可:
    注意:如果已经实现了上面的代码,下面的代码将不会执行

    - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
        [tableView selectRowAtIndexPath:indexPath animated:YES scrollPosition:(UITableViewScrollPositionNone)];
        [tableView beginUpdates];//表视图开始更新
        if (editingStyle == UITableViewCellEditingStyleDelete) {
    
        } else if (editingStyle == UITableViewCellEditingStyleInsert) {
            // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view.
        }
        [tableView endUpdates];//表视图结束更新
    }
    
    - (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return @"删除";
    }
    
    - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return UITableViewCellEditingStyleDelete;
    }
    

    自定义删除等按钮样式

    实现原理比较简单就是先找到对应的控件,然后按需修改即可。
    要想实现该功能只需要实现下面代码即可:

    - (void)tableView:(UITableView *)tableView willBeginEditingRowAtIndexPath:(NSIndexPath *)indexPath{
        [self editingSlideStyleWithTableView:tableView indexPath:indexPath];
    }
    
    //超找指定控件
    - (void)editingSlideStyleWithTableView:(UITableView*)tableView indexPath:(NSIndexPath *)indexPath
    {
        dispatch_async(dispatch_get_main_queue(), ^{
            UIView *rowActionView = nil;
            NSArray<UIButton *> *items = nil;
            if (@available(iOS 13.0, *)) {
                for (UIView *subView in tableView.subviews) {
                    if ([subView isKindOfClass:NSClassFromString(@"_UITableViewCellSwipeContainerView")] && subView.subviews.count > 0) {
                        rowActionView = subView.subviews.firstObject;
                        items = [[rowActionView.subviews reverseObjectEnumerator] allObjects];
                        break;
                    }
                }
            }else if (@available(iOS 11.0, *)){
                for (UIView *subView in tableView.subviews) {
                    if ([subView isKindOfClass:NSClassFromString(@"UISwipeActionPullView")] && subView.subviews.count > 0) {
                        rowActionView = subView;
                        items = [[rowActionView.subviews reverseObjectEnumerator] allObjects];
                        break;
                    }
                }
            }else{
                UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
                for (UIView *subView in cell.subviews) {
                    if ([subView isKindOfClass:NSClassFromString(@"UITableViewCellDeleteConfirmationView")] && subView.subviews.count > 0) {
                        rowActionView = subView;
                        items = rowActionView.subviews;
                        break;
                    }
                }
            }
            //如果实现了CellEditButtonStyleProtocol协议,可以通过该方式处理重复操作问题
            if ([self conformsToProtocol:@protocol(CellEditButtonStyleProtocol)] && items.count>0) {
                return;
            }
            [self cellEditButtonStyleWith:rowActionView items:items];
        });
    }
    
    
    /// CellEditButtonStyleProtocol
    /// @param rowActionView 装载删除等相关控件的View(items.superview)
    /// @param items 通过排序的rowActionView中的子控件(如添加的删除等按钮), 顺序与创建ActionView的顺序保持一致(依次从右到左排序)
    - (void)cellEditButtonStyleWith:(UIView *)rowActionView items:(NSArray<UIButton *> *)items
    {
        if (items.count < 1) {
            return;
        }
        for (UIButton* item in items) {
            NSLog(@"title:%@",item.titleLabel.text);
        }
        items.firstObject.backgroundColor = UIColor.purpleColor;
    
        //这儿就可以对rowActionView和items进行样式修改和自定义了
    
    }
    

    功能完成

    至此cell侧滑删除等按钮样式修改已经完成,需要注意的是:

    1. iOS版本小于11的,cell侧滑删除相关控件是在cell中的
    2. iOS版本大于11的,cell侧滑删除相关控件是在tableView中的只是版本不同,对应的控件类型也不同罢了。

    特殊处理

    上面的操作已经完全可以实现样式自定义操作了,但是如使直接使用tableview的edit操作而不是通个侧滑展现删除等按钮时,就需要特殊处理了,因为直接通个edit操作展示删除等按钮时是不会走tableView:willBeginEditingRowAtIndexPath;协议。

    实现方式:

    1. 直接自定义UITableView,UITableViewCell然后再其中找到与之对应的删除等按钮,然后通过上面一样的方式处理即可。
    2. 在UITableView,UITableViewCell子控件的didAddSubview:方法中查找对应的删除等控件。
    3. 然后通过相同的协议将找到的控件传递出来即可
    4. 如果不适配iOS11一下版本,就可以不自定义UITableViewCell相关操作

    具体实现代码出下:

    公共协议

    #import <Foundation/Foundation.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @protocol CellEditButtonStyleProtocol <NSObject>
    @optional
    
    /// 获取Cell侧滑(向左)时,定义的按钮如删除按钮;通常用于修改系统侧滑删除按钮的样式
    /// @param rowActionView 装载删除等相关控件的View
    /// @param items 通过排序的rowActionView中的子控件(如添加的删除等按钮), 顺序与创建ActionView的顺序保持一致(依次从右到左排序)
    - (void)cellEditButtonStyleWith:(UIView *)rowActionView items:(NSArray<UIButton *> *)items;
    @end
    
    NS_ASSUME_NONNULL_END
    
    

    自定义cell

    #import <UIKit/UIKit.h>
    #import "CellEditButtonStyleProtocol.h"
    
    NS_ASSUME_NONNULL_BEGIN
    
    @interface MyCell : UITableViewCell
    @property (nonatomic, weak) id <CellEditButtonStyleProtocol> cellEditButtonStyleDelegate;
    @end
    
    NS_ASSUME_NONNULL_END
    
    
    
    #import "MyCell.h"
    @implementation MyCell
    
    - (void)didAddSubview:(UIView *)subview
    {
        [subview didAddSubview:subview];
        [self filterCellRowActionViewWith:subview];
    }
    
    - (void)filterCellRowActionViewWith:(UIView *)view
    {
        if (@available(iOS 11.0, *)) {
    
        }else if (self.cellEditButtonStyleDelegate){
            if ([view isKindOfClass:NSClassFromString(@"UITableViewCellDeleteConfirmationView")]){
                dispatch_async(dispatch_get_main_queue(), ^{
                    NSArray<UIButton *> * items = view.subviews;
                    if (items.count>0 && [self.cellEditButtonStyleDelegate respondsToSelector:@selector(cellEditButtonStyleWith:items:)]) {
                        [self.cellEditButtonStyleDelegate cellEditButtonStyleWith:view items:items];
                    }
                });
            }
        }
    }
    @end
    

    自定义tableView

    #import <UIKit/UIKit.h>
    #import "CellEditButtonStyleProtocol.h"
    
    NS_ASSUME_NONNULL_BEGIN
    
    @interface MyTableView : UITableView
    @property (nonatomic, weak) id <CellEditButtonStyleProtocol> cellEditButtonStyleDelegate;
    @end
    
    NS_ASSUME_NONNULL_END
    
    
    
    #import "MyTableView.h"
    
    @implementation MyTableView
    
    - (void)didAddSubview:(UIView *)subview
    {
        [super didAddSubview:subview];
        [self filterCellRowActionViewWith:subview];
    }
    
    
    - (void)filterCellRowActionViewWith:(UIView *)view
    {
        if (self.cellEditButtonStyleDelegate) {
            if (![self.cellEditButtonStyleDelegate respondsToSelector:@selector(cellEditButtonStyleWith:items:)]) {
                return;
            }
            if (@available(iOS 13.0, *)) {
                if ([view isKindOfClass:NSClassFromString(@"_UITableViewCellSwipeContainerView")]) {
                    dispatch_async(dispatch_get_main_queue(), ^{
                        UIView *rowActionView = view.subviews.firstObject;
                        NSArray *items = [[rowActionView.subviews reverseObjectEnumerator] allObjects];
                        if (items.count > 0) {
                            [self.cellEditButtonStyleDelegate cellEditButtonStyleWith:rowActionView items:items];
                        }
                    });
                }
            }else if (@available(iOS 11.0, *)){
                if ([view isKindOfClass:NSClassFromString(@"UISwipeActionPullView")]) {
                    dispatch_async(dispatch_get_main_queue(), ^{
                        UIView *rowActionView = view;
                        NSArray *items = [[rowActionView.subviews reverseObjectEnumerator] allObjects];
                        if (items.count > 0) {
                            [self.cellEditButtonStyleDelegate cellEditButtonStyleWith:rowActionView items:items];
                        }
                    });
                }
            }
        }
    }
    
    @end
    
    

    最后再在控制器中实现CellEditButtonStyleProtocol协议,
    并且为tableView,tableViewCell设置cellEditButtonStyleDelegate代理即可,
    如果不适配iOS11一下的版本,可以不实现与UITableViewCell相关的操作。

    相关文章

      网友评论

          本文标题:UITableView自定义Cell侧滑(左滑) 删除等按钮样式

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