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. <TextView
  7. android:id="@+id/classify"
  8. android:layout_width="wrap_content"
  9. android:layout_height="fill_parent"
  10. android:layout_marginLeft="5dp"
  11. android:drawablePadding="2dp"
  12. android:drawableRight="@drawable/img_triangle_down_gray"
  13. android:gravity="center"
  14. android:text="@string/classify" />
  15. <TextView
  16. android:id="@+id/time"
  17. android:layout_width="wrap_content"
  18. android:layout_height="fill_parent"
  19. android:layout_marginLeft="5dp"
  20. android:layout_toRightOf="@id/classify"
  21. android:gravity="center"
  22. android:text="@string/time" />
  23. <TextView
  24. android:id="@+id/category"
  25. android:layout_width="wrap_content"
  26. android:layout_height="fill_parent"
  27. android:layout_marginLeft="5dp"
  28. android:layout_toRightOf="@id/time"
  29. android:gravity="center"
  30. android:text="@string/type" />
  31. <TextView
  32. android:id="@+id/rank_xx"
  33. android:layout_width="wrap_content"
  34. android:layout_height="fill_parent"
  35. android:layout_alignParentRight="true"
  36. android:layout_centerVertical="true"
  37. android:drawableLeft="@drawable/intro_navi_vline"
  38. android:gravity="center"
  39. android:text="@string/rank_xx" />
  40. <TextView
  41. android:id="@+id/rank_subscribe"
  42. android:layout_width="wrap_content"
  43. android:layout_height="fill_parent"
  44. android:layout_centerVertical="true"
  45. android:layout_toLeftOf="@id/rank_xx"
  46. android:drawableLeft="@drawable/intro_navi_vline"
  47. android:gravity="center"
  48. android:text="@string/rank_subscribe" />
  49. <TextView
  50. android:id="@+id/rank_popularity"
  51. android:layout_width="wrap_content"
  52. android:layout_height="fill_parent"
  53. android:layout_centerVertical="true"
  54. android:layout_toLeftOf="@id/rank_subscribe"
  55. android:gravity="center"
  56. android:text="@string/rank_popular" />
  57. </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. <LinearLayout
  11. android:id="@+id/layout_two_type"
  12. android:layout_width="85dp"
  13. android:layout_height="fill_parent"
  14. android:orientation="vertical" >
  15. <TextView
  16. android:id="@+id/txt_classify_group"
  17. android:layout_width="fill_parent"
  18. android:layout_height="43dp"
  19. android:background="@drawable/shape_rectangle_white_bottom_gray"
  20. android:gravity="center"
  21. android:text="@string/rank_chose_class" />
  22. <TextView
  23. android:id="@+id/txt_time_group"
  24. android:layout_width="fill_parent"
  25. android:layout_height="43dp"
  26. android:background="@drawable/shape_rectangle_white_bottom_gray"
  27. android:gravity="center"
  28. android:text="@string/rank_chose_time" />
  29. </LinearLayout>
  30. <ListView
  31. android:id="@+id/list_filterc"
  32. android:layout_width="match_parent"
  33. android:layout_height="wrap_content"
  34. android:background="@color/comm_gray" >
  35. </ListView>
  36. </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.     }  
  23. }  

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

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

[java] view plain copy

print?

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

第二种效果同理,只要将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" >  
  5.     <RelativeLayout  
  6.         android:id="@+id/rl_option_top"
  7.         android:layout_width="fill_parent"
  8.         android:layout_height="44dp"
  9.         android:background="@drawable/shape_rectangle_white_bottom_gray" >  
  10.         <TextView  
  11.             android:id="@+id/classify"
  12.             android:layout_width="wrap_content"
  13.             android:layout_height="fill_parent"
  14.             android:layout_marginLeft="5dp"
  15.             android:drawablePadding="2dp"
  16.             android:drawableRight="@drawable/img_triangle_down_gray"
  17.             android:gravity="center"
  18.             android:text="专题分类" />  
  19.     </RelativeLayout>  
  20.     <LinearLayout  
  21.         android:visibility="gone"
  22.         android:id="@+id/layout_grid_filterc"
  23.         android:layout_width="fill_parent"
  24.         android:layout_height="fill_parent"
  25.         android:layout_below="@id/rl_option_top"
  26.         android:background="@color/common_half_transparent"
  27.         android:orientation="horizontal" >  
  28.         <GridView  
  29.             android:id="@+id/grid_filterc"
  30.             android:layout_width="fill_parent"
  31.             android:layout_height="wrap_content"
  32.             android:background="@color/comm_gray"
  33.             android:numColumns="@integer/classify_main_filter_header_num" >  
  34.         </GridView>  
  35.     </LinearLayout>  
  36. </RelativeLayout>  

下载:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏双十二技术哥

Android fragment 标签加载过程分析

在上一篇文章中我们介绍了 AsyncLayoutInflater 使用的注意事项及改进方案。

1431
来自专栏向治洪

qq平台登录

在APP开发过程中,时常会用到第三方账号登录体系。 下面,简要说明QQ的第三方登录体系在Android平台上的运用。 申请APPID 进入QQ互联的官网...

28810
来自专栏水击三千

Android学习之sqlite与listview

在android系统中使用的是sqlite数据库,前面的简易登录系统已经讲述了数据库的应用。本例的重点是实现数据库与listview的绑定。demo的数据是将个...

3566
来自专栏蜉蝣禅修之道

Android之共享已安装的apk应用

6535
来自专栏developerHaoz 的安卓之旅

Android 打造一个丝滑的自动轮播控件

现在很多的 App 都有自动轮播的 banner 界面,用于展示广告图片或者显示当前比较热门的一些活动,除了具备比较酷炫的效果之外,通过轮播的方式来减少对界面的...

1182
来自专栏向治洪

仿qq登录界面

最近做一个登录的界面,我脑子里一下就想到QQ的登录界面,简单,美观,所以就找了些资料实现了下,现在整理下 先来看下效果图 ? 1.首先是布局文件XML文...

8809
来自专栏cloudskyme

android开发列表界面

android开发列表界面,上边是一个显示题目,下边显示的是图标,中间显示的是列表。 看一下效果吧 ? 当鼠标点击上之后出现背景图,下面看一下如何做出这样的效果...

4006
来自专栏学海无涯

Android开发之ViewPager简单使用

什么是ViewPager? ViewPager(android.support.v4.view.ViewPager)是android扩展包v4包中的类,这个类可...

3295
来自专栏ASP.NET MVC5 后台权限管理系统

.Net 转战 Android 4.4 日常笔记(10)--PullToRefresh下拉刷新使用

这里我们使用一个开源的库叫:PullToRefresh 开源地址:https://github.com/chenyoca/pull-to-refresh 下载地...

1988
来自专栏酷玩时刻

Android MVP 构架封装

上一篇我们简单实现了一个MVP的构架,下面我们来做一个简单的封装使其使用更简单方便

1013

扫码关注云+社区

领取腾讯云代金券