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();
    }