在UICollectionView中搜索和过滤单元格 [英] Searching and filtering cells in a UICollectionView
问题描述
我有一大堆单元格的 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;
搜索和过滤 UICollectionView 的例子，你可以在这里下载代码： https://github.com/kambala-decapitator/uicollectionview-search-filter 。
我决定添加搜索栏导航栏，但你可以自由地将它作为一个子视图添加到集合视图（并根据需要调整 contentOffset 属性），或者只是查看控制器的视图。另外，也许你会想把过滤器显示为一个简单的模式视图控制器，从编码的角度来看这更容易：）
请注意，在实际代码你应该继承UICollectionViewCell，而不是象下面这样使用 subviews hack：）
timothykc 已经提供了一些实现基础。随意问，如果有什么不清楚的。
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;
}
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.
这篇关于在UICollectionView中搜索和过滤单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
