大多数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 }