CODEWITHSUNDEEP
iossearchuiviewcontrolleruicollectionview
halloway4b
halloway4b

Reputation: 573

UICollectionview implementing search

I have a UICollectionview embedded in a UIViewController. Also I have added a searchbar to the UIViewController as in a UICollectionview I don't know where to put it via Storyboard. I was expecting that searching in a UICollectionview would be as simple like in a Tableview. But it seems to have its own rules. Are there any good and easy example that show how to implement a simple search in a UICollectionview like in a UITableview? I want to achieve that the user can type in the searchbar and the UICollectionview displays the results. I have found solution to implement a 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];
}

This works fine and it displays a searchbar which is a good start but now I can't see my header anymore because the searchbar lies over the header. Any idea how to put it above the header?The green colored one is the header.

Searchbar over Headerview

Upvotes: 4

Views: 8224

Answers (4)

tann81
tann81

Reputation: 41

One way to do it is add the search bar in the header view of the collection view. Use the - (UICollectionReusableView *)collectionView: (UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath method.

Sample code -

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

Upvotes: 1

Ansyar Hafid
Ansyar Hafid

Reputation: 279

The way i did it in my app is by setting the top Content Insets to 44 which is the default height of UISearchBar in my ViewDidLoa :

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

and then I add the UISearchBar and set it's Y point to -44 and 44 for the height.

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

Upvotes: 3

anu
anu

Reputation: 1

Remove the CGRectGetWidth(self.collectionView.frame) and set manual width instead then its finely rearrange with it. Because you are adding subview to collection view right? No need to set collectionView.frame.

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

Upvotes: 0

user2607823
user2607823

Reputation:

Try setting section inset to your collection view layout. Assuming you are using a Flow Layout, call

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

in viewDidLoad.

Or, you can implement this method of flow layout delegate UICollectionViewDelegateFlowLayout, 

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

for a better control.

Upvotes: 0

Related Questions