Customize UISearchBar: Trying to get rid of the 1px black line underneath the search bar
IphoneIosIpadUisearchbarIphone Problem Overview
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:
UPDATE:
I think that the line is part of the UITableView
's tableHeaderView
. I still don't know how to remove it.
Iphone Solutions
Solution 1 - Iphone
Try this
searchBar.layer.borderWidth = 1;
searchBar.layer.borderColor = [[UIColor lightGrayColor] CGColor];
Solution 2 - Iphone
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 3 - Iphone
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 4 - Iphone
Solution 5 - Iphone
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 6 - Iphone
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.
Solution 7 - Iphone
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
Solution 8 - Iphone
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];
Solution 9 - Iphone
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;
Solution 10 - Iphone
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 :)
Solution 11 - Iphone
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;
}
}
}
Solution 12 - Iphone
You can use
[[UISearchBar appearance] setSearchFieldBackgroundImage:[UIImage imageNamed:@"someImage.png"]forState:UIControlStateNormal];
on iOS 5+ to get rid of the line.