UITableView 轻松自定义多选cell 不使用系统样式

1、先看效果

UITableView.gif

2、需要什么效果

1.点击全选需要全选cell

2.在全选状态下,取消任意一个,全选按钮为 normal 转态

3.一个一个选择,直到全部选择,全选按钮为 selected 状态

3、实现

3.1.在cell中添加一个 按钮 或者 图片,用来显示选择或者未选择中的转态,在初始化时 默认设为 未选择的转态或者图片,和透明度为0或hidden = YES ,我使用的是按钮做这个状态的现实,只需要UIControlStateNormal和UIControlStateSelected状态下的图片,不需要实现点击事件

RSButton* selectedButton = [[RSButtonalloc]initWithType:RSButtonTypeOnlyImage];

selectedButton.alpha=0.0;

[selectedButtonsetImage:[UIImage imageNamed:@"rs_common_selected_normal_2"] forState:UIControlStateNormal];

[selectedButtonsetImage:[UIImage imageNamed:@"rs_common_selected_selected_2"] forState:UIControlStateSelected];

[viewaddSubview:selectedButton];

self.selectedButton= selectedButton;


3.2.重写UITableViewCell的方法


- (void)setSelected:(BOOL)selectedanimated:(BOOL)animated {

    [supersetSelected:selectedanimated:animated];

    self.selectedButton.selected= selected;

}


以上代码就可以实现 cell 在点击的时候,改变按钮的图片显示

4、设置UITableView

4.1.设置UITableView 是否可以多选


        _tableView.allowsMultipleSelection = YES;


4.2.点击 编辑 让 UITableView 进入多选状态(编辑状态)让按钮从隐藏状态显示出来

    4.2.1 重写UITableViewCell 的方法,显示或隐藏按钮,在UITableView 进入编辑状态的时候会调用

    -(void)setEditing:(BOOL)editing animated:(BOOL)animated {    

        // [super setEditing:editing animated:animated]; 这里不要调用super 不然显示是系统自带的样式

        [UIView animateWithDuration:0.2

                         animations:^{

               self.selectedButton.alpha= editing ?1.0:0.0;

        }];

   }


    4.2.2 点击 编辑的时候 让UITableView 进入编辑转态

    /// 编辑按钮点击事件

    - (void)editAction:(UIButton*)sender {

        sender.selected= !sender.selected;

        [self.tableView setEditing:sender.selected animated:YES]; // 这个就会调用 2.1 中的代码 显示或隐藏 cell中的 按钮

    }


    4.2.3 设置 UITableViewDelegate 中的代码,

    - (void)tableView:(UITableView*)tableViewdidSelectRowAtIndexPath:(NSIndexPath*)indexPath {

            if(tableView.isEditing) {// 判断一下是不是编辑状态

            [tableViewselectRowAtIndexPath:indexPath animated:YES scrollPosition:UITableViewScrollPositionNone];

            self.selectedIndexPaths = tableView.indexPathsForSelectedRows; // 获取 UITableView 当前选中的 cell

        }else{    

        }

    }

    - (void)tableView:(UITableView*)tableViewdidDeselectRowAtIndexPath:(NSIndexPath*)indexPath{

            if(tableView.isEditing) { // 判断一下是不是编辑状态

            [tableViewdeselectRowAtIndexPath:indexPathanimated:YES];

            self.selectedIndexPaths = tableView.indexPathsForSelectedRows; // 获取 UITableView 当前选中的 cell

        }

    }

    4.2.4 必须设置 不然在 UITableView 在编辑状态下 无法响应 4.2.3 中的代码

    - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath{

        return UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert;

    }

5、设置记录 选择的 数组

5.1 添加属性

@interfaceRSFamilyListController()

@property (strong,  nonatomic) UITableView * tableView;

@property (weak,    nonatomic) RSView * editView;

@property (weak,    nonatomic) RSButton * checkAllButton; // 全选按钮 它在  editView上 点击编辑的时候隐藏或显示

@property (strong,  nonatomic) NSArray * datas; /// 源数据

@property (strong,  nonatomic) NSArray * selectedIndexPaths; /// 记录选择中的 cell 4.2.3 和 4.2.4 中的代码有

@end


5.2 重写 selectedIndexPaths set方法,用来判断是不是 全全部选中



- (void)setSelectedIndexPaths:(NSArray *)selectedIndexPaths {

    _selectedIndexPaths = selectedIndexPaths;

    // 判断一下 选择的数量是不是等于源数据的数量,这就可以 显示 按钮的 UIControlStateNormal 状态 或者 UIControlStateNormal 状态

    self.checkAllButton.selected = (selectedIndexPaths.count == self.datas.count);

}

6、 到这里就差不多了,下面是完整代码,可以直接复制使用
RSFamilyListController.h

#import "RSViewController.h"

NS_ASSUME_NONNULL_BEGIN

@interface RSFamilyListController : RSViewController

@end

@interface RSFamilyListCell : UITableViewCell

@end

NS_ASSUME_NONNULL_END

RSFamilyListController.m


#import "RSFamilyListController.h"
#import "RSInsertFamilyListController.h"


@interface RSFamilyListController ()
@property (strong,  nonatomic) UITableView * tableView;
@property (weak,    nonatomic) RSView * editView;
@property (weak,    nonatomic) RSButton * checkAllButton;
@property (strong,  nonatomic) NSArray * datas;
@property (strong,  nonatomic) NSArray * selectedIndexPaths;

@end

@implementation RSFamilyListController(Action)

/// 编辑点击事件
- (void)editAction:(UIButton *)sender {
    sender.selected = !sender.selected;
    MJWeakSelf;
    [UIView animateWithDuration:0.25
                     animations:^{
        weakSelf.editView.alpha = sender.selected ? 1.0 : 0.0;
        weakSelf.editView.hidden = !sender.selected;
    }];
    
    
    [self.tableView setEditing:sender.selected animated:YES];
}

/// 添加家人点击事件
- (void)insertAction {
    [self.navigationController pushViewController:[RSInsertFamilyListController new]
                                         animated:YES];
}
- (void)checkAllAction:(RSButton *) sender {
    sender.selected = !sender.selected;
        for (int i = 0; i < self.datas.count; i++) {
            if (sender.selected) {

            [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0] animated:YES scrollPosition:UITableViewScrollPositionNone];
        } else {
            [self.tableView deselectRowAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0] animated:YES];
        }
    }
}
@end

@implementation RSFamilyListController(Protocol)
#pragma mark - UITableViewDelegate & UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.datas.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    RSFamilyListCell * cell = [tableView dequeueReusableCellWithIdentifier:@"RSFamilyListCell"];
    if (!cell) {
        cell = [[RSFamilyListCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"RSFamilyListCell"];
    }
    return cell;
}


- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if (tableView.isEditing) {
        [tableView selectRowAtIndexPath:indexPath animated:YES scrollPosition:UITableViewScrollPositionNone];
        self.selectedIndexPaths = tableView.indexPathsForSelectedRows;
    } else {
        
    }
}
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath{
    if (tableView.isEditing) {
        [tableView deselectRowAtIndexPath:indexPath animated:YES];
        self.selectedIndexPaths = tableView.indexPathsForSelectedRows;
    }
    
}


- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath{
    return UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert;
}




@end

@implementation RSFamilyListController
- (UITableView *)tableView {
    if (!_tableView) {
        _tableView = [[UITableView alloc]init];
        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        _tableView.allowsMultipleSelection = YES;
    }
    return _tableView;
}

- (void)setSelectedIndexPaths:(NSArray *)selectedIndexPaths {
    _selectedIndexPaths = selectedIndexPaths;
    
    self.checkAllButton.selected = (selectedIndexPaths.count == self.datas.count);
}

-(NSArray *) datas{
    return @[@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1",@"1"];
}

- (BOOL)navigationBarHiddenShadowImage{
    return YES;
}


- (void)viewDidLoad {
    [super viewDidLoad];
    [self loadNavigationBar];
    [self loadSubViews];
}

- (void)loadNavigationBar {
    self.navigationItem.title = @"家人相亲库";
    
    UIButton * rightButton = [[UIButton alloc]init];
    rightButton.titleLabel.font = [UIFont systemFontOfSize:10.0];
    [rightButton setTitle:@"编辑" forState:UIControlStateNormal];
    [rightButton setTitleColor:RSColor.F33333 forState:UIControlStateNormal];
    [rightButton addTarget:self action:@selector(editAction:) forControlEvents:UIControlEventTouchUpInside];
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:rightButton];

}

- (void)loadSubViews {
    
    RSView * bottomView = [[RSView alloc]init];
    bottomView.backgroundColor = RSColor.FFFFFF;
    [self.view addSubview:bottomView];
    
    [bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(self.view);
        make.height.offset(56);
        make.bottom.offset(UIScreen.bottomSafeHeight);
    }];
    
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    [self.tableView registerClass:RSFamilyListCell.class forCellReuseIdentifier:@"RSFamilyListCell"];
    self.tableView.backgroundColor = self.view.backgroundColor;
    [self.view addSubview:self.tableView];
    
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.right.equalTo(self.view);
        make.bottom.equalTo(bottomView.mas_top);
    }];
    
    [self loadSubViewsWithBottom:bottomView];
}

- (void)loadSubViewsWithBottom:(UIView *) view {
    
    
    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.titleLabel.font = [UIFont systemFontOfSize:16.0];
    [button setTitle:@"新增家人信息" forState:UIControlStateNormal];
    [button setBackgroundImage:[UIImage imageWithGradientColors:@[RSColor.F98D5C,RSColor.FF6999]] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(insertAction) forControlEvents:UIControlEventTouchUpInside];
    [button acs_radiusWithRadius:18.0 corner:UIRectCornerAllCorners];
    [view addSubview:button];
    
    [button mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.offset(12.0);
        make.right.offset(-12.0);
        make.height.offset(36.0);
        make.centerY.equalTo(view);
    }];
    
    RSView * editView = [[RSView alloc]init];
    editView.alpha = 0.0;
    editView.hidden = YES;
    editView.backgroundColor = view.backgroundColor;
    [view addSubview:editView];
    self.editView = editView;
    
    [editView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(view);
    }];
    
    
    RSButton * checkAllButton = [[RSButton alloc]initWithType:RSButtonTypeLeft];
    checkAllButton.titleLabel.textColor = RSColor.F66666;
    checkAllButton.titleLabel.font = [UIFont systemFontOfSize:14.0];
    [checkAllButton setTitle:@"全选" forState:UIControlStateNormal];
    [checkAllButton setImage:[UIImage imageNamed:@"rs_common_selected_normal_2"] forState:UIControlStateNormal];
    [checkAllButton setImage:[UIImage imageNamed:@"rs_common_selected_selected_2"] forState:UIControlStateSelected];
    [checkAllButton addTarget:self action:@selector(checkAllAction:) forControlEvents:UIControlEventTouchUpInside];
    [editView addSubview:checkAllButton];
    self.checkAllButton = checkAllButton;
    
    [checkAllButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.offset(12.0);
        make.centerY.equalTo(editView);
    }];
 
    UIButton * doneButton = [UIButton buttonWithType:UIButtonTypeCustom];
    doneButton.titleLabel.font = [UIFont systemFontOfSize:14.0];
    [doneButton setTitle:@"发布" forState:UIControlStateNormal];
    [doneButton setBackgroundImage:[UIImage imageWithColor:RSColor.F2F2F2] forState:UIControlStateNormal];

    [doneButton setBackgroundImage:[UIImage imageWithGradientColors:@[RSColor.F98D5C,RSColor.FF6999]] forState:UIControlStateSelected];
    [doneButton acs_radiusWithRadius:15.0 corner:UIRectCornerAllCorners];
    [editView addSubview:doneButton];
    
    [doneButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.offset(-12.0);
        make.width.offset(68.0);
        make.height.offset(30.0);
        make.centerY.equalTo(view);
    }];

}
@end

@interface RSFamilyListCell ()
@property (weak,  nonatomic) RSButton * selectedButton;
@end


@implementation RSFamilyListCell(Common)
- (UILabel *)customLabel {
    UILabel * laebl = [[UILabel alloc]init];
    laebl.font = [UIFont systemFontOfSize:10.0];
    laebl.textColor = RSColor.F33333;
    laebl.text = @"--";
    return laebl;
}

- (YYLabel *)customYYLabel {
    YYLabel * laebl = [[YYLabel alloc]init];
    laebl.font = [UIFont systemFontOfSize:10.0];
    laebl.text = @"--";
    laebl.textColor = RSColor.F33333;
    return laebl;

}
@end



@implementation RSFamilyListCell
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
    self.selectedButton.selected = selected;
}


-(void)setEditing:(BOOL)editing animated:(BOOL)animated {
    MJWeakSelf;
    [UIView animateWithDuration:0.2
                     animations:^{
        weakSelf.selectedButton.alpha = editing ? 1.0 : 0.0;
    }];
}

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        self.backgroundColor = UIColor.clearColor;
        self.selectionStyle = UITableViewCellSelectionStyleNone;
        [self loadSubViews];
    }
    return self;
}

- (void)loadSubViews {
    
    RSView * view = [[RSView alloc]init];
    view.backgroundColor = RSColor.FFFFFF;
    [view acs_radiusWithRadius:8.0 corner:UIRectCornerAllCorners];
    [self.contentView addSubview:view];
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.offset(12.0);
        make.right.offset(-12.0);
        make.bottom.equalTo(self.contentView);
        make.top.offset(10.0);
    }];
    
    
    UIImageView * portraitView = [[UIImageView alloc] init];
    portraitView.backgroundColor = RSColor.F2F2F2;
    [view addSubview:portraitView];
    
    [portraitView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.bottom.equalTo(view);
        make.width.height.offset(103);
    }];
    
    
    
    RSView * infoView = [[RSView alloc]init];
    [view addSubview:infoView];
    
    [infoView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(portraitView.mas_right).offset(10.0);
        make.right.offset(0.0);
        make.top.offset(10.0);
        make.bottom.offset(-10.0);
    }];
    
    [self loadSubViewsWithInfoView:infoView];
}

- (void)loadSubViewsWithInfoView:(UIView *) view {
    RSButton * selectedButton = [[RSButton alloc] initWithType:RSButtonTypeOnlyImage];
    selectedButton.alpha = 0.0;
    [selectedButton setImage:[UIImage imageNamed:@"rs_common_selected_normal_2"] forState:UIControlStateNormal];
    [selectedButton setImage:[UIImage imageNamed:@"rs_common_selected_selected_2"] forState:UIControlStateSelected];
    [view addSubview:selectedButton];
    self.selectedButton = selectedButton;
    
    [selectedButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.top.equalTo(view);
        make.width.height.offset(12.0);
    }];
    
    
    YYLabel * label1 = [self customYYLabel];
    [view addSubview:label1];
    [label1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.equalTo(view);
        make.right.equalTo(selectedButton.mas_left).offset(-5.0);
    }];
    
    YYLabel * label2 = [self customYYLabel];
    [view addSubview:label2];
    
    [label2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(view);
        make.top.equalTo(label1.mas_bottom);
        make.height.equalTo(label1);
    }];
    
    UILabel * label3 = [self customLabel];
    [view addSubview:label3];
    
    [label3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(view);
        make.top.equalTo(label2.mas_bottom);
        make.height.equalTo(label2);
    }];

    UILabel * label4 = [self customLabel];
    [view addSubview:label4];
    
    [label4 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(label3.mas_right);
        make.top.width.height.equalTo(label3);
    }];

    UILabel * label5 = [self customLabel];
    [view addSubview:label5];
    
    [label5 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(view);
        make.left.equalTo(label4.mas_right);
        make.width.height.top.equalTo(label4);
    }];

    UILabel * label6 = [self customLabel];
    [view addSubview:label6];
    
    [label6 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(label5.mas_bottom);
        make.height.equalTo(label5);
        make.bottom.equalTo(view);
        make.left.right.equalTo(view);
    }];

}
@end

你可能感兴趣的:(UITableView 轻松自定义多选cell 不使用系统样式)