在UICollectionView中search和过滤单元格

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

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

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

我的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; } 

Answer 1

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

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

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

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

Answer 2

首先，将“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。

Answer 3

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

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

Answer 4

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

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

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