blackjacx / shsearchbar

The search bar that doesn't suck.

SHSearchBar

The clean and shiny search bar that does what UISearchBar does only with dirty hacks. This view is designed to tackle the customization limits of UISearchBar. The difference here is that this class does not inherit UISearchBar but composes a new UIView object by using a UITextField that is much easier to use. These are the limits of the UISearchBar:

• no clean way to left align the placeholder
• the cancel button is hard to tailor to your needs
• generally the appearance is not customizable (e.g. the font of the text)
• there are some strange behaviors when you set a custom background image

Since I use a UITextField these restrictions do not apply.

Installation

Swift Package Manager

In Xcode open your target list and select your project. Click the tab Swift Packages and there the small + icon. Enter the URL of this repository, select the version you want to install - usually the preset is okay - and confirm.

CocoaPods

Since SHSearchBar uses localized resources I dropped CocoaPods support in favor of SPM from version 2.0.0. Please integrate the package via SPM (see above).

Carthage

Since SHSearchBar uses localized resources I dropped Carthage support in favor of SPM from version 2.0.0. Please integrate the package via SPM (see above).

Examples

The repo includes an example project. It shows shows different use cases of the search bar. To run it, just open and run ./Example/SHSearchBarExample.xcodeproj. The following images show some use cases:

You can show a custom placeholder like for normal text fields:

And you can even type text into that searchbar:

Wow there are customizable accessory views too:

Easily customize text and cancel button as you want:

You can customize each corner radius of the text field so that layouts like this become an ease:

The inner text field supports the new iOS 10 'textContentMode':
(Re-uses the address searched in Apple Maps before)

You can use the search bar inside a UINavigationBar:

Code Documentation

The code documentation is generated and hosted by Swift Package Index (powered by DocC)

Release

To release this Swift package the following steps have to be taken:

• Create a new branch release-x.y.z
• Run bash <(curl -H -s https://raw.githubusercontent.com/Blackjacx/Scripts/master/frameworks/bootstrap.sh) to update to the latest shared development files
• Run bundle update to update all Ruby gems
• Commit all changes, make a PR and merge it to develop
• Run bundle exec fastlane release framework:"SHSearchBar" version:"x.y.z" to release the new version
• Post the following on Twitter

SHSearchBar release x.y.z 🎉

▸ 🚀  SHSearchBar (x.y.z) successfully published
▸ 📅  September 2nd
▸ 🌎  https://swiftpackageindex.com/Blackjacx/SHSearchBar
▸ 🌎  https://github.com/Blackjacx/SHSearchBar/releases/latest
▸ 👍  Tell your friends!

#spm #search #ios #apple #xcode #uisearchbar #swiftpackagemanager

Contribution

• If you found a bug, please open an issue.
• If you have a feature request, please open an issue.
• If you want to contribute, please submit a pull request.

Author

Stefan Herold • 🐦 @Blackjacxxx

Contributors

Thanks to all of you who are part of this:

License

SHSearchBar is available under the MIT license. See the LICENSE file for more info.

shsearchbar's Issues

Migrate to Swift 3

updateBackgroundWith not all parameters have labels

Provide labels for all parameters.

fix this in all functions

[UI] Transfer active/inactive state to the left and right views of the UITextField

Consider setting an inactive version of the left and right views. To implement the active/inactive state of these views, try the following when the active/inactive state of the searchbar changes (in that order):

• enable/disable the views (possible if they are descendants of UIControl)
• change the tint color of the views (possible if they are descendants of UIView)

Hide the UITextField inside the SHSearchBar

It is important to hide the text field behind a public API. This enables to switch technologies behind the SHSearchBar without affecting users of the framework.

Here it is important to offer all the functionality in the public API like the normal UISearchBar does plus advantages a UITextField has. These are:

UITextField Features

• [set/get] defaultTextAttributes

• [set/get] typingAttributes
  (the above 2 are better than setting the attributedText directly since we are able to access the attributes and thus are more flexible)

• [set/get] attributedPlaceholder

• [set/get] leftView

• [set/get] rightView

• [set/get] tintColor (directly maps to the cursor color)

• [set/get] text

• [set/get] isEnabled

• [call] resignFirstResponder()

SHSearchBar Features

• [set/get] cancelButtonTextAttributes

[ANIMATION] Use iOS7 style spring animations

This can provide much more physically realistic animations.

[MEMORY] Dynamically generate images at runtime and cache them

With this improvement the search bar will be much more memory efficient.

Search Bar height & remove separator

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
  }
}

Support Swift Package Manager (SPM)

[UI] Drop Old Autolayout-Constraint-Format Support

There is still code around using the visual format language. Change That!

This will set the minimum target for this framework to 9.0

Improve code documentation

test if the default values of the config are as expected

Test programmatic use

Add support for apple silicon simulators

Hi,

Can you update this library to support developers using apple silicon based Macs?

For reference:
https://developer.apple.com/documentation/technotes/tn3117-resolving-build-errors-for-apple-silicon#Update-pre-compiled-libraries-from-vendors

Thank you!

🚨 Fix Testing for SPM Packages

I cannot test atm:

module 'XCTest' was created for incompatible target x86_64-apple-macos10.15: /Applications/Xcode-GM.app/Contents/Developer/Platforms/MacOSX.platform/Developer/usr/lib/XCTest.swiftmodule/x86_64.swiftmodule
import XCTest

This should work
xcodebuild -scheme <scheme> test -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 11'

Find your scheme name by executing:
xcodebuild -list

Fix hosted docs for all repos

#59

Add support for a blurred dim view when in edit mode

Consider
• dark dim view
• blurred dim view

🚨Add to Package List

After #54 is merged add this to the package index

Make `localized` internal to avoid namespace conflicts

Adopt Swift 3 naming conventions

Compilation Issues: Key is not a member of NSAttributedString, etc

Stefan,

firstly kudos for building this Custom Search Bar! It's exactly what I was looking for and it's super slick, like in the Airbnb app. Also I saw that it can be used with the UITableView so thats perfect.

However, I am getting some issues in compiling when integrating with my project as well as compiling the sample app. Attaching a screenshot

My Xcode version is 9.4.1 and I checked that the Swift Version in the targets for the Pod was 4.1.
I cleared the app's derived data, then cleaned the code and rebuild but same issue.

What could I be missing? Really looking forward to using this pod.

Solve the scaling text on textField width animation bug when there are multiple SHSearchBars on the same view (like in the example project)

please keep cocoapods

i still use it and I dont want to use spm

Automate CHANGELOG generation

rtl support

add rtl alignment to library

tableviewcontroller

how can i implement this search bar in a table view controller

Does not support storyboard

It could be an ultimate replace for UISearchBar, except for a very big minus. It seems not having a storyboard support, it crashes with "init(coder:) has not been implemented".

Fix config setting

Tried to fork your repo but github wouldn't let me :/

Right now you can't set the textContentType to nil on an existing searchbar. Fix suggestions:

Change

        if #available(iOS 10.0, *) {
            if let textContentType = config.textContentType {
                textField.textContentType = UITextContentType(rawValue: textContentType)
            }
        }

to

        if #available(iOS 10.0, *) {
            if let textContentType = config.textContentType {
                textField.textContentType = UITextContentType(rawValue: textContentType)
            } else {
                textField.textContentType = nil
            }
        }

SHSearchBar can be used in tableview

Hi! I am new in swift. I want to use this pod for my project. How can I use this pod in searching data inside UITableView? Thank you

Put code examples in the readme

pressedCancelButton resigns always without respecting the delegate

Current implementation:

func pressedCancelButton(_ sender: AnyObject) {
        textField.resignFirstResponder()
        _ = delegate?.searchBarShouldCancel?(self)
}

Better implementation:

func pressedCancelButton(_ sender: AnyObject) {
	if delegate?.searchBarShouldCancel?(self) ?? true {
		textField.resignFirstResponder()
	}
}

There is no right margin in the textField

Add Carthage Support

Carthage is used by many people as alternative to Cocoapods. So support it

Can't Change Font

Whenever I set the font of the search bar, the font does change when the view initially loads. But, after a second the font resets. The placeholder text remains the custom font, but the font of the text typed goes back to default.

Convert Project to Swift 4

Add tests for useCancelButton

Add translations to all user-visible strings

Strings are currently not localised at all. To solve this issue you need to do the following steps:

1. Create a Localizable.strings file and insert keys for all strings used in the project (there are only one or two).

2. Add as much translations as you can.

'pod try SHSearchBar': build fails

For some reason, it fails on "No such module SHSearchBar"

Search bar set as title view in iOS 11

I'm setting the search bar as the title view of my navigation bar, however this doesn't seem to be working nicely. The text field isn't as large as the search bar, everything shrinks down. I also tried to subclass a UIView like this and add the search bar as a subview but things got a lot more weird. What can I do?

Project: Remove Config Object

The config object is user unfriendly. The SHSearchBar should own the properties.
This would even simplify the tests since now I tests are executed way too often and extremely redundant wich will bring performance issues in future.

Enable Mosule Stability

Enable Mudule Stability by setting BUILD_LIBRARY_FOR_DISTRIBUTION to YES and SKIP_INSTALL to NO for release builds. See https://www.donnywals.com/what-is-module-stability-in-swift-and-why-should-you-care/

Then you can use a version of the framework compiled using Swift 5.1+ in every app compiled with Swift 5.1+ without recompiling the framework with that specific Swift version.