Barre de recherche de conception matérielle pour Android
Cette bibliothèque belle et facile à utiliser vous aidera à ajouter Lollipop Material Design SearchView dans votre projet.
pour inclure SearchBar à votre projet :
ajoutez ce code au fichier build.gradle au niveau du projet
allprojects {
repositories {
.. .
maven { url " https://jitpack.io " }
}
}
ajoutez la dépendance au fichier build.gradle au niveau de l'application
dependencies {
implementation ' com.github.mancj:MaterialSearchBar:X.X.X '
}
puis ajoutez SearchBar à votre activité :
< com .mancj.materialsearchbar.MaterialSearchBar
style = " @style/MaterialSearchBarLight "
app : mt_speechMode = " true "
app : mt_hint = " Custom hint "
app : mt_maxSuggestionsCount = " 10 "
android : layout_width = " match_parent "
android : layout_height = " wrap_content "
android : id = " @+id/searchBar " />
MaterialSearchBar possède les attributs XML suivants :
Attribut | Description |
---|---|
mt_speechMode | si défini sur true, l'icône du microphone sera affichée à la place de l'icône de recherche |
mt_maxSuggestionsCount | spécifie le nombre maximum de requêtes de recherche stockées |
mt_navIconEnabled | définir l'icône de navigation activée |
mt_roundedSearchBarEnabled | utilisez la barre de recherche en forme de capsule sur la v21+ et revenez aux valeurs par défaut en bas |
mt_dividerColor | définir les couleurs des suggestions et des séparateurs de menu |
mt_searchBarColor | définir la couleur principale de la barre de recherche |
mt_menuIconDrawable | définir le dessin de l'icône du menu |
mt_searchIconDrawable | définir l'icône de recherche pouvant être dessinée lorsque le mode vocal est faux |
mt_speechIconDrawable | définir l'icône de parole lorsque le mode parole est vrai |
mt_backIconDrawable | définir le dessin de l'icône de la flèche arrière |
mt_clearIconDrawable | définir le dessin de l'icône claire |
mt_navIconTint | définir la couleur de teinte de l'icône animée de navigation/retour |
mt_menuIconTint | définir la couleur de teinte de l'icône du menu |
mt_searchIconTint | définir l'icône de recherche/discours de couleur de teinte |
mt_backIconTint | définir la couleur de teinte de l'icône de flèche arrière |
mt_clearIconTint | définir la couleur de teinte de l'icône d'effacement |
mt_navIconUseTint | l'icône de navigation animée doit-elle utiliser une couleur de teinte |
mt_menuIconUseTint | l'icône du menu doit-elle utiliser la couleur de teinte |
mt_searchIconUseTint | l'icône de recherche/parole doit-elle utiliser la couleur de teinte |
mt_backIconUseTint | l'icône de retour doit-elle utiliser la couleur de teinte |
mt_clearIconUseTint | l'icône claire doit-elle utiliser la couleur de teinte |
mt_indice | définir le texte de l'indice lorsque la barre de recherche est ciblée et que la requête de recherche est vide |
mt_placeholder | définir le texte de l'espace réservé lorsque la MaterialSearchBar n'est pas ciblée |
mt_textColor | définir la couleur du texte |
mt_hintColor | définir la couleur de l'indice |
mt_placeholderColor | définir la couleur de l'espace réservé |
mt_textCursorTint | définir la teinte des curseurs de texte |
mt_highlightedTextColor | définir la couleur de la teinte de surbrillance du texte |
méthodes publiques :
addTextChangeListener(TextWatcher textWatcher)
clearSuggestions()
closeSearch()
openSearch()
getLastSuggestions()
getMenu()
getText()
hideSuggestionList()
inflateMenu(int menuResource)
inflateMenu(int menuResource, int icon)
isSearchOpened()
isSpeechModeEnabled()
isSuggestionsVisible()
setArrowIcon(int arrowIconResId)
setArrowIconTint(int arrowIconTint)
setCardViewElevation(int elevation)
setClearIcon(int clearIconResId)
setClearIconTint(int clearIconTint)
setCustomSuggestionAdapter(SuggestionsAdapter suggestionAdapter)
setDividerColor(int dividerColor)
setHint(CharSequence hintText)
setIconRippleStyle(boolean borderlessRippleEnabled)
setLastSuggestions(List suggestions)
setMaxSuggestionCount(int maxSuggestionsCount)
setMenuDividerEnabled(boolean menuDividerEnabled)
setMenuIcon(int menuIconResId)
setMenuIconTint(int menuIconTint)
setNavButtonEnabled(boolean navButtonEnabled)
setNavIconTint(int navIconTint)
setOnSearchActionListener(OnSearchActionListener onSearchActionListener)
setPlaceHolder(CharSequence placeholder)
setPlaceHolderColor(int placeholderColor)
setRoundedSearchBarEnabled(boolean roundedSearchBarEnabled)
setSearchIcon(int searchIconResId)
setSearchIconTint(int searchIconTint)
setSpeechModeEnabled(boolean speechMode)
setSuggestionsClickListener(SuggestionsAdapter.OnItemViewClickListener listener)
setText(String text)
setTextColor(int textColor)
setTextHighlightColor(int highlightedTextColor)
setTextHintColor(int hintColor)
showSuggestions()
updateLastSuggestions(List suggestions)
Barre de recherche de matériaux de style
Style personnalisé - styles.xml Créez un style personnalisé et utilisez l'un des styles fournis comme parent.
Provided Styles are: MaterialSearchBarLight and MaterialSearchBarDark
Example:
< style name = " MyCustomTheme " parent = " MaterialSearchBarLight " >
< item name = " mt_searchBarColor " >@color/searchBarPrimaryColor</ item >
< item name = " mt_dividerColor " >@color/searchBarDividerColor</ item >
< item name = " mt_navIconTint " >@color/searchBarNavIconTintColor</ item >
< item name = " mt_searchIconTint " >@color/searchBarSearchIconTintColor</ item >
< item name = " mt_clearIconTint " >@color/searchBarClearIconTintColor</ item >
< item name = " mt_menuIconTint " >@color/searchBarMenuIconTintColor</ item >
< item name = " mt_backIconTint " >@color/searchBarBackIconTintColor</ item >
< item name = " mt_textCursorTint " >@color/searchBarCursorColor</ item >
< item name = " mt_textColor " >@color/searchBarTextColor</ item >
< item name = " mt_hintColor " >@color/searchBarHintColor</ item >
< item name = " mt_placeholderColor " >@color/searchBarPlaceholderColor</ item >
< item name = " mt_highlightedTextColor " >@color/searchBarTextHighlightColor</ item >
</ style >
OU
Couleurs personnalisées - colours.xml Définissez/modifiez simplement ces couleurs (ou certaines) et vous obtenez votre style personnalisé.
//Material SearchBar Light Theme Colors
< color name = " searchBarIconColor " >#3a3a3a</ color >
//Base
< color name = " searchBarPrimaryColor " >#FFFFFF</ color >
< color name = " searchBarCursorColor " >#8000a1ff</ color >
< color name = " searchBarDividerColor " >#1F000000</ color >
//Icons
< color name = " searchBarNavIconTintColor " >@color/searchBarIconColor</ color >
< color name = " searchBarMenuIconTintColor " >@color/searchBarIconColor</ color >
< color name = " searchBarSearchIconTintColor " >@color/searchBarIconColor</ color >
< color name = " searchBarClearIconTintColor " >@color/searchBarIconColor</ color >
< color name = " searchBarBackIconTintColor " >@color/searchBarIconColor</ color >
//Text
< color name = " searchBarTextColor " >#DE000000</ color >
< color name = " searchBarHintColor " >#42000000</ color >
< color name = " searchBarPlaceholderColor " >#8A000000</ color >
< color name = " searchBarTextHighlightColor " >#8000a1ff</ color >
//Base
< color name = " searchBarPrimaryColorDark " >#303030</ color >
< color name = " searchBarDividerColorDark " >#1FFFFFFF</ color >
//Material SearchBar Dark Theme Colors
< color name = " searchBarIconColorDark " >#00a1ff</ color >
//Icons
< color name = " searchBarNavIconTintColorDark " >@color/searchBarIconColorDark</ color >
< color name = " searchBarMenuIconTintColorDark " >@color/searchBarIconColorDark</ color >
< color name = " searchBarSearchIconTintColorDark " >@color/searchBarIconColorDark</ color >
< color name = " searchBarClearIconTintColorDark " >@color/searchBarIconColorDark</ color >
< color name = " searchBarBackIconTintColorDark " >@color/searchBarIconColorDark</ color >
//Text
< color name = " searchBarTextColorDark " >#DEFFFFFF</ color >
< color name = " searchBarHintColorDark " >#42FFFFFF</ color >
< color name = " searchBarPlaceholderColorDark " >#8AFFFFFF</ color >
< color name = " searchBarTextHighlightColorDark " >#BF00a1ff</ color >
Pour sauvegarder les requêtes de recherche lorsque l'activité est détruite, utilisez la méthode searchBar.getLastSuggestions()
puis, pour les restaurer, utilisez searchBar.setLastSuggestions(List<String>);
comme le montre l'exemple ci-dessous
Voici un exemple simple d'utilisation de MaterialSearchBar
private List < String > lastSearches ;
private MaterialSearchBar searchBar ;
@ Override
protected void onCreate ( Bundle savedInstanceState ) {
super . onCreate ( savedInstanceState );
setContentView ( R . layout . activity_main );
searchBar = ( MaterialSearchBar ) findViewById ( R . id . searchBar );
searchBar . setHint ( "Custom hint" );
searchBar . setSpeechMode ( true );
//enable searchbar callbacks
searchBar . setOnSearchActionListener ( this );
//restore last queries from disk
lastSearches = loadSearchSuggestionFromDisk ();
searchBar . setLastSuggestions ( list );
//Inflate menu and setup OnMenuItemClickListener
searchBar . inflateMenu ( R . menu . main );
searchBar . getMenu (). setOnMenuItemClickListener ( this );
}
@ Override
protected void onDestroy () {
super . onDestroy ();
//save last queries to disk
saveSearchSuggestionToDisk ( searchBar . getLastSuggestions ());
}
@ Override
public void onSearchStateChanged ( boolean enabled ) {
String s = enabled ? "enabled" : "disabled" ;
Toast . makeText ( MainActivity . this , "Search " + s , Toast . LENGTH_SHORT ). show ();
}
@ Override
public void onSearchConfirmed ( CharSequence text ) {
startSearch ( text . toString (), true , null , true );
}
@ Override
public void onButtonClicked ( int buttonCode ) {
switch ( buttonCode ){
case MaterialSearchBar . BUTTON_NAVIGATION :
drawer . openDrawer ( Gravity . LEFT );
break ;
case MaterialSearchBar . BUTTON_SPEECH :
openVoiceRecognizer ();
}
}
Plus d'exemples