在UICollectionView中search和过滤单元格

我有一个单元格的UICollectionView ,所以有两件事情我想用这个视图来完成。

首先,我想在顶部有一个search栏,可以根据用户的查询过滤单元格。 我只看到用UITableView实现的search栏,那么我该怎么做呢?

此外,我想有一个名为“filter”的button,单击时,将显示一个popup式视图控制器与一系列checkbox及其值。 因此,如果我用户select了checkbox,则一旦用户按下位于右上angular的“完成”button,它将根据他们的检查过滤单元。 如果用户不决定过滤他的search,那么左上angular也会有一个“取消”button。

我的UICollectionView的图片:

UICollectionview

我的代码

 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ static NSString *identifier = @"Cell"; backpackIcons *item = _backpackItems[indexPath.row]; NSString *photoURL = item.image_url; NSString *quality = item.quality; UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath]; UIImageView *itemImageView = (UIImageView *)[cell viewWithTag:100]; itemImageView.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:photoURL]]]; [itemImageView setBackgroundColor:Rgb2UIColor(60, 53, 46)]; if([[NSString stringWithFormat:@"%@", quality] isEqualToString:@"6"]) { [itemImageView.layer setBorderColor:[Rgb2UIColor(125, 109, 0) CGColor]]; } else if([[NSString stringWithFormat:@"%@", quality] isEqualToString:@"1"]) { [itemImageView.layer setBorderColor:[Rgb2UIColor(77, 116, 85) CGColor]]; } else if ([[NSString stringWithFormat:@"%@", quality] isEqualToString:@"3"]) { [itemImageView.layer setBorderColor:[Rgb2UIColor(71, 98, 145) CGColor]]; } else if ([[NSString stringWithFormat:@"%@", quality] isEqualToString:@"5"]) { [itemImageView.layer setBorderColor:[Rgb2UIColor(134, 80, 172) CGColor]]; } else if ([[NSString stringWithFormat:@"%@", quality] isEqualToString:@"11"]) { [itemImageView.layer setBorderColor:[Rgb2UIColor(207, 106, 50) CGColor]]; } else if ([[NSString stringWithFormat:@"%@", quality] isEqualToString:@"7"] || [[NSString stringWithFormat:@"%@", quality] isEqualToString:@"9"]) { [itemImageView.layer setBorderColor:[Rgb2UIColor(112, 176, 74) CGColor]]; } else if ([[NSString stringWithFormat:@"%@", quality] isEqualToString:@"8"]) { [itemImageView.layer setBorderColor:[Rgb2UIColor(165, 15, 121) CGColor]]; } else if ([[NSString stringWithFormat:@"%@", quality] isEqualToString:@"0"]) { [itemImageView.layer setBorderColor:[Rgb2UIColor(178, 178, 178) CGColor]]; } else if ([[NSString stringWithFormat:@"%@", quality] isEqualToString:@"13"]) { [itemImageView.layer setBorderColor:[Rgb2UIColor(56, 243, 171) CGColor]]; } else { [itemImageView.layer setBorderColor:[Rgb2UIColor(170, 0, 0) CGColor]]; } [itemImageView.layer setBorderWidth: 1.0]; return cell; } 

我已经破解了一个简单的search和过滤UICollectionView ,你可以在这里下载代码: https : //github.com/kambala-decapitator/uicollectionview-search-filter 。

我决定将search栏添加到导航栏中,但是您可以将其作为子视图添加到集合视图(并根据需要调整contentOffset属性),或者只是查看控制器的视图。 另外,也许你想显示filter为一个简单的模式视图控制器,这是从编码的angular度来看更容易:)

请注意,在真实的代码中,你应该inheritanceUICollectionViewCell,而不是像我一样使用subviews hack 🙂

timothykc已经提供了一些实现基础。 随意问,如果有什么不清楚。

首先,将“search栏”视为用于填充集合视图的数组的filter是很重要的。 一旦你以这种方式进行概念化,那么这只是一个简单的问题,想知道如何使你的filter操作成熟/智能化。

在广泛的笔画中,您可以简单地在IB中添加search栏,然后将其拖动到视图控制器。 (对你的“filterbutton”做同样的事情 – 但是让他们做IB动作。)

所以有问题的Viewcontroller.h应符合UISearchDisplayDelegate / UIsearchbardelegate

在.m文件中,您添加该方法

 searchBar:(UISearchBar *)bar textDidChange:(NSString *)searchText 

在这里,应该有一个逻辑来调整包含所有填充到集合视图中的“项目”的nsmutablearray。 一个简单的逻辑就是用你input的字母过滤数组中的对象,然后重新填充集合视图所依赖的数组。 然后,强制集合视图重新加载,以便collectionView:numberOfItemsInSection:和collectionView:cellForItemAtIndexPath:从“过滤”数组中抽取。

对于button,同样也可以在数组副本上强制一些逻辑(按照您的select进行预定义)并重新加载collectionview。

所有这些项目都是如此复杂,以至于我自己写了一个。 在github上查看: https : //github.com/sambudda/UICollectionViewWithSearchBar

如果你喜欢它的简单,那么请评价它。

两个月前,我build立了一个如何使用UICollectionViewController轻松使用UISearchBar的例子,并进行了适当的过滤和search。

我实现了KVO,UISearchBarDelegate和UICollectionViewDelegate,取得了很好的效果。 今天我更新它来添加支持UIRefreshControl。

看看这里: https : //github.com/ihomam/CollectionViewWithSearchBar