iOS开发技术

TableViewCell编辑时自定义勾选框

2018-11-08  本文已影响94人  Moker_C

开启tableView的编辑模式:

//带动画
[self.tableView setEditing:YES animated:YES];
//或者(没有动画)
//self.tableView.editing = YES;

如果不仅仅是想进行单个的操作,可设置成多选。

self.tableView.allowsMultipleSelectionDuringEditing = YES;

下面是编辑时会用到的tableView的delegate和dataSource:

Delegate

//编辑的样式
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath;

//删除按钮的文字
- (nullable NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(3_0) __TVOS_PROHIBITED;

//ios8.0以后的接口,支持多个侧滑按钮
- (nullable NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0) __TVOS_PROHIBITED;

//ios11以后的接口,该方法取代上面这个方法,如果实现了下面这两个方法上面的方法将无效
- (nullable UISwipeActionsConfiguration *)tableView:(UITableView *)tableView leadingSwipeActionsConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath API_AVAILABLE(ios(11.0)) API_UNAVAILABLE(tvos);
- (nullable UISwipeActionsConfiguration *)tableView:(UITableView *)tableView trailingSwipeActionsConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath API_AVAILABLE(ios(11.0)) API_UNAVAILABLE(tvos);

//编辑时cell是否需要缩进
- (BOOL)tableView:(UITableView *)tableView shouldIndentWhileEditingRowAtIndexPath:(NSIndexPath *)indexPath;

//两个编辑状态的回调
- (void)tableView:(UITableView *)tableView willBeginEditingRowAtIndexPath:(NSIndexPath *)indexPath __TVOS_PROHIBITED;
- (void)tableView:(UITableView *)tableView didEndEditingRowAtIndexPath:(nullable NSIndexPath *)indexPath __TVOS_PROHIBITED;

DataSource

//cell是否允许编辑
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath;

//cell是否可移动
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;

//当delete或insert按钮按下时,对数据、UI进行处理
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;

//实现这个回调以后,就会出现更换位置的按钮,用来处理cell位置更换后的数据交换
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath;

UI更新

- (void)beginUpdates;
- (void)endUpdates;

- (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation;
- (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation;
- (void)reloadSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation NS_AVAILABLE_IOS(3_0);
- (void)moveSection:(NSInteger)section toSection:(NSInteger)newSection NS_AVAILABLE_IOS(5_0);

- (void)insertRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;
- (void)deleteRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;
- (void)reloadRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation NS_AVAILABLE_IOS(3_0);
- (void)moveRowAtIndexPath:(NSIndexPath *)indexPath toIndexPath:(NSIndexPath *)newIndexPath NS_AVAILABLE_IOS(5_0);

举个🌰

//允许编辑
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    return YES;
}

/**
 设置编辑模式:
 UITableViewCellEditingStyleNone 没有编辑样式
 UITableViewCellEditingStyleDelete 删除样式 (左边是红色减号)
 UITableViewCellEditingStyleInsert 插入样式  (左边是绿色加号)
 UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert 多选模式,左边是蓝色对号
 */
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (tableView.isEditing) {
        return UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert;
    }else {
        return UITableViewCellEditingStyleDelete;
    }
}

//删除按钮文字
- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath {
    return @"删除";
}

//数据、UI处理
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        //删除
    }

    if (editingStyle == UITableViewCellEditingStyleInsert) {
        //删除
    }
    
    if (editingStyle == (UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert)) {
        //多选
    }
}

正题(自定义多选框)

方式一、

自定义cell(隐藏系统自带的勾选按钮图片,自定义一个放在相应的位置,根据是否选中来切换self.selectImageView.image):

- (void)setModel:(DataModel *)model {
    if ([model.isSelected isEqualToString:@"1"]) {
        self.selectImageView.image = [UIImage imageNamed:@"selected"];
    }else {
        self.selectImageView.image = [UIImage imageNamed:@"unselected"];
    }
}

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

- (void)setUpCell {
    self.selectionStyle = UITableViewCellSelectionStyleNone;
    
    self.selectImageView = [[UIImageView alloc] init];
    self.selectImageView.userInteractionEnabled = YES;
    self.selectImageView.image = [UIImage imageNamed:@"unselected"];
    [self.contentView addSubview:self.selectImageView];
    [self.selectImageView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.contentView.mas_left).offset(0);
        make.centerY.mas_equalTo(0);
        make.width.height.mas_equalTo(22);
    }];
}

- (void)setEditing:(BOOL)editing animated:(BOOL)animated {
    //重写此方法,作用为当进入编辑模式时候运行customMultipleChioce方法
    [super setEditing:editing animated:animated];
    if (editing) {
        [self customMultipleChioce];
    }
}

- (void)customMultipleChioce {
    for (UIControl *control in self.subviews) {
        //循环cell的subview
        if ([control isMemberOfClass:NSClassFromString(@"UITableViewCellEditControl")]) {
            //找出UITableViewCellEditControl
            for (UIView *view in control.subviews) {
                if ([view isKindOfClass: [UIImageView class]]) {
                    //在UITableViewCellEditControl中找到imageView
                    UIImageView *imageView = (UIImageView *)view;
                    imageView.hidden = YES;
                }
            }
        }
    }
}

方式二、

替换系统原本的勾选按钮图片,地址:替换系统勾选按钮图片

上一篇下一篇

猜你喜欢

热点阅读