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

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

场景

使用系统自带的侧滑删除功能样式比较简单,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相关的操作。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容