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

Solution 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.

Solution 2

First, it's important to think of the "search bar" as a filter for the array used to populate the collection view. Once you conceptualize it that way, then it's a simply a question of how sophisticated/intelligent you want to make your filter operation.

In broad strokes you can simply add the search bar in IB, and then click drag it to the view controller. (do the same with your "filter buttons" -- but make them IB actions.)

So the Viewcontroller.h in question should conform to both UISearchDisplayDelegate/UIsearchbardelegate

In the .m file, you add the method

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

Here, there should be the logic to tweak the nsmutablearray that contains all the "items" that are populated into the collection view. An easy logic is to filter objects out of the array by letters you type, and then repopulate the array the collection view relies upon based on that. Then, you force the collection view to reload so that collectionView:numberOfItemsInSection: and collectionView:cellForItemAtIndexPath: draw from the "filtered" array.

For the buttons, you likewise force some logic upon the array copy (predefined as you choose) and reload the collectionview.

Solution 3

All these projects were so needlessly complicated that I ended up writing one on my own. Check it out here at github: https://github.com/sambudda/UICollectionViewWithSearchBar

If you love the simplicity of it then please rate it up.