Reputation: 1481

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

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.

Upvotes: 56

Answers (13)

Chris Yarosh

Reputation: 41

I used

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var searchBar: UISearchBar!
    


    override func viewDidLoad() {
        super.viewDidLoad()
        searchBar.backgroundImage = UIImage() // Removes the line

And it worked like a charm :)

Upvotes: 4

Lance Samaria

Reputation: 19592

This is ridiculous to have to go through hoops and bounds for this little 1 px line. I've been googling around for a couple of hours to get rid of it. I tried combos of different answer to get it to work. When I came back here I realized Oxcug already had it but it's in Objective-C and that's not native for me.

Anyway here is the answer in Swift 5. If you want to have a color background inside the actual search textField I added that too.

// these 2 lines get rid of the 1 px line
searchBar.backgroundColor = .white
searchBar.backgroundImage = UIImage()

// this line will let you color the searchBar textField where the user actually types
searchBar.searchTextField.backgroundColor = UIColor.lightGray

Upvotes: 4

VBaarathi

Reputation: 803

Swift 4.2:

controller.searchBar.layer.borderWidth = 1
controller.searchBar.layer.borderColor = UIColor(red: 255/255, green: 253/255, blue: 247/255, alpha: 1.0).cgColor

Answer based on Ayush's answer.

Upvotes: 6

swift2geek

Reputation: 1812

Solution for

XCode 10.1 Swift 4.2

Upvotes: 37

DeyaEldeen

Reputation: 11817

what worked with me is, setting the searchbar barTintColor as the navbar color

    searchBar.barTintColor = UIColor.colorWithHexString(hexStr: "479F46")

after testing, it solves the problem in both iOS 10.x and 11.x

GIF :

Upvotes: -1

AndroC

Reputation: 4884

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;

Upvotes: 51

Ayush Goel

Reputation: 1103

Try this

 searchBar.layer.borderWidth = 1;

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

Upvotes: 75

Nonlinearsound

Reputation: 928

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.

Upvotes: 22

Oxcug

Reputation: 6604

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 #>

Upvotes: 54

cnotethegr8

Reputation: 7510

This question has already been solved but maybe my solution can help someone else. I had a similar problem, except I was trying to remove the 1px top border.

If you subclass UISearchBar you can override the frame like this.

- (void)setFrame:(CGRect)frame {
    frame.origin.y = -1.0f;
    [super setFrame:frame];

    self.clipsToBounds = YES;
    self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(0, 1.0f);
}

Or if you would like to fix the bottom pixel you could do something like this, (untested).

- (void)setFrame:(CGRect)frame {
    frame.origin.y = 1.0f;
    [super setFrame:frame];

    self.clipsToBounds = YES;
    self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(0, -1.0f);
}

Only for simplicity of the example are the clipsToBounds and searchFieldBackgroundPositionAdjustment in the setFrame.

Also the searchFieldBackgroundPositionAdjustment is only needed to re-center the search field.

UPDATE

It turns out that the tableView will shift 1px from updating the origin.y while the searchBar is active. It feels a little strange. I realized that the solution is as simple as setting, self.clipsToBounds = YES;

Upvotes: 3

Andrew

Reputation: 3241

You can use

  [[UISearchBar appearance] setSearchFieldBackgroundImage:[UIImage imageNamed:@"someImage.png"]forState:UIControlStateNormal];

on iOS 5+ to get rid of the line.

Upvotes: -1

Ray Fix

Reputation: 5645

Warning. This is a hack. Would like to know a better, more official way.

You can use the pony debugger to figure out where in the subview hierarchy it is. I think the thing you are see is a private UIImageView called "separator"

- (void)viewWillAppear:(BOOL)animated
{
  [super viewWillAppear:animated];
  for (UIView* view in self.searchBar.subviews)  {
    if (view.frame.size.height == 1 && [view isKindOfClass:[UIImageView class]]) {
      view.alpha = 0;
      break;
    }
  } 
}

Upvotes: 1

Mundi

Reputation: 80273

Set the tableHeaderView to nil before putting your UISearchBar there.

If that does not help, try to cover it up. First add your search bar to a generic and appropriately sized UIView (say, "wrapper") as a subview, then

CGRect frame = wrapper.frame;
CGRect lineFrame = CGRectMake(0,frame.size.height-1,frame.size.width, 1);
UIView *line = [[UIView alloc] initWithFrame:lineFrame];
line.backgroundColor = [UIColor whiteColor]; // or whatever your background is
[wrapper addSubView:line];
[line release];

And then add it to the tableHeaderView.

self.tableView.tableHeaderView = wrapper;
[wrapper release];