在UICollectionView中搜索和过滤单元格

Question

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

Answer 1

首先，重要的是要将“搜索栏”视为用于填充集合视图的数组的过滤器。一旦您以这种方式概念化它，那么问题就很简单了：您希望过滤器操作有多复杂/智能。

粗略地说，您可以简单地在 IB 中添加搜索栏，然后单击将其拖动到视图控制器。（对“过滤器按钮”执行相同操作 - 但将它们设置为 IB 操作。）

因此，有问题的 Viewcontroller.h 应该符合 UISearchDisplayDelegate/UIsearchbardelegate

在 .m 文件中，添加方法

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

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

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