Barra de pesquisa do Material Design para Android
Esta biblioteca bonita e fácil de usar ajudará a adicionar o Lollipop Material Design SearchView ao seu projeto.
para incluir SearchBar em seu projeto:
adicione este código ao arquivo build.gradle no nível do projeto
allprojects {
repositories {
.. .
maven { url " https://jitpack.io " }
}
}
adicione a dependência ao arquivo build.gradle no nível do aplicativo
dependencies {
implementation ' com.github.mancj:MaterialSearchBar:X.X.X '
}
em seguida, adicione SearchBar à sua atividade:
< 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 possui os seguintes atributos xml:
Atributo | Descrição |
---|---|
mt_speechMode | se definido como verdadeiro, o ícone do microfone será exibido em vez do ícone de pesquisa |
mt_maxSuggestionsCount | especifica o número máximo de consultas de pesquisa armazenadas |
mt_navIconEnabled | definir ícone de navegação ativado |
mt_roundedSearchBarEnabled | use a barra de pesquisa em forma de cápsula na v21 + e reverta para o padrão na parte inferior |
mt_dividerColor | definir as cores da sugestão e dos divisores de menu |
mt_searchBarColor | definir a cor principal da barra de pesquisa |
mt_menuIconDrawable | definir drawable do ícone do menu |
mt_searchIconDrawable | definir drawable do ícone de pesquisa quando o modo de fala for falso |
mt_speechIconDrawable | definir drawable do ícone de fala quando o modo de fala for verdadeiro |
mt_backIconDrawable | definir drawable do ícone de seta para trás |
mt_clearIconDrawable | definir drawable do ícone claro |
mt_navIconTint | definir a cor do ícone animado de navegação/voltar |
mt_menuIconTint | definir a cor do ícone do menu |
mt_searchIconTint | definir ícone de pesquisa/fala de cor de tonalidade |
mt_backIconTint | definir a cor do ícone de seta para trás |
mt_clearIconTint | definir a cor da tonalidade do ícone claro |
mt_navIconUseTint | o ícone de navegação animado deve usar cor de tonalidade |
mt_menuIconUseTint | o ícone do menu deve usar a cor da tonalidade |
mt_searchIconUseTint | o ícone de pesquisa/fala deve usar a cor da tonalidade |
mt_backIconUseTint | o ícone de voltar deve usar a cor da tonalidade |
mt_clearIconUseTint | o ícone claro deve usar a cor da tonalidade |
mt_hint | defina o texto da dica quando a barra de pesquisa estiver focada e a consulta de pesquisa estiver vazia |
mt_placeholder | definir o texto do espaço reservado quando MaterialSearchBar não estiver em foco |
mt_textColor | definir cor do texto |
mt_hintColor | definir cor da dica |
mt_placeholderColor | definir cor do espaço reservado |
mt_textCursorTint | definir a tonalidade dos cursores de texto |
mt_highlightedTextColor | definir a cor do tom de destaque do 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 pesquisa de material de estilo
Estilo personalizado - estilos.xml Crie um estilo personalizado e use um dos estilos fornecidos como pai.
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
Cores personalizadas - cores.xml Basta definir/alterar essas cores (ou algumas) e você terá seu 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 salvar consultas de pesquisa quando a atividade for destruída, use o método searchBar.getLastSuggestions()
e então, para restaurá-las, use searchBar.setLastSuggestions(List<String>);
como mostrado no exemplo abaixo
Aqui está um exemplo simples de 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 ();
}
}
Mais exemplos