Material Design Search Ui Ios Save

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.

Credits

• Material Design
• Le Van Nghia
• Icons8
• Robert Chen