Question

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

首先，我希望在顶部有一个搜索栏，可以根据用户过滤单元格＆＃39;查询。我只看到使用UITableView实现了搜索栏，那么我该如何做呢？

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

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

Answer 1

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

我决定将搜索栏添加到导航栏，但您可以将其作为子视图添加到集合视图（如果需要，可以调整contentOffset属性），或者只是查看控制器的视图。此外，也许你想将滤波器显示为一个简单的模态视图控制器，从编码的角度来看这有点容易：）

请注意，在实际代码中，您应该将UICollectionViewCell子类化，而不是像我一样使用subviews hack：）

timothykc已经提供了一些实施基础知识。如果有什么不清楚，请随时询问。

Answer 2

首先，想一想＆＃34;搜索栏＆＃34;作为用于填充集合视图的数组的过滤器。一旦您按照这种方式对其进行概念化，那么它只是一个关于您希望如何进行过滤操作的复杂/智能的问题。

在广泛的笔触中，您只需在IB中添加搜索栏，然后单击将其拖动到视图控制器即可。（对你的＆＃34;过滤器按钮＆＃34做同样的事情;但是让它们成为IB动作。）

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

在.m文件中，添加方法

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

在这里，应该有一个逻辑来调整包含所有＆＃34;项目的nsmutablearray＆＃34;填充到集合视图中的。一个简单的逻辑是通过您键入的字母将对象过滤出数组，然后根据该字符重新填充集合视图所依赖的数组。然后，强制集合视图重新加载，以便collectionView：numberOfItemsInSection：和collectionView：cellForItemAtIndexPath：从＆＃34;过滤＆＃34;阵列。

对于按钮，您同样在数组副本上强制使用某些逻辑（根据您的选择预定义）并重新加载集合视图。

Answer 3

所有这些项目都是如此不必要地复杂化，我最终自己写了一个。请在github上查看：https://github.com/sambudda/UICollectionViewWithSearchBar

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

Answer 4

两个月前，我构建了一个如何使用UICollectionViewController轻松使用UISearchBar的示例，并进行了适当的过滤和搜索。

我实现了KVO，UISearchBarDelegate和UICollectionViewDelegate以获得良好的结果。今天我更新了它以添加支持UIRefreshControl。

请在此处查看：https://github.com/ihomam/CollectionViewWithSearchBar

在UICollectionView中搜索和过滤单元格

4 个答案: