Swift - Customizing UISearchBar design programmatically - swift

Question

I'm trying to customize UISearchBar design programmatically. I tried adding a bunch of codes but only a few places are changed.
This is the design I want to create.
And this is how it looks now.
I screen-captured the second image from the simulator so it's bigger.
Anyways, I'm trying to make my search bar has
Lighter background color
Shorter textfield in height
Textfield to have less corner radious
Here are my codes:
let searchBar = UISearchBar(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 60))
[In viewDidLoad()]
searchBar.delegate = self
searchBar.isTranslucent = false
searchBar.placeholder = "Search the phrase"
searchBar.tintColor = UIColor(red:0.73, green:0.76, blue:0.78, alpha:1.0)
searchBar.setImage(UIImage(named: "search"), for: .search, state: .normal)
let forTextField = searchBar.value(forKey: "searchField") as? UITextField
forTextField?.textColor = UIColor(red:0.31, green:0.31, blue:0.31, alpha:1.0)
forTextField?.font = UIFont(name: "HelveticaNeue-Light", size: 14)
forTextField?.clipsToBounds = true
forTextField?.layer.cornerRadius = 5
forTextField?.frame.size.height = 30
I would appreciate your help!

Answer 1

Here is the way you can achieve that:
class ViewController: UIViewController, UISearchBarDelegate {
let searchBar = UISearchBar(frame: CGRect(x: 0, y: 20, width: UIScreen.main.bounds.width, height: 60))
override func viewDidLoad() {
super.viewDidLoad()
searchBar.delegate = self
searchBar.isTranslucent = false
searchBar.placeholder = "Search the phrase"
searchBar.tintColor = UIColor(red:0.73, green:0.76, blue:0.78, alpha:1.0)
//1. Lighter background color
searchBar.barTintColor = UIColor(netHex: 0xE6E6E6)
self.view.addSubview(searchBar)
}
override func viewDidAppear(_ animated: Bool) {
for subView in searchBar.subviews {
for subsubView in subView.subviews {
if let textField = subsubView as? UITextField {
var bounds: CGRect
bounds = textField.frame
//2. Shorter textfield in height
bounds.size.height = 28
textField.bounds = bounds
//3. Textfield to have less corner radious
textField.layer.cornerRadius = 5 //Probably you can play with this and see the changes.
textField.clipsToBounds = true
}
}
}
}
}
extension UIColor {
convenience init(r: Int, g: Int, b: Int, a: Int = 255) {
self.init(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: CGFloat(a) / 255.0)
}
convenience init(netHex:Int) {
self.init(r:(netHex >> 16) & 0xff, g:(netHex >> 8) & 0xff, b:netHex & 0xff)
}
}