Search code examples
ios7uisearchbaruitoolbaruitableview

UISearchBar inside of UIView inside of UIToolbar background color issue


Okay, so I wanted to have a UISearchbar with a UIButton on the left hand side and from searching around I found that the best way of doing this is to add both items to a UIToolbar and then add that to the header view of the tableview. So I got that part down, no problems there, but then I also wanted to have the Cancel button show up on the Toolbar as well when the users starts typing, so again I search around and find that in order to get that to work the UISearchbar needs to be nested in a UIView and that's where my problem is occuring. I don't know if it's due to the order of how I'm adding items or due to the order in which I'm adding the items but the background color of either the view or something else is interfering with the background color of the Toolbar. If you look at the screenshot below the background color of the UIToolBar (just using the darkGrayColor for it) is showing up correctly but then the SearchBar has a darker color to it. I've tried setting the holding view's background to clearColor and even tried setting the SearchBar's background color to clear as well but so far I can't seem to get the UISearchBar to match the UIBarButton that I have. Below is the code that I have for setting up the SearchBar/ToolBar

Toolbar screenshot

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {

if (section == 0) {
    //Create the SearchBar
    UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, 280, 44)];
    searchBar.placeholder = @"Search for Client";
    searchBar.delegate = self;
    searchBar.tag = kSearchBarTag;
    //Create view to wrap search bar in
    UIView *barWrapper = [UIView new];
    barWrapper.frame = searchBar.bounds;
    barWrapper.backgroundColor = [UIColor clearColor];
    [barWrapper addSubview:searchBar];
    UIBarButtonItem  *searchBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:searchBar];
    //Create the Sort Button
    UIBarButtonItem *sortButton = [UIBarButtonItem new];
    [sortButton setImage:[UIImage imageNamed:iconSort]];
    [sortButton setTarget:self];
    [sortButton setAction:@selector(SortButtonPressed:)];
    //Create the ToolBar
    UIToolbar  *searchToolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0,0,tableView.bounds.size.width,44)];
    searchToolbar.backgroundColor = [UIColor darkGrayColor];
        [searchToolbar setItems:[NSArray arrayWithObjects:sortButton,searchBarButtonItem, nil] animated:YES];

        return searchToolbar;
    }
    return nil;
}

#pragma mark - SearchBar Delegate
-(BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar {

    searchBar.showsCancelButton = YES;
    return TRUE;
}

-(void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {

    searchBar.showsCancelButton = NO;
    [searchBar resignFirstResponder];
}

Solution

  • Set the search style to minimal, and the grey background will disappear.

    Interface Builder

    Open attributes inspector and select minimal

    search style minimal in interface builder

    Objective-C code

    searchBar.barStyle = UISearchBarStyleMinimal;