Remove top and bottom border of UISearchBar and shadow? - ios

Question

I have created a .xib with a UISearchBar.
I am looking to remove the top and bottom borders as seen in this image:
There is also what looks like a shadow underneath the top border.
I have tried changing backgrounds/tint colours etc, but struggling to get it to disappear.
Any help would be welcome, any ideas?
EDIT
So the code below allows me to get rid of the border at the top and bottom, but not the weird drop shadow. I've added green background to show it more clearly.
Also, what would be the best way to add a border around the text box (rather than the view)?? Thanks
//** This is what I'm trying to do: https://stackoverflow.com/questions/33107058/uiviewcontroller-sizing-as-maincontroller-within-uisplitviewcontroller
and here is the code I am using.
import UIKit
class TopSearchViewController: UIView {
var expanded: Int = 0
#IBOutlet weak var trailingConstraint: NSLayoutConstraint!
#IBOutlet var contentView: UIView!
#IBOutlet weak var searchBar: UISearchBar!
#IBAction func advancedSearchButton(sender: AnyObject) {
if expanded == 0 {
self.layoutIfNeeded()
UIView.animateWithDuration(0.1, animations: {
self.trailingConstraint.constant = 200
self.layoutIfNeeded()
})
expanded = 1
} else {
self.layoutIfNeeded()
UIView.animateWithDuration(0.1, animations: {
self.trailingConstraint.constant = 25
self.layoutIfNeeded()
})
expanded = 0
}
}
override init(frame: CGRect) { // for using CustomView in code
super.init(frame: frame)
self.commonInit()
}
required init(coder aDecoder: NSCoder) { // for using CustomView in IB
super.init(coder: aDecoder)
self.commonInit()
}
private func commonInit() {
NSBundle.mainBundle().loadNibNamed("TopSearchViewController", owner: self, options: nil)
contentView.frame = self.bounds
contentView.autoresizingMask = .FlexibleHeight | .FlexibleWidth
self.addSubview(contentView)
self.searchBar.layer.borderWidth = 1
self.searchBar.layer.borderColor = UIColor.whiteColor().CGColor
println(searchBar)
for subview in searchBar.subviews {
println("hello")
var textField : UITextField
if (subview.isKindOfClass(UITextField)) {
textField = subview as! UITextField
textField.borderStyle = .None
textField.layer.borderWidth = 1
textField.layer.borderColor = UIColor.lightGrayColor().CGColor
textField.layer.cornerRadius = 14
textField.background = nil;
textField.backgroundColor = UIColor.whiteColor()
}
}
}
func viewDidLoad() {
}
}

Answer 1

Set the bar's backgroundImage to an empty UIImage, not nil:
searchBar.backgroundImage = UIImage()
You may also set the barTintColor, as you specified in your comment below.

Answer 2

With Xcode 11, in the Storyboard, you can set 'Search Style' to 'Minimal.'
In code: searchBar.searchBarStyle = .minimal

Answer 3

I have tried all answers, but they didn't remove the 1px inner shadow of UISearchBar's UITextfield inside.
I solved this problem by increasing white border's width.
It overlaps on shadow.
searchBar.layer.borderWidth = 10
searchBar.layer.borderColor = UIColor.white.cgColor

Answer 4

# Method 1
With Thanking to #andrewlundy, Storyboard method is like this. (Xcode 11.*)
Select UISearch at the storyboard (assumed: you have already dragged an UISearch Bar to your UIView/UIViewController)
Goto Attribute Inspector and you will see Search Style
Select Minimal from Search Style dropdown.
That's it...
# Method 2
Else if you want to do this programmatically, in swift
create an IBOutlet for UISearch in your ViewController swift file
searchBar.searchBarStyle = .minimal
here instead of searchBar, put your UISearch outlet's name

Answer 5

Try this:
searchBar.layer.borderWidth = 1
searchBar.layer.borderColor = UIColor.whiteColor().CGColor
EDIT:
I believe that shadow is caused by inner UITextField. Try with below code:
var textField : UITextField
for subview in searchBar.subviews {
if (subview.isKindOfClass(UITextField)) {
textField = subview as! UITextField
textField.borderStyle = .None
textField.layer.borderWidth = 1
textField.layer.borderColor = UIColor.lightGrayColor().CGColor
textField.layer.cornerRadius = 14
textField.background = nil;
textField.backgroundColor = UIColor.whiteColor()
}
}

Answer 6

There's another trick:
For the bottom border, you can cover it by bellow view( for example: tableView) by -1 pixel.
For the top border, move it up 1 pixel to under navigation bar also fix this.

Answer 7

I used following code in swift5 to implement searchbar
List item
let searchbar: UISearchBar =
{
let sear = UISearchBar()
sear.tintColor = Mycolor().lightgray1
sear.backgroundColor = Mycolor().lightgray1
sear.barTintColor = Mycolor().lightgray1
sear.placeholder = "Search Asset"
sear.layer.cornerRadius = 30
sear.barStyle = .default
sear.backgroundImage = UIImage()
// sear.addShadow(offset: CGSize(width: 10, height: 10), color: UIColor.darkGray, radius: 20, opacity: 5)
return sear
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(searchbar)
}
override func viewLayoutMarginsDidChange() {
self.searchbar.frame = CGRect(x: 10, y: 20, width: self.view.frame.width - 20, height: 50)
}

Answer 8

guard let searchTextField = searchBar.value(forKey: "searchField") as? UITextField else { return }
searchTextField.borderStyle = .none
if you want to remove the border completely
Swift 5

Answer 9

Try searchTextField property for minimum deployment target iOS 13 in case other suggested options not working for you.
if #available(iOS 13.0, *) {
searchBar.searchTextField.backgroundColor = UIColor.clear
searchBar.searchTextField.borderStyle = .none
}