Customize UISearchBar: Trying to get rid of the 1px black line underneath the search bar

26,391

Solution 1

I fixed this by adding a subview to the searchBar's view stack like so:

CGRect rect = self.searchBar.frame;
UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(0, rect.size.height-2,rect.size.width, 2)];
lineView.backgroundColor = [UIColor whiteColor];
[self.searchBar addSubview:lineView];

Here, self.searchBar is an UISearchBar pointer of my controller class.

Solution 2

Try this

 searchBar.layer.borderWidth = 1;

 searchBar.layer.borderColor = [[UIColor lightGrayColor] CGColor];

Solution 3

Why:

So, I've dug into the API's trying to figure out why this is happening. Apparently whomever wrote the UISearchBar API is rasterizing the lines onto an image and setting it as it's backgroundImage.

Solution:

I propose a simpler solution, if you want to set the backgroundColor and get rid of the hairlines:

searchBar.backgroundColor = <#... some color #>
searchBar.backgroundImage = [UIImage new];

Or if you just need a background image without the hairlines:

searchBar.backgroundImage = <#... some image #>

Solution 4

I have 0.5px black horizontal lines both on top and on the bottom of my UISearchBar. The only way I had so far to get rid of them is by setting its style to Minimal:

mySearchBar.searchBarStyle = UISearchBarStyleMinimal;

Solution 5

Solution for

XCode 10.1 Swift 4.2

enter image description here

Share:
26,391
strave
Author by

strave

Updated on July 09, 2022

Comments

  • strave
    strave almost 2 years

    My question is already specified in the title: I would like to get rid of the black line drawn on the bottom of the UISearchBar. Any ideas?

    Here's an image of what I mean:

    search bar with black bottom line

    UPDATE:

    I think that the line is part of the UITableView's tableHeaderView. I still don't know how to remove it.

  • strave
    strave over 12 years
    Thank you for your solutions. Unluckily both solutions don't cover the line. Maybe is it a drop shadow on top of the table view? Strange!
  • strave
    strave over 12 years
    I added the line in the layoutSubviews method of a UISearchBar's subclass. I was working with a subclass anyway.
  • Andreas Ley
    Andreas Ley over 10 years
    This hides the search text input field instead of the bar's bottom line.
  • Evan Nagle
    Evan Nagle over 10 years
    "Set the tableHeaderView to nil before putting your UISearchBar there..." Why does this work?
  • Paludis
    Paludis over 9 years
    Works for me, in my case I am using a custom bar tint color so my code is as follows (swift): searchBar.layer.borderColor = searchBar.barTintColor?.CGColor
  • Adam Eberbach
    Adam Eberbach over 9 years
    What helped me see why it works was to mistakenly set "searchBar.layer.borderColor = searchBar.tintColor?.CGColor"
  • Iulian Onofrei
    Iulian Onofrei over 8 years
    So one says to add searchBar.layer.borderColor = searchBar.barTintColor?.CGColor and one to remove that -_-
  • tyler
    tyler about 8 years
    For iOS7+ you'll want to use the setBackgroundImage:forBarPosition:barMetrics: method instead.
  • Nij
    Nij almost 7 years
    This makes textfield greyed inside serachbar
  • KamyFC
    KamyFC almost 6 years
    This solution removes the bar. Thanks @Oxcug!
  • Gaurav
    Gaurav over 4 years
    Awesome, You made my day.