android 多条件筛选菜单效果

http://blog.csdn.net/u011733020/article/details/51002746

简介

多条件筛选菜单，在020app 上类似选地区，选择类型等功能。 一般早先来说，都是用popupwindow 去实现这个功能。 但其实原生的布局去实现这样一个功能同样是可以的，并且可以扩展定制样式。 基本所有的菜单，都可以归纳为以上两类：1 Listview(单列) 2 Gridview(多列)

效果

以下两种效果，第一种效果 跟第二种效果，实现方式大同小异。区别仅仅在于ListView 与GridView。

接下来，根据思路去看一下实现过程。

功能介绍：点击顶部的菜单栏，弹出菜单选择栏，选择具体菜单条目后，记录当前选择条目，并关闭菜单选择栏，将该选择条目展示在当前菜单栏上。

思路分析：给顶部的菜单栏添加点击事件，当响应点击事件时，弹出 菜单选择栏，给菜单选择栏的item 记录点击事件，将该item的信息传递出去保存，并改变item选择状态，同事隐藏 菜单选择栏。

实现过程：

首先去实现这一个布局

[html] view plain copy

print?

1. <RelativeLayout
2. android:id="@+id/rl_option_top"
3. android:layout_width="fill_parent"
4. android:layout_height="44dp"
5. android:background="@drawable/shape_rectangle_white_bottom_gray" >
7. <TextView
8. android:id="@+id/classify"
9. android:layout_width="wrap_content"
10. android:layout_height="fill_parent"
11. android:layout_marginLeft="5dp"
12. android:drawablePadding="2dp"
13. android:drawableRight="@drawable/img_triangle_down_gray"
14. android:gravity="center"
15. android:text="@string/classify" />
17. <TextView
18. android:id="@+id/time"
19. android:layout_width="wrap_content"
20. android:layout_height="fill_parent"
21. android:layout_marginLeft="5dp"
22. android:layout_toRightOf="@id/classify"
23. android:gravity="center"
24. android:text="@string/time" />
26. <TextView
27. android:id="@+id/category"
28. android:layout_width="wrap_content"
29. android:layout_height="fill_parent"
30. android:layout_marginLeft="5dp"
31. android:layout_toRightOf="@id/time"
32. android:gravity="center"
33. android:text="@string/type" />
35. <TextView
36. android:id="@+id/rank_xx"
37. android:layout_width="wrap_content"
38. android:layout_height="fill_parent"
39. android:layout_alignParentRight="true"
40. android:layout_centerVertical="true"
41. android:drawableLeft="@drawable/intro_navi_vline"
42. android:gravity="center"
43. android:text="@string/rank_xx" />
45. <TextView
46. android:id="@+id/rank_subscribe"
47. android:layout_width="wrap_content"
48. android:layout_height="fill_parent"
49. android:layout_centerVertical="true"
50. android:layout_toLeftOf="@id/rank_xx"
51. android:drawableLeft="@drawable/intro_navi_vline"
52. android:gravity="center"
53. android:text="@string/rank_subscribe" />
55. <TextView
56. android:id="@+id/rank_popularity"
57. android:layout_width="wrap_content"
58. android:layout_height="fill_parent"
59. android:layout_centerVertical="true"
60. android:layout_toLeftOf="@id/rank_subscribe"
61. android:gravity="center"
62. android:text="@string/rank_popular" />
63. </RelativeLayout>

接下来是下面的菜单选择栏：

[html] view plain copy

print?

1. <LinearLayout
2. android:id="@+id/ll_menu"
3. android:layout_width="fill_parent"
4. android:layout_height="200dp"
5. android:layout_below="@+id/rl_option_top"
6. android:background="@color/comm_gray"
7. android:clickable="true"
8. android:orientation="horizontal"
9. >
11. <LinearLayout
12. android:id="@+id/layout_two_type"
13. android:layout_width="85dp"
14. android:layout_height="fill_parent"
15. android:orientation="vertical" >
17. <TextView
18. android:id="@+id/txt_classify_group"
19. android:layout_width="fill_parent"
20. android:layout_height="43dp"
21. android:background="@drawable/shape_rectangle_white_bottom_gray"
22. android:gravity="center"
23. android:text="@string/rank_chose_class" />
25. <TextView
26. android:id="@+id/txt_time_group"
27. android:layout_width="fill_parent"
28. android:layout_height="43dp"
29. android:background="@drawable/shape_rectangle_white_bottom_gray"
30. android:gravity="center"
31. android:text="@string/rank_chose_time" />
32. </LinearLayout>
34. <ListView
35. android:id="@+id/list_filterc"
36. android:layout_width="match_parent"
37. android:layout_height="wrap_content"
38. android:background="@color/comm_gray" >
39. </ListView>
40. </LinearLayout>

由于默认是隐藏的，所以我们记得设置Visible 属性。

接下来就是在Activity去操作了，比较简单，就做了两件事，

1 注册点击事件

[java] view plain copy

print?

1. @Override
2. public void onClick(View v) {  
3. switch (v.getId()) {  
4. case R.id.classify:  
5. //点击分类
6.         menu.setVisibility(View.VISIBLE);  
7. break;  
8. case R.id.txt_classify_group:  
9. // 选择分类
10.         adapter=new FilterAdapter(classArrays,RANKTYPE_CLASSIIFY);  
11.         list_filter.setAdapter(adapter);  
12.         adapter.notifyDataSetInvalidated();  
13. break;  
14. case R.id.txt_time_group:  
15. // 选择时间
16.         adapter=new FilterAdapter(timeArrays,RANKTYPE_TIME);  
17.         list_filter.setAdapter(adapter);  
18.         adapter.notifyDataSetInvalidated();  
19. break;  
20. default:  
21. break;  
22.     }  
24. }  

 2 给listview 适配数据

[java] view plain copy

print?

1. private class FilterAdapter extends BaseAdapter{  
2. /** 选择器类型(时间,类型) */
3. public static final String MSG_BUNDLE_KEY_RANKTYPE= "msg_bundle_key_ranktype";  
5. /** tag_id */
6. public static final String MSG_BUNDLE_KEY_TAGID= "msg_bundle_key_tagid";  
8. public static final int MSG_WHAT_ONITEM_CLICK= 0x00011;  
9. private String[] data;  
10. /** 选择器类型(时间,类型) */
11. private int key_ranktype  ;   
13. public FilterAdapter(String[]  str,int type){  
14. super();  
15.             data=str;  
16.             key_ranktype=type;  
17.         }  
18. @Override
19. public int getCount() {  
20. // TODO Auto-generated method stub
21. return data.length;  
22.         }  
24. @Override
25. public Object getItem(int position) {  
26. // TODO Auto-generated method stub
27. return data[position];  
28.         }  
30. @Override
31. public long getItemId(int position) {  
32. // TODO Auto-generated method stub
33. return position;  
34.         }  
36. @Override
37. public View getView( int position, View convertView, ViewGroup parent) {  
38.             convertView=genrateItemLayout();  
39.             RelativeLayout layout=(RelativeLayout) convertView.findViewById(R.id.id01);  
40. final TextView tv=(TextView) convertView.findViewById(R.id.id02);  
41.             ImageView image=(ImageView) convertView.findViewById(R.id.id03);  
42.             image.setVisibility(View.GONE);  
43. if(time.getText().toString().equals(data[position])){  
44.                 image.setVisibility(View.VISIBLE);  
45.             }else if(category.getText().toString().equals(data[position])){  
46.                 image.setVisibility(View.VISIBLE);  
47.             }  
48.             tv.setText(data[position]);  
49.             layout.setOnClickListener(new OnClickListener() {  
51. @Override
52. public void onClick(View v) {  
53.                     Message msg = Message.obtain() ;   
54.                     msg.what = MSG_WHAT_ONITEM_CLICK ;   
55.                     Bundle data = new Bundle() ;   
56.                     data.putString(MSG_BUNDLE_KEY_TAGID, tv.getText().toString()) ;   
57.                     data.putInt(MSG_BUNDLE_KEY_RANKTYPE, key_ranktype) ;   
58.                     msg.setData(data) ;   
59.                     mHandler.sendMessage(msg) ;   
60.                 }  
61.             });  
62. return convertView;  
63.         }  

然后在handler 的 handlemessage 方法中去做响应的处理：

[java] view plain copy

print?

1. // 刷新UI
2. private static class MyHandler extends Handler {  
3. private final WeakReference<Type01Activity> mWeakAct;  
5. public MyHandler(Type01Activity activity) {  
6.         mWeakAct = new WeakReference<Type01Activity>(activity);  
7.     }  
9. @Override
10. public void handleMessage(android.os.Message msg) {  
11. final Type01Activity activity = mWeakAct.get();  
12. if (activity == null) {  
13. return;  
14.         }  
15.         activity.handleMsg(msg);  
16.     }  
17. }  
19. public void handleMsg(Message msg) {  
21. switch (msg.what) {  
22. case FilterAdapter.MSG_WHAT_ONITEM_CLICK:  
23.         String tag_id = msg.getData().getString(FilterAdapter.MSG_BUNDLE_KEY_TAGID) ;   
24. int type =  msg.getData().getInt(FilterAdapter.MSG_BUNDLE_KEY_RANKTYPE) ;  
25. if(type==RANKTYPE_CLASSIIFY){  
26.             category.setText(tag_id);  
27.         }else{  
28.             time.setText(tag_id);  
29.         }  
30.         adapter.notifyDataSetInvalidated();  
31.         menu.setVisibility(View.GONE);  
32.     }  
34. }  

第二种效果同理，只要将listview 替换成Gridview，只贴一下布局， Activity中代码基本一致。

[java] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent" >  
6.     <RelativeLayout  
7.         android:id="@+id/rl_option_top"
8.         android:layout_width="fill_parent"
9.         android:layout_height="44dp"
10.         android:background="@drawable/shape_rectangle_white_bottom_gray" >  
12.         <TextView  
13.             android:id="@+id/classify"
14.             android:layout_width="wrap_content"
15.             android:layout_height="fill_parent"
16.             android:layout_marginLeft="5dp"
17.             android:drawablePadding="2dp"
18.             android:drawableRight="@drawable/img_triangle_down_gray"
19.             android:gravity="center"
20.             android:text="专题分类" />  
21.     </RelativeLayout>  
23.     <LinearLayout  
24.         android:visibility="gone"
25.         android:id="@+id/layout_grid_filterc"
26.         android:layout_width="fill_parent"
27.         android:layout_height="fill_parent"
28.         android:layout_below="@id/rl_option_top"
29.         android:background="@color/common_half_transparent"
30.         android:orientation="horizontal" >  
32.         <GridView  
33.             android:id="@+id/grid_filterc"
34.             android:layout_width="fill_parent"
35.             android:layout_height="wrap_content"
36.             android:background="@color/comm_gray"
37.             android:numColumns="@integer/classify_main_filter_header_num" >  
38.         </GridView>  
39.     </LinearLayout>  
41. </RelativeLayout>  

下载：

参考：https://github.com/CodingForAndroid/FilterMenu Demo下载