How can I put Custom SearchBar on NavigationBar?

Question

I want to put Custom SearchBar on NavigationBar, not under NavigationBar.

I use SHSearchBar .

https://github.com/Blackjacx/SHSearchBar

myStoryboard and Simulator's Image is like this

var searchBar4: SHSearchBar!

var rasterSize: CGFloat = 11.0
let searchbarHeight: CGFloat = 44.0

override func viewDidLoad() {
    super.viewDidLoad()

    let searchGlassIconTemplate = UIImage(named: "icon-search")!.withRenderingMode(.alwaysTemplate)

    // TODO: SearchBar4: centered text lets the icon on the left - this is not intended!
    let leftView4 = imageViewWithIcon(searchGlassIconTemplate, rasterSize: rasterSize)
    searchBar4 = defaultSearchBar(withRasterSize: rasterSize, leftView: leftView4, rightView: nil, delegate: self)
    searchBar4.textAlignment = .center
    searchBar4.text = NSLocalizedString("sbe.exampleText.centered", comment: "")

    view.addSubview(searchBar4)

    searchBar4.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: rasterSize).isActive = true
    searchBar4.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: rasterSize).isActive = true
    searchBar4.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -rasterSize).isActive = true
    searchBar4.heightAnchor.constraint(equalToConstant: searchbarHeight).isActive = true
}

func imageViewWithIcon(_ icon: UIImage, rasterSize: CGFloat) -> UIImageView {
    let imgView = UIImageView(image: icon)
    imgView.frame = CGRect(x: 0, y: 0, width: icon.size.width + rasterSize * 2.0, height: icon.size.height)
    imgView.contentMode = .center
    imgView.tintColor = UIColor(red: 235/255, green: 235/255, blue: 241/255, alpha: 1)
    return imgView
}

func defaultSearchBar(withRasterSize rasterSize: CGFloat, leftView: UIView?, rightView: UIView?, delegate: SHSearchBarDelegate, useCancelButton: Bool = true) -> SHSearchBar {
    var config = defaultSearchBarConfig(rasterSize)
    config.leftView = leftView
    config.rightView = rightView
    config.useCancelButton = useCancelButton

    if leftView != nil {
        config.leftViewMode = .always
    }

    if rightView != nil {
        config.rightViewMode = .unlessEditing
    }

    let bar = SHSearchBar(config: config)
    bar.delegate = delegate
    bar.placeholder = NSLocalizedString("sbe.textfieldPlaceholder.default", comment: "")
    bar.updateBackgroundImage(withRadius: 6, corners: [.allCorners], color: UIColor.white)
    bar.layer.shadowColor = UIColor.black.cgColor
    bar.layer.shadowOffset = CGSize(width: 0, height: 3)
    bar.layer.shadowRadius = 5
    bar.layer.shadowOpacity = 0.25
    return bar
}

func defaultSearchBarConfig(_ rasterSize: CGFloat) -> SHSearchBarConfig {
    var config: SHSearchBarConfig = SHSearchBarConfig()
    config.rasterSize = rasterSize
    //    config.cancelButtonTitle = NSLocalizedString("sbe.general.cancel", comment: "")
    config.cancelButtonTextAttributes = [.foregroundColor : UIColor.darkGray]
    config.textContentType = UITextContentType.fullStreetAddress.rawValue
    config.textAttributes = [.foregroundColor : UIColor.gray]
    return config
}

how can I put SHSearchBar on NavigationBar?

Answer 1

You can put your searchBar in navigation`s titleView.

 lazy var searchBar = UISearchBar(frame: .zero)
     searchBar.placeholder = "Your PlaceHolder"
     navigationItem.titleView = searchBar

hope it may help .. :)