前言：一般的筛选界面都是由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
最后，希望该文章能够帮助到有需要的猿友们，愿同是程序猿的我们能够共同学习进步，在开发的道路上越走越远！谢谢！
