UICollectionview实现搜索

Question

我在UICollectionview中嵌入了UIViewController。此外，我在UICollectionview中添加了一个搜索栏到UIVollection视图，我不知道在哪里通过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位于标题之上。知道怎么把它放在标题上面吗？绿色的是标题。

Answer 1

我在我的应用程序中执行此操作的方法是将顶部内容插入设置为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];

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

Answer 3

尝试将部分插图设置为集合视图布局。假设您正在使用Flow Layout，  调用

[(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);
}

为了更好的控制。

Answer 4

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

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