Search Bar height & remove separator

[sudhamab]

Hi Stefan,

thanks for your help and for developing and open sourcing this search bar!

I got the search bar working with a UITableView (even in swift 4.1) and it's great . I am trying to develop an airbnb style table view UI.

However, I am not able to do 2 things:

1. Change the height of the Search Bar (to say 44)
2. Remove the extra line below the Navigation Item Header (screenshot shared) so that it looks like the reference images attached

Airbnb Default View before Scrolling

Airbnb View After Scrolling

What I am able to accomplish

Pasting my code below which I incorporated from your examples.

Would be ammmmmmazing if I can make this happen!

class ContactListViewController: UITableViewController {
var searchBar: SHSearchBar!
  var viewConstraints: [NSLayoutConstraint]?
  var rasterSize: CGFloat = 11.0

  var contacts: Results<Contact>?

  override func viewDidLoad() {
    super.viewDidLoad()

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

    view.backgroundColor = UIColor.white

    // we need to set the title view to nil and get always the right frame
    navigationItem.titleView = nil

    // update properties of your custom title view
    searchBar = defaultSearchBar(withRasterSize: rasterSize,
                                           leftView: imageViewWithIcon(searchGlassIconTemplate, rasterSize: rasterSize),
                                           rightView: nil,
                                           delegate: self)

    let titleView = SearchbarTitleView(searchbar: searchBar)
    navigationItem.titleView = titleView

    let searchbarHeight: CGFloat = 44.0
    let constraints = [
      searchBar.heightAnchor.constraint(equalToConstant: searchbarHeight)
    ]
    NSLayoutConstraint.activate(constraints)

//    DispatchQueue.main.async {
//      self.fetchContacts()
//    }
    loadContacts()
  }

  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(hexString: "#ce4e7f")
    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("Search by name or number", 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.cancelButtonTextAttributes = [.foregroundColor : UIColor.darkGray]
    config.textContentType = UITextContentType.fullStreetAddress.rawValue
    config.textAttributes = [.foregroundColor : UIColor.gray]
    return config
  }
}

[Blackjacx]

Hey there, I made a new PR (https://github.com/Blackjacx/SHSearchBar/pull/46). See the descriptions. I referenced the commits that are the solution to your problems. But what I could not achieve is to resize the searchbar to more than 44pt (the height of the navbar).

Hope that helps - happy coding 👍

[sudhamab]

thanks so much Stefan, specially for the rapid integration of this solution in your example! It's perfect. Attaching a pic

I wish apple allowed to keep some space at the top.. but more relieved that I could get rid of the line and also increase the height. Looks slick. :)

Thanks again!

[Blackjacx]

You can have that space on top by decreasing the height of the bar slightly. Just constrain the top anchor of the searchbar to layoutMarginGuide top of the SearchbarTitleView instead of just to the view. Then you have a good balance between height and top margin. When you ever find out how to increase the height of the navbar, please tell me 😋

[sudhamab]

ya tried that but it looks grander when its 44.. and definitely, if I find the answer to make the nav bar bigger, will let you know here. I think Airbnb must have developed a custom nav bar I did find this one link but need to try it. https://medium.com/@matschmidy/swift-custom-navigation-bar-image-for-ios-11-large-titles-8a176d9cbaed

[Blackjacx]

Cool thanks man 👍