• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mancj/MaterialSearchBar: Material Design Search Bar for Android

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

mancj/MaterialSearchBar

开源软件地址(OpenSource Url):

https://github.com/mancj/MaterialSearchBar

开源编程语言(OpenSource Language):

Java 100.0%

开源软件介绍(OpenSource Introduction):

Material SearchBar Android

Material Design Search Bar for Android Android Arsenal


This beautiful and easy to use library will help to add Lollipop Material Design SearchView in your project.


See our Wiki

How to use

to include SearchBar to your project:

add this code to the the project level build.gradle file

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

add the dependency to the the app level build.gradle file

dependencies {
	implementation 'com.github.mancj:MaterialSearchBar:X.X.X'
}

then add SearchBar to your activity:

<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 has the following xml attributes:

Attribute Description
mt_speechMode if set to true, microphone icon will be displayed instead of search icon
mt_maxSuggestionsCount specifies the max number of search queries stored
mt_navIconEnabled set navigation icon enabled
mt_roundedSearchBarEnabled use capsule shaped searchbar on v21+ and revert to default on lower
mt_dividerColor set the colors of the suggestion and menu dividers
mt_searchBarColor set the main color of the searchbar
mt_menuIconDrawable set drawable of the menu icon
mt_searchIconDrawable set drawable of the search icon when speech mode is false
mt_speechIconDrawable set drawable of the speech icon when speech mode is true
mt_backIconDrawable set drawable of the back arrow icon
mt_clearIconDrawable set drawable of the clear icon
mt_navIconTint set tint color of nav/back animated icon
mt_menuIconTint set tint color of the menu icon
mt_searchIconTint set tint color search/speech icon
mt_backIconTint set tint color of the back arrow icon
mt_clearIconTint set tint color of the clear icon
mt_navIconUseTint should the animated nav icon use tint color
mt_menuIconUseTint should the menu icon use the tint color
mt_searchIconUseTint should the search/speech icon use the tint color
mt_backIconUseTint should the back icon use the tint color
mt_clearIconUseTint should the clear icon use the tint color
mt_hint set the text of the hint when the searchbar is focused and search query is empty
mt_placeholder set the placeholder text when the MaterialSearchBar is not focused
mt_textColor set text color
mt_hintColor set hint color
mt_placeholderColor set placeholder color
mt_textCursorTint set text cursors tint
mt_highlightedTextColor set the text highlight tint color

public methods:

  • 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)

Styling Material SearchBar

Custom Style - styles.xml Create a custom style and use one of the provided styles as the 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>

OR

Custom Colors - colors.xml Simply set/change these colors(or some) and you have your custom style.

    //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>

To save search queries when the activity is destroyed, use the method searchBar.getLastSuggestions() and then, to restore them use searchBar.setLastSuggestions(List<String>); as shown in the example below

Example

Here is a simple example of using 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();
    }
}

More Examples




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap