How make UISearchbar rectangular shape and merge with navigation bar? - ios

Question

Hello I'm trying to change the UISearchbar to rectangular shape rather then rounded rectangular and merge it with the navigation bar with same color.
The background color of the navigation bar should be the same as the background of the search bar but there's difference and also there's a clear edge shown both should show the background color #be1b25 and not the #bc303a. As well the textfield still showing rounded rectangle and not fully rectangle.
The Main View Controller code
#IBOutlet weak var searchBar: UISearchBar!
self.navigationController?.navigationBar.isTranslucent = true
navigationController?.navigationBar.backgroundColor = UIColor().HexToColor(hexString: REDCOLOR)
searchBar.backgroundColor = UIColor().HexToColor(hexString: REDCOLOR)
searchBar.tintColor = UIColor().HexToColor(hexString: REDCOLOR)
searchBar.barTintColor = UIColor().HexToColor(hexString: REDCOLOR)
searchBar.barStyle = .default
searchBar.placeholder = NetworkManager.sharedInstance.language(key: "searchentirestore")
searchBar.layer.cornerRadius = 0;
searchBar.clipsToBounds = false;
searchBar.barTintColor = UIColor().HexToColor(hexString: REDCOLOR)
searchBar.layer.borderWidth = 0
//searchBar.layer.borderColor = UIColor.clear as! CGColor
The UISearchBar Extension
extension UISearchBar {
private var textField: UITextField? {
return subviews.first?.subviews.flatMap { $0 as? UITextField }.first
}
private var activityIndicator: UIActivityIndicatorView? {
return textField?.leftView?.subviews.flatMap{ $0 as? UIActivityIndicatorView }.first
}
var isLoading: Bool {
get {
return activityIndicator != nil
} set {
if newValue {
if activityIndicator == nil {
let newActivityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .gray)
newActivityIndicator.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
newActivityIndicator.startAnimating()
newActivityIndicator.color = UIColor().HexToColor(hexString: BUTTON_COLOR)
newActivityIndicator.backgroundColor = UIColor.white
textField?.leftView?.addSubview(newActivityIndicator)
let leftViewSize = textField?.leftView?.frame.size ?? CGSize.zero
newActivityIndicator.center = CGPoint(x: leftViewSize.width/2, y: leftViewSize.height/2)
}
} else {
activityIndicator?.removeFromSuperview()
}
}
}
Any help please, this is Swift 3. Thanks in advance

Answer 1

so there a few things you are dealing with
1 Rectangular UISearchbar
either you will traverse subviews of native UISearchbar and change its right sublayers corner radiuses, but this is a hack, Apple can change that hierarchy and you will be at the beginning again
you can create your own component that will look like UISearchbar, few UIViews, and UITextfield with some UIImageViews.
there are few libraries on GitHub you can use https://github.com/CosmicMind/Samples
there is also a similar question here iOS 11 UISearchBar in UINavigationBar
2 Merge with NavBar
one way is to use UISearchController with iOS 11
or you can with your custom UISearchbar you can either add it below the NavBar in UIView, not in navigation, but the NavBar cannot be translucent in this case, because you will never achieve the same color space
you can add your custom view as custom UIView into titleView in NavBar

Answer 2

Extend the UISearchBar and apply the customization.
Set the UISearchBar as titleView to the NavigationController
class SearchField: UISearchBar {
override init(frame: CGRect) {
super.init(frame: frame)
// Corner radius
self.layer.cornerRadius = 2.0
self..clipsToBounds = true
// Textfield inside color.
if let searchTextField = self.value(forKey: "_searchField") as? UITextField {
// Set TextField property
// Set the corner radius for TextField (not suggested)
if let clearButton = searchTextField.value(forKey: "_clearButton") as? UIButton {
// Set the clear button property
}
}
}
}
// Use it in the ViewController.
let searchBar = SearchField()
self.navigationItem.titleView = searchBar