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" >  
6.   
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" />  
16.   
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" />  
25.   
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" />  
34.   
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" />  
44.   
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" />  
54.   
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.        >  
10.   
11.         <LinearLayout  
12.             android:id="@+id/layout_two_type"  
13.             android:layout_width="85dp"  
14.             android:layout_height="fill_parent"  
15.             android:orientation="vertical" >  
16.   
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" />  
24.   
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>  
33.   
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>  

接下来就是在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.     }  
23.   
24. }  

[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";  
4.           
5.         /** tag_id */  
6.         public static final String MSG_BUNDLE_KEY_TAGID= "msg_bundle_key_tagid";  
7.           
8.         public static final int MSG_WHAT_ONITEM_CLICK= 0x00011;  
9.         private String[] data;  
10.         /** 选择器类型(时间,类型) */  
11.         private int key_ranktype  ;   
12.   
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.         }  
23.   
24.         @Override  
25.         public Object getItem(int position) {  
26.             // TODO Auto-generated method stub  
27.             return data[position];  
28.         }  
29.   
30.         @Override  
31.         public long getItemId(int position) {  
32.             // TODO Auto-generated method stub  
33.             return position;  
34.         }  
35.   
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() {  
50.                   
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.         }  

[java]  view plain  copy

 print ?

1. // 刷新UI  
2. private static class MyHandler extends Handler {  
3.     private final WeakReference mWeakAct;  
4.   
5.     public MyHandler(Type01Activity activity) {  
6.         mWeakAct = new WeakReference(activity);  
7.     }  
8.   
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. }  
18.   
19. public void handleMsg(Message msg) {  
20.       
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.     }  
33.       
34. }  

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

[java]  view plain  copy

 print ?

1. "1.0" encoding="utf-8"?>  
2. "http://schemas.android.com/apk/res/android"  
3.     android:layout_string" >"match_parent"  
4.     android:layout_string" >"match_parent" >  
5.   
6.     
7.         android:id="@+id/rl_option_top"  
8.         android:layout_string" >"fill_parent"  
9.         android:layout_string" >"44dp"  
10.         android:background="@drawable/shape_rectangle_white_bottom_gray" >  
11.   
12.         
13.             android:id="@+id/classify"  
14.             android:layout_string" >"wrap_content"  
15.             android:layout_string" >"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.       
22.   
23.     
24.         android:visibility="gone"  
25.         android:id="@+id/layout_grid_filterc"  
26.         android:layout_string" >"fill_parent"  
27.         android:layout_string" >"fill_parent"  
28.         android:layout_below="@id/rl_option_top"  
29.         android:background="@color/common_half_transparent"  
30.         android:orientation="horizontal" >  
31.   
32.         
33.             android:id="@+id/grid_filterc"  
34.             android:layout_string" >"fill_parent"  
35.             android:layout_string" >"wrap_content"  
36.             android:background="@color/comm_gray"  
37.             android:numColumns="@integer/classify_main_filter_header_num" >  
38.           
39.       
40.   
41.   

下载：