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?





<RelativeLayout

android:id="@+id/rl_option_top"

android:layout_width="fill_parent"

android:layout_height="44dp"

android:background="@drawable/shape_rectangle_white_bottom_gray" >

<TextView

android:id="@+id/classify"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_marginLeft="5dp"

android:drawablePadding="2dp"

android:drawableRight="@drawable/img_triangle_down_gray"

android:gravity="center"

android:text="@string/classify" />

<TextView

android:id="@+id/time"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_marginLeft="5dp"

android:layout_toRightOf="@id/classify"

android:gravity="center"

android:text="@string/time" />

<TextView

android:id="@+id/category"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_marginLeft="5dp"

android:layout_toRightOf="@id/time"

android:gravity="center"

android:text="@string/type" />

<TextView

android:id="@+id/rank_xx"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_alignParentRight="true"

android:layout_centerVertical="true"

android:drawableLeft="@drawable/intro_navi_vline"

android:gravity="center"

android:text="@string/rank_xx" />

<TextView

android:id="@+id/rank_subscribe"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_centerVertical="true"

android:layout_toLeftOf="@id/rank_xx"

android:drawableLeft="@drawable/intro_navi_vline"

android:gravity="center"

android:text="@string/rank_subscribe" />

<TextView

android:id="@+id/rank_popularity"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_centerVertical="true"

android:layout_toLeftOf="@id/rank_subscribe"

android:gravity="center"

android:text="@string/rank_popular" />

</RelativeLayout>

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



[html] view
plain copy

print?





<LinearLayout

android:id="@+id/ll_menu"

android:layout_width="fill_parent"

android:layout_height="200dp"

android:layout_below="@+id/rl_option_top"

android:background="@color/comm_gray"

android:clickable="true"

android:orientation="horizontal"

>

<LinearLayout

android:id="@+id/layout_two_type"

android:layout_width="85dp"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView

android:id="@+id/txt_classify_group"

android:layout_width="fill_parent"

android:layout_height="43dp"

android:background="@drawable/shape_rectangle_white_bottom_gray"

android:gravity="center"

android:text="@string/rank_chose_class" />

<TextView

android:id="@+id/txt_time_group"

android:layout_width="fill_parent"

android:layout_height="43dp"

android:background="@drawable/shape_rectangle_white_bottom_gray"

android:gravity="center"

android:text="@string/rank_chose_time" />

</LinearLayout>

<ListView

android:id="@+id/list_filterc"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/comm_gray" >

</ListView>

</LinearLayout>

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

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

1 注册点击事件

[java] view
plain copy

print?





@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.classify:

//点击分类

menu.setVisibility(View.VISIBLE);

break;

case R.id.txt_classify_group:

// 选择分类

adapter=new FilterAdapter(classArrays,RANKTYPE_CLASSIIFY);

list_filter.setAdapter(adapter);

adapter.notifyDataSetInvalidated();

break;

case R.id.txt_time_group:

// 选择时间

adapter=new FilterAdapter(timeArrays,RANKTYPE_TIME);

list_filter.setAdapter(adapter);

adapter.notifyDataSetInvalidated();

break;

default:

break;

}

}

2 给listview 适配数据

[java] view
plain copy

print?





private class FilterAdapter extends BaseAdapter{

/** 选择器类型(时间,类型) */

public static final String MSG_BUNDLE_KEY_RANKTYPE= "msg_bundle_key_ranktype";

/** tag_id */

public static final String MSG_BUNDLE_KEY_TAGID= "msg_bundle_key_tagid";

public static final int MSG_WHAT_ONITEM_CLICK= 0x00011;

private String[] data;

/** 选择器类型(时间,类型) */

private int key_ranktype ;

public FilterAdapter(String[] str,int type){

super();

data=str;

key_ranktype=type;

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return data.length;

}

@Override

public Object getItem(int position) {

// TODO Auto-generated method stub

return data[position];

}

@Override

public long getItemId(int position) {

// TODO Auto-generated method stub

return position;

}

@Override

public View getView( int position, View convertView, ViewGroup parent) {

convertView=genrateItemLayout();

RelativeLayout layout=(RelativeLayout) convertView.findViewById(R.id.id01);

final TextView tv=(TextView) convertView.findViewById(R.id.id02);

ImageView image=(ImageView) convertView.findViewById(R.id.id03);

image.setVisibility(View.GONE);

if(time.getText().toString().equals(data[position])){

image.setVisibility(View.VISIBLE);

}else if(category.getText().toString().equals(data[position])){

image.setVisibility(View.VISIBLE);

}

tv.setText(data[position]);

layout.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Message msg = Message.obtain() ;

msg.what = MSG_WHAT_ONITEM_CLICK ;

Bundle data = new Bundle() ;

data.putString(MSG_BUNDLE_KEY_TAGID, tv.getText().toString()) ;

data.putInt(MSG_BUNDLE_KEY_RANKTYPE, key_ranktype) ;

msg.setData(data) ;

mHandler.sendMessage(msg) ;

}

});

return convertView;

}

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

[java] view
plain copy

print?





// 刷新UI

private static class MyHandler extends Handler {

private final WeakReference<Type01Activity> mWeakAct;

public MyHandler(Type01Activity activity) {

mWeakAct = new WeakReference<Type01Activity>(activity);

}

@Override

public void handleMessage(android.os.Message msg) {

final Type01Activity activity = mWeakAct.get();

if (activity == null) {

return;

}

activity.handleMsg(msg);

}

}

public void handleMsg(Message msg) {

switch (msg.what) {

case FilterAdapter.MSG_WHAT_ONITEM_CLICK:

String tag_id = msg.getData().getString(FilterAdapter.MSG_BUNDLE_KEY_TAGID) ;

int type = msg.getData().getInt(FilterAdapter.MSG_BUNDLE_KEY_RANKTYPE) ;

if(type==RANKTYPE_CLASSIIFY){

category.setText(tag_id);

}else{

time.setText(tag_id);

}

adapter.notifyDataSetInvalidated();

menu.setVisibility(View.GONE);

}

}

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



[java] view
plain copy

print?





<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<RelativeLayout

android:id="@+id/rl_option_top"

android:layout_width="fill_parent"

android:layout_height="44dp"

android:background="@drawable/shape_rectangle_white_bottom_gray" >

<TextView

android:id="@+id/classify"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_marginLeft="5dp"

android:drawablePadding="2dp"

android:drawableRight="@drawable/img_triangle_down_gray"

android:gravity="center"

android:text="专题分类" />

</RelativeLayout>

<LinearLayout

android:visibility="gone"

android:id="@+id/layout_grid_filterc"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_below="@id/rl_option_top"

android:background="@color/common_half_transparent"

android:orientation="horizontal" >

<GridView

android:id="@+id/grid_filterc"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@color/comm_gray"

android:numColumns="@integer/classify_main_filter_header_num" >

</GridView>

</LinearLayout>

</RelativeLayout>

下载：

参考：https://github.com/CodingForAndroid/FilterMenu

Demo下载