SearchView结合Toolbar 筛选RecyclerView中的内容,类似知乎、google play实现的效果
2017-06-19 09:28
417 查看
SearchView结合Toolbar 筛选RecyclerView中的内容,类似知乎、google play实现的效果
标签: SearchViewToolBarRecyclerFilter知乎2016-03-19 10:52 811人阅读 评论(0) 收藏 举报
分类:
android(1)
版权声明:本文为博主原创文章,未经博主允许不得转载。
目录(?)[+]
效果
代码已上传至github
项目里要做一个对列表内容的筛选,想到了知乎以及google play的效果,确定了是用Toolbar、SearchView、RecyclerView实现
Toolbar不用多说,如有不懂我也上传到了github
Recycler我之前也写过Demo,同样上传到了github
难搞的是SearchView,毕竟现在都流行Material Design了嘛,自带的那个效果实在不敢恭维,网上搜了下,已有大神实现了MaterialDesign效果的SearchView,所以拿来用咯
部分代码,我贴一下,详情请看Demo
初始化操作
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); initView(); } private void initView() { initToolBar(); initRecyclerView(); initSearchView(); } /** * init Toolbar */ private void initToolBar() { setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); getSupportActionBar().setDisplayShowTitleEnabled(false); } /** * init RecyclerView */ private void initRecyclerView() { LinearLayoutManager layoutManager = new LinearLayoutManager(this); recyclerView.setLayoutManager(layoutManager); mPeopleList = new ArrayList<>(); String[] peopleName = {"Kaka", "Modric", "Rooney", "Ibla", "Bale", "死神", "Maurice Moss", "Roy Trenneman", "林夕", "sina", "google", "ecust"}; String[] peopleDes = {"The best player", "莫德里奇是最好的后腰", "鲁尼踢得不好", "伊贝拉是谁?", "贝尔跑得真快", "Aaron", "Oh, four, I mean five, I mean fire!", "哈哈", "是个艺术家", "weibo", "android", "china"}; for (int i = 0; i < peopleName.length; i++) { mPeopleList.add(new People(peopleName[i], peopleDes[i])); } mAdapter = new SearchPeopleAdapter(mPeopleList); recyclerView.setAdapter(mAdapter); HeaderAdapter headerAdapter = new HeaderAdapter(mAdapter); recyclerView.setAdapter(headerAdapter); recyclerView.addOnItemTouchListener(new RecyclerOnItemClickListener(this, recyclerView, this)); } /** * init SearchView */ private void initSearchView() { searchView.setVoiceSearch(false); searchView.setCursorDrawable(R.drawable.custom_cursor); searchView.setEllipsize(true); searchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { return true; } @Override public boolean onQueryTextChange(String newText) { final List<People> filteredModelList = filter(mPeopleList, newText); //reset mAdapter.setFilter(filteredModelList); mAdapter.animateTo(filteredModelList); recyclerView.scrollToPosition(0); return true; } }); searchView.setOnSearchViewListener(new MaterialSearchView.SearchViewListener() { @Override public void onSearchViewShown() { } @Override public void onSearchViewClosed() { mAdapter.setFilter(mPeopleList); } }); } /** * 搜索按钮 * * @param menu * @return */ @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_search, menu); MenuItem item = menu.findItem(R.id.action_search); searchView.setMenuItem(item); return true; }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
筛选逻辑
/** * 筛选逻辑 * @param peoples * @param query * @return */ private List<People> filter(List<People> peoples, String query) { query = query.toLowerCase(); final List<People> filteredModelList = new ArrayList<>(); for (People people : peoples) { final String nameEn = people.getName().toLowerCase(); final String desEn = people.getDescription().toLowerCase(); final String name = people.getName(); final String des = people.getDescription(); if (name.contains(query) || des.contains(query) || nameEn.contains(query) || desEn.contains(query)) { filteredModelList.add(people); } } return filteredModelList; }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
相关文章推荐
- Android中使用RecyclerView + SnapHelper实现类似ViewPager效果
- 基于RecyclerView实现的实现多样化的item样式——类似IM即时通讯聊天界面的布局效果
- Android中使用RecyclerView + SnapHelper实现类似ViewPager效果
- Android中使用RecyclerView + SnapHelper实现类似ViewPager效果
- Android下利用ToolBar+SearchView实现仿微信搜索框效果
- Android HorizontalScrollView结合GridView实现类似网易新闻那样的栏目滑动效果
- Android 中使用 RecyclerView + SnapHelper 实现类似 ViewPager 效果
- Android 中使用 RecyclerView + SnapHelper 实现类似 ViewPager 效果
- Android中使用RecyclerView + SnapHelper实现类似ViewPager效果
- RecyclerView利用ItemDecoration实现头部悬停效果【类似微信通讯录效果】
- 实现RecyclerView类似3D效果的消失
- SwipeRefreshLayout和RecyclerView结合实现下拉刷新和上拉加载更多的效果
- 8-20学习练习[用两个tableview实现类似省市联动选择效果]
- 通过CATransition实现类似UINavigationController的pushview及Popview效果
- 用HorizontalScrollView布局实现类似Gallery效果
- UIScrollView实现类似91助手抽屉效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果 3ff8
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- jquery实现类似以前凡客诚品右侧图文切换结合效果