Material 风格的搜索框MaterialSearchView的使用

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

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

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

1：在module的gradle中添加依赖

 compile 'com.miguelcatalan:materialsearchview:1.4.0'

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

     <FrameLayout

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

     </FrameLayout>

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

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

4：在Activity的onCreateOptionsMenu中定义菜单

 @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;

     }

5：设置监听，编辑过滤条件

 searchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() {

             @Override

             public boolean onQueryTextSubmit(String query) {

                 //Do some magic

                 return false;

             }

             @Override

             public boolean onQueryTextChange(String newText) {

                 filter(newText);

                 return true;

             }

         });

         searchView.setOnSearchViewListener(new MaterialSearchView.SearchViewListener() {

             @Override

             public void onSearchViewShown() {

                 //Do some magic

             }

             @Override

             public void onSearchViewClosed() {

                 //Do some magic

             }

         });

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

     @Override

     public void onBackPressed() {

         if (searchView.isSearchOpen()) {

             searchView.closeSearch();

         } else {

             super.onBackPressed();

         }

     }

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

  private void filter(String query) {

         try {

             List<Person> filterDateList = new ArrayList<Person>();

             //当输入框的内容为空时显示全部列表

             if (TextUtils.isEmpty(query)) {

                 filterDateList = datas;

             } else {

                 //清空

                 filterDateList.clear();

                 //遍历列表

                 for (Person person : datas) {

                     if (person.getName().contains(query.toString())

                             || person.getCareer().contains(query.toString())

                             ) {

                         filterDateList.add(person);

                     }

                 }

             }

             adapter.update(filterDateList);

         } catch (Exception e) {

             e.printStackTrace();

         }

     }

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

     public void update(List<Person> list) {

         this.datas = list;

         notifyDataSetChanged();

     }

巴特西

Material 风格的搜索框MaterialSearchView的使用

最新文章

热门文章