material-design-search-ui-ios
material-design-search-ui-ios copied to clipboard
Material design styled search UI consists of search bar and search results view.
Material Design Search UI iOS
Material design styled search UI consists of search bar and search results view.
You may see the following Medium articles for detailed explanation of developing these UI widgets.
- Create Material Design Search Bar in iOS — Search UI Part 1/3
- Create Material Design Search Results View in iOS — Search UI Part 2/3
- Create Material Design Search UI in iOS — Search UI Part 3/3
Key Features
- A Material Design search bar with delegation method for view controller use.
- A Material Design and enum-driven search results view that clearly defines results view states.
- Widget classes are made to be open, which gives you flexibility to create your own.
- A simple location searching application using the above two widgets is included in the project.
Requirements
- Swift 5.0
- iOS 11.0+
Usage
Search bar
Declaration
var searchbar: Searchbar!
searchbar = Searchbar(
onStartSearch: {
// Your implementation
},
onClearInput: {
// Your implementation
},
delegate: self
)
Delegate methods
extension MainViewController: SearchbarDelegate {
func searchbarTextDidChange(_ textField: UITextField) {
}
func textFieldDidBeginEditing(_ textField: UITextField) {
}
func textFieldDidEndEditing(_ textField: UITextField) {
}
func searchbarTextShouldReturn(_ textField: UITextField) -> Bool {
return true
}
}
Search results view
Declaration
var searchResultsView: SearchResultsView!
searchResultsView = SearchResultsView(didSelectAction: {
// Your implementation
})
Load data into results view
searchResultsView.update(newPlacemarks: placemarks, error: error)
Note: I use CLPlacemark here, you can change to whatever data type you'd like to use in your app.