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