大多数App中都有搜索的功能,虽然国内实实在在的遵循Google material design设计语言来设计的App实在不多,但个人感觉MD真的是非常值得研究,这次给大家介绍的是 Material 风格的搜索框MaterialSearchView。

MaterialSearchView Github地址:https://github.com/MiguelCatalan/MaterialSearchView ,强烈建议大家学习学习,虽然只是简单的使用,但是还是整理了一下画了个简单的思维导图。

自己也写了下简单的Demo,下面主要就是围绕怎么实现下面效果记录

1:在module的gradle中添加依赖

1 compile 'com.miguelcatalan:materialsearchview:1.4.0'

2:将MaterialSearchView与Toolbar一起添加到布局文件中

 1     <FrameLayout
 2         android:id="@+id/toolbar_container"
 3         android:layout_width="match_parent"
 4         android:layout_height="wrap_content">
 5 
 6         <android.support.v7.widget.Toolbar
 7             android:id="@+id/toolbar"
 8             android:layout_width="match_parent"
 9             android:layout_height="?attr/actionBarSize"
10             android:background="@color/theme_primary" />
11 
12         <com.miguelcatalan.materialsearchview.MaterialSearchView
13             android:id="@+id/search_view"
14             android:layout_width="match_parent"
15             android:layout_height="wrap_content" />
16     </FrameLayout>

3:在menu文件夹下新建菜单文件,将搜索项添加到菜单文件中

1     <item
2         android:id="@+id/action_search"
3         android:icon="@drawable/ic_action_action_search"
4         android:orderInCategory="100"
5         android:title="@string/abc_search_hint"
6         app:showAsAction="always" />

4:在Activity的onCreateOptionsMenu中定义菜单

1 @Override
2     public boolean onCreateOptionsMenu(Menu menu) {
3         getMenuInflater().inflate(R.menu.menu_main, menu);
4 
5         MenuItem item = menu.findItem(R.id.action_search);
6         searchView.setMenuItem(item);
7 
8         return true;
9     }

5:设置监听,编辑过滤条件

 1 searchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() {
 2             @Override
 3             public boolean onQueryTextSubmit(String query) {
 4                 //Do some magic
 5                 return false;
 6             }
 7 
 8             @Override
 9             public boolean onQueryTextChange(String newText) {
10                 filter(newText);
11                 return true;
12             }
13         });
14         
15         searchView.setOnSearchViewListener(new MaterialSearchView.SearchViewListener() {
16             @Override
17             public void onSearchViewShown() {
18                 //Do some magic
19             }
20 
21             @Override
22             public void onSearchViewClosed() {
23                 //Do some magic
24             }
25         });

6:设置back按钮来关闭搜索视图

1     @Override
2     public void onBackPressed() {
3         if (searchView.isSearchOpen()) {
4             searchView.closeSearch();
5         } else {
6             super.onBackPressed();
7         }
8     }

MaterialSearchView的使用步骤如上,咱们看看第五点的过滤条件的代码

 1  private void filter(String query) {
 2         try {
 3             List<Person> filterDateList = new ArrayList<Person>();
 4             //当输入框的内容为空时显示全部列表
 5             if (TextUtils.isEmpty(query)) {
 6                 filterDateList = datas;
 7             } else {
 8                 //清空
 9                 filterDateList.clear();
10                 //遍历列表
11                 for (Person person : datas) {
12                     if (person.getName().contains(query.toString())
13                             || person.getCareer().contains(query.toString())
14                             ) {
15                         filterDateList.add(person);
16                     }
17                 }
18             }
19             adapter.update(filterDateList);
20         } catch (Exception e) {
21             e.printStackTrace();
22         }
23     }

我们在RecycleView 的适配器Adapter中添加了一个方法Update.

1     public void update(List<Person> list) {
2         this.datas = list;
3         notifyDataSetChanged();
4     }