Barra de búsqueda de Material Design para Android
Esta biblioteca hermosa y fácil de usar le ayudará a agregar Lollipop Material Design SearchView en su proyecto.
para incluir SearchBar en su proyecto:
agregue este código al archivo build.gradle a nivel de proyecto
allprojects {
repositories {
.. .
maven { url " https://jitpack.io " }
}
}
agregue la dependencia al archivo build.gradle del nivel de aplicación
dependencies {
implementation ' com.github.mancj:MaterialSearchBar:X.X.X '
}
luego agrega SearchBar a tu actividad:
< 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 tiene los siguientes atributos xml:
Atributo | Descripción |
---|---|
mt_speechMode | si se establece en verdadero, se mostrará el icono de micrófono en lugar del icono de búsqueda |
mt_maxSugerenciasCount | especifica el número máximo de consultas de búsqueda almacenadas |
mt_navIconEnabled | establecer icono de navegación habilitado |
mt_roundedSearchBarEnabled | use la barra de búsqueda en forma de cápsula en v21+ y vuelva al valor predeterminado en la parte inferior |
mt_dividerColor | establecer los colores de las sugerencias y los divisores del menú |
mt_searchBarColor | establecer el color principal de la barra de búsqueda |
mt_menuIconDrawable | establecer dibujable del icono del menú |
mt_searchIconDrawable | establecer el diseño del icono de búsqueda cuando el modo de voz es falso |
mt_speechIconDrawable | establecer el dibujable del icono de voz cuando el modo de voz es verdadero |
mt_backIconDrawable | establecer dibujable del icono de flecha hacia atrás |
mt_clearIconDrawable | establecer dibujable del icono claro |
mt_navIconTint | establecer el color de tinte del icono animado de navegación/atrás |
mt_menuIconTint | establecer el color de tinte del icono del menú |
mt_searchIconTint | establecer color de tinte icono de búsqueda/voz |
mt_backIconTint | establecer el color de tinte del icono de flecha hacia atrás |
mt_clearIconTint | establecer el color de tinte del icono de borrar |
mt_navIconUseTint | ¿El ícono de navegación animado debería usar color de tinte? |
mt_menuIconUseTint | ¿Debería el icono del menú utilizar el color de tinte? |
mt_searchIconUseTint | ¿El ícono de búsqueda/voz debería usar el color de tinte? |
mt_backIconUseTint | ¿El ícono de atrás debería usar el color de tinte? |
mt_clearIconUseTint | ¿El ícono de borrar debería usar el color de tinte? |
mt_pista | establecer el texto de la sugerencia cuando la barra de búsqueda está enfocada y la consulta de búsqueda está vacía |
mt_placeholder | establecer el texto del marcador de posición cuando MaterialSearchBar no está enfocado |
mt_textColor | establecer color de texto |
mt_hintColor | establecer color de sugerencia |
mt_placeholderColor | establecer el color del marcador de posición |
mt_textCursorTint | establecer el tinte de los cursores de texto |
mt_highlightedTextColor | establecer el color del tinte de resaltado del texto |
métodos públicos:
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)
Barra de búsqueda de materiales de estilo
Estilo personalizado: estilos.xml Cree un estilo personalizado y utilice uno de los estilos proporcionados como padre.
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 >
O
Colores personalizados: colores.xml Simplemente configure/cambie estos colores (o algunos) y tendrá su estilo personalizado.
//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 >
Para guardar consultas de búsqueda cuando se destruye la actividad, use el método searchBar.getLastSuggestions()
y luego, para restaurarlas use searchBar.setLastSuggestions(List<String>);
como se muestra en el siguiente ejemplo
Aquí hay un ejemplo simple del uso 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 ();
}
}
Más ejemplos