4

For quite some time, I had been trying to no avail to remove a pernicious line above my UISearchBar. It appears dark on a light background or light on a dark background:

enter image description here enter image description here

I looked at this question, but it had nothing to do with the separator or pull-to-refresh. When I finally decided to give up and ask for help, I started poking around again and found a blindingly simple (though perhaps not entirely intuitive) solution, so I thought I'd share it in case others are facing the same issue. I configure the search bar as follows:

// I tried this drawing method
[self.searchBar setBackgroundImage:[[UIImage imageNamed:@"linen_bg_bar.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)]];
// and this one.
[self.searchBar setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"linen_bg_bar.png"]]];
// Same problem either way.

[self.searchBar setPlaceholder:NSLocalizedString(@"Filter", @"placeholder text in the search bar")];
[self.searchBar setSearchFieldBackgroundImage:[[UIImage imageNamed:@"linen_textfield_search.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(16, 16, 16, 16)] forState:UIControlStateNormal];
[self.searchBar setImage:[UIImage imageNamed:@"linen_icon_search.png"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];
self.table.tableHeaderView = self.searchBar;
[self.table setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"linen_bg_dark.png"]]];

Per this post's suggestion, I tried drawing on top of it, but it seemed the drawing still got rendered below the line.

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

See the example with my red "cover-up" line:

enter image description here

Community
  • 1
  • 1
enjayem
  • 941
  • 8
  • 21

4 Answers4

10

I'm not sure this will work, but it makes sense, based on having to set a negative y value for the cover-up view. 

searchBar.clipsToBounds = YES;
Undo
  • 25,519
  • 37
  • 106
  • 129
  • 1
    Works perfectly! But it still seems strange to me that the search bar is drawing a line *outside* its bounds. – enjayem Mar 13 '13 at 16:17
  • @enjayem I know. Are you specifically turning `clipsToBounds` off somewhere? – Undo Mar 13 '13 at 19:18
  • Nope. All I'm doing is setting custom background images. – enjayem Mar 13 '13 at 20:38
  • man, this answer needs to be included in http://stackoverflow.com/questions/7620564/customize-uisearchbar-trying-to-get-rid-of-the-1px-black-line-underneath-the-se and http://stackoverflow.com/questions/8676320/how-to-remove-the-extra-black-line-beneath-uisearchbar – Jeremy Bader Dec 13 '16 at 01:41
3

Hope this helps:

self.searchBar.layer.borderColor = Color.CGColor;
self.searchBar.layer.borderWidth = 1;

you can find searchBar property in your searchController

V.Ignatov
  • 23
  • 4
2

In my case I was creating a UISearchBar in code and placing it in the nav bar as the right bar button item. Setting the background image to an empty image removed the 1 pixel line.

searchBar.backgroundImage = UIImage()
Kyle Clegg
  • 38,547
  • 26
  • 130
  • 141
1

It turns out that all I had to do was adjust the frame of the cover-up line to start 1pt above the search bar and I got a pretty 1pt gray line on top of my search bar.

CGRect rect = self.searchBar.frame;
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, -1, rect.size.width, 1)];
lineView.backgroundColor = [UIColor colorWithHexString:@"353535" alpha:1.0];
[self.searchBar addSubview:lineView];

Voila.

enjayem
  • 941
  • 8
  • 21