How make UISearchbar rectangular shape and merge with navigation bar?

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

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

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

score 0 · Answer 2 · answered Aug 04 '18 at 09:08

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

How make UISearchbar rectangular shape and merge with navigation bar?

2 Answers2

1 Rectangular UISearchbar

2 Merge with NavBar

1 Rectangular `UISearchbar`