UICollectionview 实现搜索答案

【问题标题】：UICollectionview implementing searchUICollectionview 实现搜索
【发布时间】：2014-05-21 08:13:55
【问题描述】：

我在UIViewController 中嵌入了一个UICollectionview。我还向 UIViewController 添加了一个搜索栏，就像在 UICollectionview 中一样，我不知道通过 Storyboard 将它放在哪里。我期待在UICollectionview 中搜索会像在Tableview 中一样简单。但它似乎有自己的规则。有没有什么好的和简单的例子来展示如何在UICollectionview 中实现简单的搜索，就像在UITableview 中一样？我想实现用户可以在搜索栏中输入，UICollectionview 显示结果。我找到了实现searchbar的解决方案：

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.collectionView.frame), 44)];
    self.searchBar.autocorrectionType = UITextAutocorrectionTypeNo;
    self.searchBar.delegate = self;
    [self.collectionView addSubview:self.searchBar];
    [self.collectionView setContentOffset:CGPointMake(0, 44)];
}

- (void) viewWillAppear:(BOOL)animated{
    // to show search bar
    [self.collectionView setContentOffset:CGPointMake(0, 0)];
    // to hide search bar
    [self.collectionView setContentOffset:CGPointMake(0, 44)];
}

-(void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    [searchBar setShowsCancelButton:YES animated:YES];
}

-(void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
    [searchBar setText:@""];
    [searchBar setShowsCancelButton:NO animated:YES];
    [searchBar resignFirstResponder];
}

这很好用，它会显示一个searchbar，这是一个好的开始，但现在我再也看不到我的标题了，因为searchbar 位于标题上方。知道如何把它放在标题上方吗？绿色的是标题。

【问题讨论】：

标签： ios search uiviewcontroller uicollectionview

【解决方案1】：

我在我的应用程序中这样做的方式是将顶部的 Content Insets 设置为 44，这是我的 ViewDidLoa 中 UISearchBar 的默认高度：

[self.collectionView setContentInset:UIEdgeInsetsMake(44, 0, 0, 0)];

然后我添加 UISearchBar 并将其 Y 点设置为 -44 和 44 作为高度。

UISearchBar *searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(0, -44, self.view.frame.size.width, 44.0)];
[self.collectionView addSubview:searchBar];

【讨论】：

您可以通过使用动态值而不是硬编码值来升级现有代码并编写更多面向未来的应用程序：NSLog(@"%f", [UIApplication sharedApplication].statusBarFrame.size.height); // 20.000000NSLog(@"%f", self.navigationController.navigationBar.frame.size.height); // 44.000000

【解决方案2】：

一种方法是在集合视图的标题视图中添加搜索栏。使用- (UICollectionReusableView *)collectionView: (UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath 方法。

示例代码 -

- (UICollectionReusableView *)collectionView: (UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {

//Custom class for the header view. Controls are defined in the Storyboard
HeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:
                                     UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];

/*
// Header view customization code
*/
[headerView.filterButton setImage: [[UIImage imageNamed:@"ButtonImage.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forState:UIControlStateNormal];

CGFloat spacing = 5; // the amount of spacing to appear between image and title
headerView.filterButton.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
headerView.filterButton.titleEdgeInsets = UIEdgeInsetsMake(5, spacing, 0, 0);

NSString *buttonTitle = @"Button Title";
[headerView.filterButton setTitle:buttonTitle forState:UIControlStateNormal];    
headerView.backgroundColor = [UIColor redColor];


/*
// Add the Search Bar
*/
UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(headerView.frame), 44)];
searchBar.autocorrectionType = UITextAutocorrectionTypeNo;
searchBar.delegate = self;

[headerView addSubview:searchBar];

return headerView;
}

【讨论】：

【解决方案3】：

尝试将 section inset 设置为您的集合视图布局。假设您使用的是流布局，打电话

[(UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout setSectionInset:UIEdgeInsetsMake(64,0,0,0)];

在viewDidLoad.

或者，你可以实现这个流布局委托UICollectionViewDelegateFlowLayout的方法，

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(64,0,0,0);
}

为了更好的控制。

【讨论】：

【解决方案4】：

删除CGRectGetWidth(self.collectionView.frame) 并设置手动宽度，然后对其进行精细重新排列。因为您正在将子视图添加到集合视图中，对吗？无需设置collectionView.frame。

 self.searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(2, 10, 70, 44)];

【讨论】：