iOS开发-自定制筛选View

前言：一般的筛选界面都是由n组不同种类的选择组成，每个组又由一个标题加该标题下的m个选项组成。前段时间对我们的项目中的筛选视图进行了优化，同时将该筛选的view进行了封装，现将封装好的筛选view分享给大家，希望能够帮助到有需要的朋友。

原理：使用UICollectionView实现筛选的分组与选择，同时创建一个继承于UICollectionViewFlowLayout的flowLayout类，重写部分方法实现item从左至右依次按照设置间距排序，排不下的另起一行。大家先来看一下效果图：

筛选.gif

首先，我们创建一个继承自UIView的封装类RHFiltrateView（名字自己起就行），来看在RHFiltrateView.h文件中的代码：

#import <UIKit/UIKit.h>

@protocol RHFiltrateViewDelegate;
@interface RHFiltrateView : UIView

@property (nonatomic, weak) id<RHFiltrateViewDelegate> delegate;

- (instancetype)initWithFrame:(CGRect)frame titles:(NSArray<NSString *> *)titles items:(NSArray<NSArray *> *)items;

- (instancetype)initWithTitles:(NSArray<NSString *> *)titles items:(NSArray<NSArray *> *)items;

@end
@protocol RHFiltrateViewDelegate <NSObject>

@optional
- (void)filtrateView:(RHFiltrateView *)filtrateView didSelectAtIndexPath:(NSIndexPath *)indexPath;

@end

这里，小编定义了两个外漏的创建对象方法，大家需要注意的是要传入的titles和items这两个数组个数必须一致，并且titles中的元素为字符串，items中的元素为数组。由于当点击选择的item的时候需要告诉vc选择的是哪一个，这里小编使用了代理传值的方法，直接将选中的那个item的位置回调。

接下来看RHFiltrateView.m文件中的实现：

#import "RHFiltrateView.h"
#import "RHFiltrateHeaderView.h"
#import "RHFiltrateFooterView.h"
#import "RHFiltrateCell.h"
#import "RHCollectionViewFlowLayout.h"
#import "RHHelper.h"

#define Cell_Filtrate              @"Cell_Filtrate"
#define Collection_FiltrateHeader  @"Collection_FiltrateHeader"
#define Collection_FiltrateFooter  @"Collection_FiltrateFooter"

//这里可以更改响应的一些参数
#define MarginX      10    //item X间隔
#define MarginY      15    //item Y间隔
#define ItemHeight   30    //item 高度
#define ItemWidth    30    //item 追加宽度
@interface RHFiltrateView () <UICollectionViewDelegate, UICollectionViewDataSource, RHCollectionViewDelegateFlowLayout>

@property (nonatomic, strong) UICollectionView * collectionView;
@property (nonatomic, strong) NSArray * titleArr;
@property (nonatomic, strong) NSArray * itemArr;
@property (nonatomic, strong) NSMutableArray * dataArr;
@end
@implementation RHFiltrateView

- (instancetype)initWithFrame:(CGRect)frame titles:(NSArray<NSString *> *)titles items:(NSArray<NSArray *> *)items {
    
    self = [super initWithFrame:frame];
    
    if (self) {
        
        _titleArr = [NSArray arrayWithArray:titles];
        _itemArr = [NSArray arrayWithArray:items];
        [self loadData];
        [self addSubviews];
    }
    return self;
}

- (instancetype)initWithTitles:(NSArray<NSString *> *)titles items:(NSArray<NSArray *> *)items {
    
    self = [super init];
    
    if (self) {
        
        _titleArr = [NSArray arrayWithArray:titles];
        _itemArr = [NSArray arrayWithArray:items];
        [self loadData];
        [self addSubviews];
    }
    return self;
}

#pragma mark - load data
//这里对数据进行进一步的处理，做成自己需要的格式
- (void)loadData {
    
    for (int i = 0; i < _itemArr.count; i++) {
        
        NSMutableArray * array = [[NSMutableArray alloc] init];
        NSArray * arr = _itemArr[i];
        
        for (int j = 0; j < arr.count; j++) {
            
            NSMutableDictionary * dic = [[NSMutableDictionary alloc] init];
            [dic setObject:arr[j] forKey:@"title"];
            if (j == 0) {
                
                [dic setObject:@YES forKey:@"isSelected"];
            } else {
                
                [dic setObject:@NO forKey:@"isSelected"];
            }
            [array addObject:dic];
        }
        [self.dataArr addObject:array];
    }
}

#pragma mark - add subviews

- (void)addSubviews {
    
    [self addSubview:self.collectionView];
}

#pragma mark - layout subviews

- (void)layoutSubviews {
    [super layoutSubviews];
    //避免使用不含frame的对象方法时，给对象添加约束或者frame更改，筛选界面没有相应更改的问题
    _collectionView.frame = self.bounds;
    [_collectionView reloadData];
}


#pragma mark - collectionView delegate

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    
    return _titleArr.count;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    
    return [_itemArr[section] count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    RHFiltrateCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:Cell_Filtrate forIndexPath:indexPath];
    if (indexPath.row < [self.dataArr[indexPath.section] count]) {
        
        NSDictionary * dic = _dataArr[indexPath.section][indexPath.row];
        [cell configCellWithData:dic];
    }
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    //点击选择项，使选择项显示位选中状态
    NSMutableArray * array = [NSMutableArray arrayWithArray:self.dataArr[indexPath.section]];
    
    for (int i = 0; i < array.count; i++) {
        
        NSMutableDictionary * dic = array[i];
        if (i == indexPath.row) {
            
            [dic setObject:@YES forKey:@"isSelected"];
        } else {
            
            [dic setObject:@NO forKey:@"isSelected"];
        }
        [array replaceObjectAtIndex:i withObject:dic];
    }
    [_dataArr replaceObjectAtIndex:indexPath.section withObject:array];
    [_collectionView reloadData];
    //代理赋值
    if (self.delegate && [self.delegate respondsToSelector:@selector(filtrateView:didSelectAtIndexPath:)]) {
        
        [self.delegate filtrateView:self didSelectAtIndexPath:indexPath];
    }
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    
    if (kind == UICollectionElementKindSectionHeader) {
        
        RHFiltrateHeaderView * headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:Collection_FiltrateHeader forIndexPath:indexPath];
        headerView.headerTitle = _titleArr[indexPath.section];
        return headerView;
    } else {
        
        RHFiltrateFooterView * footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:Collection_FiltrateFooter forIndexPath:indexPath];
        return footerView;
    }
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    float width = [RHHelper getWidthByText:_itemArr[indexPath.section][indexPath.row] font:H15] + ItemWidth;
    return CGSizeMake(width, 30);
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
    
    return CGSizeMake(self.bounds.size.width, 40);
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {
    
    return CGSizeMake(self.bounds.size.width, 1);
}

#pragma mark - setter and getter

- (UICollectionView *)collectionView {
    
    if (!_collectionView) {
        //这里没有使用原生的UICollectionViewFlowLayout，而是使用了继承于UICollectionViewFlowLayout的一个做过处理的类
        RHCollectionViewFlowLayout * flowLayout = [[RHCollectionViewFlowLayout alloc] init];
        flowLayout.minimumLineSpacing = MarginY;
        flowLayout.minimumInteritemSpacing = MarginX;
        flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
        flowLayout.sectionInset = UIEdgeInsetsMake(0, 15, 15, 15);
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
        _collectionView.backgroundColor = [UIColor whiteColor];
        _collectionView.dataSource = self;
        _collectionView.delegate = self;
//        _collectionView.bounces = NO;
        _collectionView.showsVerticalScrollIndicator = NO;
        
        [_collectionView registerClass:[RHFiltrateCell class] forCellWithReuseIdentifier:Cell_Filtrate];
        [_collectionView registerClass:[RHFiltrateHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:Collection_FiltrateHeader];
        [_collectionView registerClass:[RHFiltrateFooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:Collection_FiltrateFooter];
    }
    return _collectionView;
}

- (NSMutableArray *)dataArr {
    
    if (!_dataArr) {
        
        _dataArr = [[NSMutableArray alloc] init];
    }
    return _dataArr;
}

@end

大家可以看到，在实现类里边我做了简单的注释，相信大家都是可以看明白的。

对于sectionHeader、sectionFooter和cell的定制就不在这里给大家展示了，大家可以根据自己的需求做出响应的定制，这里小编只是做了我们项目中的需求样式。在工程中有个工具类RHHelper.h是快速计算文字在label上展示所需宽高，如果有需要的朋友可以去git上下载demo。

demo下载地址：https://github.com/guorenhao/RHFiltrate.git

最后，希望该文章能够帮助到有需要的猿友们，愿同是程序猿的我们能够共同学习进步，在开发的道路上越走越远！谢谢！