ios - Searching and filtering cells in a UICollectionView

Question

I have a UICollectionView with a bunch of cells, and so there are two things I want accomplish with this view.

First, I want to have a search bar at the top that will be able to filter the cells according to the users' query. I have only seen search bar implemented with UITableView, so how would I go about doing this?

Also, I would like to have a button called "Filters," that when clicked, would show a pop-up view controller with a series of checkboxes along with their values. So if I user selects the check box, it will filter the cells according to their checks once the user presses the "Done" button, which would be located at the top right corner. There would also be a "Cancel" button at the top left if the user doesn't decide to filter his search.

A picture of my UICollectionView:

MY CODE

- (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

I've hacked a simple example of searching and filtering the UICollectionView, you can download the code here: https://github.com/kambala-decapitator/uicollectionview-search-filter.

I decided to add the search bar to navigation bar, but you're free to add it as a subview to collection view (and adjust contentOffset property if needed) or simply to view controller's view. Also, maybe you'd want to show Filters as a simple modal view controller, which is a bit easier from the coding point of view :)

Note that in real code you should subclass UICollectionViewCell and not use subviews hack like I do :)

timothykc has already provided some implementation basics. Feel free to ask if something is unclear.