How to change the size of titleView in navigation bar. Because there's a gap between titleView and backButton in navigationBar

Question

I've added a search bar to my navigation.titleView

    self.navigationItem.titleView = searchBar

There's also a BackBarButtonItem with title = ""

    self.navigationItem.backBarButtonItem?.title = ""

But then there're gap between Back Button and SearchBar, like this:

I Think that the gap appears here because there's space for title of backBarButtonItem (because my title is null "" but the space still there)

So I want to ask how to omit that gap? I want to make my searchBar nearer my backBarIcon

Thank you so much!

EDIT 1: I try to change searchBar's frame but it's not working

This is my code

    //Change searchBar's frame        
    let titleViewFrame = (searchController.searchBar.frame)
    searchController.searchBar.frame = CGRect(x: titleViewFrame.minX - 20.0, y: titleViewFrame.minY, width: titleViewFrame.width + 20.0, height: titleViewFrame.height)

Alleen

Try making your search bar wider by adjusting its frame. – Static

I did IT, but it's still not working – Balmacaan

Take a look @Peter Chang's solution below, which does this with AutoLayout. – Static

Answer 1

override func viewDidLoad() {
    super.viewDidLoad()

    let container = UIView(frame: CGRect(x: 0, y: 0, width: 1000, height: 22))

    let searchBar = UISearchBar()
    searchBar.translatesAutoresizingMaskIntoConstraints = false
    container.addSubview(searchBar)

    let leftButtonWidth: CGFloat = 35 // left padding
    let rightButtonWidth: CGFloat = 75 // right padding
    let width = view.frame.width - leftButtonWidth - rightButtonWidth
    let offset = (rightButtonWidth - leftButtonWidth) / 2

    NSLayoutConstraint.activate([
        searchBar.topAnchor.constraint(equalTo: container.topAnchor),
        searchBar.bottomAnchor.constraint(equalTo: container.bottomAnchor),
        searchBar.centerXAnchor.constraint(equalTo: container.centerXAnchor, constant: -offset),
        searchBar.widthAnchor.constraint(equalToConstant: width)
    ])


    self.navigationItem.titleView = container
}

Quinine

why i can't click the search text, it seems like there is a container which blocks it – Piwowar

This looks good when it is run but it does not respond to input. Also, noticed that if you touch the left side, it acts like the back button was selected. It is like it is not even there. – Bullwhip

@JeffMuir Since default back button frame size is larger than it look like, you can use your own left bar button instead of system one to avoid this issue – Quinine

@PeterCheng Thanks. That is what I ended up doing. It is possible to hide the back button from the system and use your own. Just needed to get the image for the back button and rig in the callback to go back to the parent. Much better than before. – Bullwhip

Answer 2

You can't do that, there is a default space given which we cannot change if we have back button.

 self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
        self.navigationController?.navigationBar.backIndicatorImage = UIImage(named: "back")

    self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = UIImage(named: "back")

    self.navigationController?.navigationBar.tintColor = UIColor.lightGray

Below is the screenshot

Ieshaieso

Answer 3

class SearchBarContainerView: UIView {  
  let searchBar: UISearchBar  
  init(customSearchBar: UISearchBar) {  
    searchBar = customSearchBar  
    super.init(frame: CGRect.zero)  

    addSubview(searchBar)  
  }

  override convenience init(frame: CGRect) {  
    self.init(customSearchBar: UISearchBar())  
    self.frame = frame  
  }  

  required init?(coder aDecoder: NSCoder) {  
    fatalError("init(coder:) has not been implemented")  
  }  

  override func layoutSubviews() {  
    super.layoutSubviews()  
    searchBar.frame = bounds  
  }  
}  

class MyViewController: UIViewController {  
  func setupNavigationBar() {  
    let searchBar = UISearchBar()  
    let searchBarContainer = SearchBarContainerView(customSearchBar: searchBar)  
    searchBarContainer.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 44)  
    navigationItem.titleView = searchBarContainer  
  }  
}

Belayneh