在 UICollectionView 中搜索和过滤单元格

Posted

技术标签:

【中文标题】在 UICollectionView 中搜索和过滤单元格【英文标题】:Searching and filtering cells in a UICollectionView 【发布时间】:2014-07-29 23:04:32 【问题描述】:

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

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

另外,我想要一个名为“过滤器”的按钮,单击它时会显示一个弹出视图控制器,其中包含一系列复选框及其值。因此,如果我用户选中该复选框,一旦用户按下位于右上角的“完成”按钮,它将根据他们的检查过滤单元格。如果用户不决定过滤他的搜索,左上角也会有一个“取消”按钮。

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

【问题讨论】:

与您提出的实际问题无关,但我建议您在所有 if/else 语句之前将 quality 读入 int 值,这样您就不必继续比较字符串值。 (例如int qualityValue = [quality intValue]; 你甚至可以使用switch 语句来进一步加快速度。 @Stonz2 感谢您的想法。我们修改了代码,让它运行得更快。 【参考方案1】:

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

如果您喜欢它的简单性,请给它评分。

【讨论】:

【参考方案2】:

两个月前,我构建了一个示例,说明如何通过适当的过滤和搜索轻松地将 UISearchBar 与 UICollectionViewController 一起使用。

我实现了 KVO、UISearchBarDelegate 和 UICollectionViewDelegate 来达到很好的效果。今天我更新了它以添加对 UIRefreshControl 的支持。

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

【讨论】:

【参考方案3】:

我已经破解了一个搜索和过滤UICollectionView 的简单示例,您可以在此处下载代码:https://github.com/kambala-decapitator/uicollectionview-search-filter。

我决定将搜索栏添加到导航栏,但您可以将其作为子视图添加到集合视图(如果需要,还可以调整 contentOffset 属性)或只是查看控制器的视图。另外,也许您希望将过滤器显示为一个简单的模式视图控制器,从编码的角度来看这更容易:)

请注意,在实际代码中,您应该继承 UICollectionViewCell 而不是像我一样使用subviews hack :)

timothykc 已经提供了一些实现基础。如果有不清楚的地方,请随时询问。

【讨论】:

我会使用 uisearchbar 还是带有显示控制器的搜索栏 UISearchDisplayController 依赖于 UITableView (它在那里显示搜索结果),所以我认为这不是你的情况。 嗨,坎巴拉。感谢您的回答。如果我还有什么问题可以在这里提问吗? 当然可以,为什么不呢 我如何能够用多个值标记单元格。比如,我想按特定类别过滤单元格,而不仅仅是按名称。【参考方案4】:

首先,将“搜索栏”视为用于填充集合视图的数组的过滤器很重要。一旦你以这种方式对其进行概念化,那么这只是一个简单的问题,即你想让你的过滤器操作有多复杂/智能。

您可以简单地在 IB 中添加搜索栏,然后单击将其拖动到视图控制器。 (对你的“过滤器按钮”做同样的事情——但让它们成为 IB 动作。)

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

在 .m 文件中,添加方法

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

在这里,应该有调整包含填充到集合视图中的所有“项目”的 nsmutablearray 的逻辑。一个简单的逻辑是通过您键入的字母从数组中过滤出对象,然后基于此重新填充集合视图所依赖的数组。然后,强制集合视图重新加载,以便 collectionView:numberOfItemsInSection: 和 collectionView:cellForItemAtIndexPath: 从“过滤”数组中绘制。

对于按钮,您同样可以在数组副本上强制执行一些逻辑(根据您的选择预定义)并重新加载集合视图。

【讨论】:

再次感谢您的回答。如果我还有什么问题可以在这里提问吗? 我会间歇性工作(工作和家庭:),但可以肯定的是,如果我能提供一些指导,我会很乐意。 我在 uicollectionview 中实现搜索栏时遇到问题。你能加入我的聊天室来帮助我吗?谢谢。 chat.***.com/rooms/57668/… 你能看看我的新问题吗?谢谢。 ***.com/questions/24874242/… 你能看看我的新问题吗?谢谢。 ***.com/questions/24874242/…

以上是关于在 UICollectionView 中搜索和过滤单元格的主要内容,如果未能解决你的问题,请参考以下文章

在 Swift 3 中过滤 UICollectionview 上的结果不起作用?

如何使用 UICollectionView 提供 Search-As-You-Type 过滤?

苹果照片应用程序中的过滤器 UIScrollView/UICollectionView 是如何实现的,它打开得如此之快?

UICollectionView 不重绘

UICollectionView ReloadData 未正确显示内容

将搜索栏添加到 UICollectionView