Bilah Pencarian Desain Material untuk Android
Pustaka yang cantik dan mudah digunakan ini akan membantu menambahkan Lollipop Material Design SearchView di proyek Anda.
untuk memasukkan SearchBar ke proyek Anda:
tambahkan kode ini ke file build.gradle tingkat proyek
allprojects {
repositories {
.. .
maven { url " https://jitpack.io " }
}
}
tambahkan ketergantungan ke file build.gradle tingkat aplikasi
dependencies {
implementation ' com.github.mancj:MaterialSearchBar:X.X.X '
}
lalu tambahkan SearchBar ke aktivitas Anda:
< 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 memiliki atribut xml berikut:
Atribut | Keterangan |
---|---|
mt_speechMode | jika disetel ke true, ikon mikrofon akan ditampilkan, bukan ikon pencarian |
mt_maxSuggestionsCount | menentukan jumlah maksimum permintaan pencarian yang disimpan |
mt_navIconEnabled | atur ikon navigasi diaktifkan |
mt_roundedSearchBarEnabled | gunakan bilah pencarian berbentuk kapsul di v21+ dan kembali ke default di versi yang lebih rendah |
mt_dividerColor | mengatur warna saran dan pembagi menu |
mt_searchBarColor | atur warna utama bilah pencarian |
mt_menuIconDrawable | atur drawable dari ikon menu |
mt_searchIconDrawable | mengatur drawable ikon pencarian ketika mode ucapan salah |
mt_speechIconDrawable | atur drawable ikon ucapan saat mode ucapan disetel ke true |
mt_backIconDrawable | mengatur drawable ikon panah belakang |
mt_clearIconDrawable | atur drawable dari ikon yang jelas |
mt_navIconTint | atur warna warna ikon animasi nav/kembali |
mt_menuIconTint | mengatur warna warna ikon menu |
mt_searchIconTint | atur ikon pencarian warna/ucapan |
mt_backIconTint | atur warna rona ikon panah belakang |
mt_clearIconTint | atur warna rona ikon bening |
mt_navIconUseTint | haruskah ikon navigasi animasi menggunakan warna rona |
mt_menuIconUseTint | haruskah ikon menu menggunakan warna rona |
mt_searchIconUseTint | haruskah ikon pencarian/ucapan menggunakan warna rona |
mt_backIconUseTint | sebaiknya ikon belakang menggunakan warna rona |
mt_clearIconUseTint | sebaiknya ikon bening menggunakan warna tint |
mt_petunjuk | atur teks petunjuk ketika bilah pencarian terfokus dan permintaan pencarian kosong |
mt_placeholder | atur teks placeholder ketika MaterialSearchBar tidak fokus |
mt_textColor | mengatur warna teks |
mt_hintColor | atur warna petunjuk |
mt_placeholderColor | mengatur warna placeholder |
mt_textCursorTint | mengatur warna kursor teks |
mt_highlightedTextColor | mengatur warna rona sorotan teks |
metode publik:
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)
Bilah Pencarian Bahan Penataan Gaya
Gaya Khusus - style.xml Buat gaya khusus dan gunakan salah satu gaya yang disediakan sebagai induk.
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 >
ATAU
Warna Khusus - warna.xml Cukup atur/ubah warna ini (atau beberapa) dan Anda memiliki gaya khusus.
//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 >
Untuk menyimpan kueri penelusuran saat aktivitas dimusnahkan, gunakan metode searchBar.getLastSuggestions()
dan kemudian, untuk memulihkannya gunakan searchBar.setLastSuggestions(List<String>);
seperti yang ditunjukkan pada contoh di bawah ini
Berikut adalah contoh sederhana penggunaan 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 ();
}
}
Contoh Lainnya