UITableView的多行选择问题浅析

版本记录

版本号	时间
V1.0	2017.08.07

前言

很多时候我们需要选择多行或者取消选择多行，这个在购物类电商类app中是常见的功能，下面我就简单的实现了下，希望对大家有所帮助。

功能目标

实现了cell的多选和取消多选。

---

功能实现

这里思路其实很明确，就是控制数据源，在模型了添加一BOOL属性，来判断cell是否选择，通过选择或者取消选择cell时更改此值并刷新数据，达到了多行数据的选择和取消选择。

特别要注意的是，需要提前设置tableView的一个属性。

tableView.allowsMultipleSelection = YES;

下面直接看代码。

1. JJMultiChooseVC.h

#import 

@interface JJMultiChooseVC : UIViewController

@end

2. JJMultiChooseVC.m

#import "JJMultiChooseVC.h"
#import "JJMultiChooseModel.h"
#import "JJMultiChooseCell.h"

@interface JJMultiChooseVC () 

@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSMutableArray  *contentArrM;

@end

@implementation JJMultiChooseVC

static NSString *const kJJMultiChooseCellReuseIdentify = @"kJJMultiChooseCellReuseIdentify";

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.title = @"多行选择";
    self.view.backgroundColor = [UIColor lightGrayColor];
    
    [self setupUI];
    
    [self loadData];
}

#pragma mark - Object Private Function

- (void)setupUI
{
    UITableView *tableView  = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];
    tableView.delegate = self;
    tableView.dataSource = self;
    [tableView registerClass:[JJMultiChooseCell class] forCellReuseIdentifier:kJJMultiChooseCellReuseIdentify];
    tableView.allowsMultipleSelection = YES;
    tableView.rowHeight = 70.0;
    [self.view addSubview:tableView];
    self.tableView = tableView;
}

- (void)loadData
{
    self.contentArrM = [NSMutableArray array];
    NSArray *contentArr = @[@"第一行", @"第二行", @"第三行", @"第四行", @"第五行"];
    [contentArr enumerateObjectsUsingBlock:^(NSString *obj, NSUInteger idx, BOOL * _Nonnull stop) {
        JJMultiChooseModel *model = [[JJMultiChooseModel alloc] init];
        model.contentStr = obj;
        [self.contentArrM addObject:model];
    }];
}

#pragma mark - UITableViewDelegate, UITableViewDataSource

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.contentArrM.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    JJMultiChooseCell *cell = [tableView dequeueReusableCellWithIdentifier:kJJMultiChooseCellReuseIdentify forIndexPath:indexPath];
    cell.model = self.contentArrM[indexPath.row];
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    JJMultiChooseModel *model = self.contentArrM[indexPath.row];
    model.isSelected = !model.isSelected;
    [self.tableView reloadData];
}

@end

3. JJMultiChooseModel.h

#import 

@interface JJMultiChooseModel : NSObject

@property (nonatomic, copy) NSString *contentStr;
@property (nonatomic, assign) BOOL isSelected;

@end

4. JJMultiChooseCell.h

#import 

@class JJMultiChooseModel;

@interface JJMultiChooseCell : UITableViewCell

@property (nonatomic, strong) JJMultiChooseModel *model;

@end

5. JJMultiChooseCell.m

#import "JJMultiChooseCell.h"
#import "Masonry.h"
#import "JJMultiChooseModel.h"

@interface JJMultiChooseCell ()

@property (nonatomic, strong) UILabel *contentLabel;
@property (nonatomic, strong) UIImageView *selectImageView;

@end

@implementation JJMultiChooseCell

#pragma mark - Override Base Function

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

#pragma mark - Object Private Function

- (void)setupUI
{
    UILabel *contentLabel = [[UILabel alloc] init];
    contentLabel.textColor = [UIColor blueColor];
    [self.contentView addSubview:contentLabel];
    self.contentLabel = contentLabel;
    
    UIImageView *selectImageView = [[UIImageView alloc] init];
    [self.contentView addSubview:selectImageView];
    self.selectImageView = selectImageView;
}

- (void)layoutUI
{
    [self.contentLabel sizeToFit];
    [self.contentLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.contentView);
    }];
    
    [self.selectImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.contentView);
        make.right.equalTo(self.contentView.mas_right).offset(-20);
        make.width.height.equalTo(@50);
    }];
}

#pragma mark - Getter && Setter

- (void)setModel:(JJMultiChooseModel *)model
{
    self.contentLabel.text = model.contentStr;
    
    if (model.isSelected) {
        self.selectImageView.image = [UIImage imageNamed:@"group_prooerty_selected"];
    }
    else {
        self.selectImageView.image = [UIImage imageNamed:@"group_prooerty_unselected"];
    }
     
    [self layoutUI];
}

@end

代码就这么多了，也很简单。

---

功能效果

下面看一下实现效果。

效果实现

后记

很简单的小东西，希望对大家有所帮助。

今日立秋