MaterialSearchView一个Material Design的搜索控件。

MaterialSearchView

• 类别： 文字输入框 (EditText)
• 打分： ★★★★★
• 更新： 2015-09-24 09:36
• 大小： 4500 kb
• 开发环境： Android Studio
• 浏览： 1164 次
• 下载： 219 次
• 项目地址： https://github.com/MiguelCatalan/MaterialSearchView
• 搜索

下载  收藏

MiguelCatalan / MaterialSearchView

Cute library to implement SearchView in a Material Design Approach

http://miguelcatalan.info/2015/09/23/MaterialSearchView/

1,160186

介绍：

一个Material Design的搜索控件。

运行效果：

使用说明：

 

在gradle文件中添加依赖：

1 2 3

dependencies {      compile  'com.miguelcatalan:materialsearchview:1.0.1' }

把MaterialSearchView和Toolbar一起添加到布局文件（把这部分放在布局的地步，以便将其显示在其它view之上）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!— Must be last  for  right layering display —> <RelativeLayout      android:id= "@+id/toolbar_container"      android:layout_width= "match_parent"      android:layout_height= "wrap_content" >        <android.support.v7.widget.Toolbar          android:id= "@+id/toolbar"          android:layout_width= "match_parent"          android:layout_height= "?attr/actionBarSize"          android:background= "@color/theme_primary"  />        <com.miguelcatalan.materialsearchview.MaterialSearchView          android:id= "@+id/search_view"          android:layout_width= "match_parent"          android:layout_height= "wrap_content"  /> </RelativeLayout>

把 search item添加到menu文件中：

1 2 3 4 5 6

<item      android:id= "@+id/action_search"      android:icon= "@drawable/ic_action_action_search"      android:orderInCategory= "100"      android:title= "@string/abc_search_hint"      app:showAsAction= "always"  />

在onCreateOptionsMenu定义它：

1 2 3 4 5 6 7 8 9

@Override public boolean onCreateOptionsMenu(Menu menu) {      getMenuInflater().inflate(R.menu.menu_main, menu);        MenuItem item = menu.findItem(R.id.action_search);      searchView.setMenuItem(item);        return  true ; }

设置 listeners:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

MaterialSearchView searchView = (MaterialSearchView) findViewById(R.id.search_view);      searchView.setOnQueryTextListener( new  MaterialSearchView.OnQueryTextListener() {          @Override          public boolean onQueryTextSubmit(String query) {              //Do some magic              return  false ;          }            @Override          public boolean onQueryTextChange(String newText) {              //Do some magic              return  false ;          }      });        searchView.setOnSearchViewListener( new  MaterialSearchView.SearchViewListener() {          @Override          public void onSearchViewShown() {              //Do some magic          }            @Override          public void onSearchViewClosed() {              //Do some magic          }      });

使用语音搜索

启用与禁用：

1	searchView.setVoiceSearch( true );  //or false

处理响应：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) {      if  (requestCode == MaterialSearchView.REQUEST_VOICE && resultCode == RESULT_OK) {          ArrayList<String> matches = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);          if  (matches !=  null  && matches.size() > 0) {              String searchWrd = matches.get(0);              if  (!TextUtils.isEmpty(searchWrd)) {                  searchView.setQuery(searchWrd,  false );              }          }            return ;      }      super .onActivityResult(requestCode, resultCode, data); }

添加提示

在资源文件中以string-array的形式添加：

1 2 3 4 5 6 7

<string-array name= "query_suggestions" >      <item>Android</item>      <item>iOS</item>      <item>SCALA</item>      <item>Ruby</item>      <item>JavaScript</item> </string-array>

把它们添加到对象

1	searchView.setSuggestions(getResources().getStringArray(R.array.query_suggestions));

样式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<style name= "MaterialSearchViewStyle" >      <!— Background  for  the search bar—>      <item name= "searchBackground" >@color/theme_primary</item>        <!— Change voice icon—>      <item name= "searchVoiceIcon" >@drawable/ic_action_voice_search_inverted</item>        <!— Change clear text icon—>      <item name= "searchCloseIcon" >@drawable/ic_action_navigation_close_inverted</item>        <!— Change up icon—>      <item name= "searchBackIcon" >@drawable/ic_action_navigation_arrow_back_inverted</item>        <!— Change background  for  the suggestions list view—>      <item name= "searchSuggestionBackground" >@android:color/white</item>        <!— Change text color  for  edit text. This will also be the color of the cursor—>      <item name= "android:textColor" >@color/theme_primary_text_inverted</item>        <!— Change hint text color  for  edit text—>      <item name= "android:textColorHint" >@color/theme_secondary_text_inverted</item>        <!— Hint  for  edit text—>      <item name= "android:hint" >@string/search_hint</item> </style>

Custom cursor

创建 drawable:

1 2 3 4

<shape xmlns:android= "http://schemas.android.com/apk/res/android" >      <size android:width= "2dp"  />      <solid android:color= "@color/theme_primary"  /> </shape>

并添加到对象：

1	searchView.setCursorDrawable(R.drawable.custom_cursor);

Bonus

返回（on backpressed）的时候关闭:

1 2 3 4 5 6 7 8

@Override public void onBackPressed() {      if  (searchView.isSearchOpen()) {          searchView.closeSearch();      }  else  {          super .onBackPressed();      } }