下拉列表—DropDownMenu的使用解析

DropDownMenu使用解析

下拉筛选列表网上有很多，但是想到自己动手丰衣足食，就自己试试啦！

在布局时因为考虑到流畅问题，所以没用PopupWindow，而是采用基本布局方式完成的。

经过筛选我用的是这个 https://github.com/dongjunkun/DropDownMenu.git，想要的可以自己下demo哈！

只要核心代码如下：

Gradle Dependency

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

dependencies {
    compile 'com.github.dongjunkun:DropDownMenu:1.0.3'
}

使用

添加DropDownMenu 到你的布局文件，如下

我们只需要在java代码中调用下面的代码

 //tabs 所有标题，popupListViews  所有菜单，contentView 内容
mDropDownMenu.setDropDownMenu(tabs, popupListViews, contentView);

mDropDownMenu.setTabText(position == 0 ? headers[2] : sexs[position]); //item被选择时调用
mDropDownMenu.closeMenu(); //默认自带动画效果

贴出源码，方便更好的理解参数：

setDropDownMenu(List tabTexts,List popupViews,View contentView)

ScreenShot

效果不错吧，嘿嘿，这是github上的效果，喔并没有做改动\(^o^)/~

那么我们需要做什么呢？

其实就是围绕mDropDownMenu.setDropDownMenu(tabs, popupListViews, contentView);参数展开的：

 0.准备最上边tabs数据；

 1.准备PopupView集合，及对应的adapter，包括填充条目item布局样式；
 2.contentView的布局及数据变化加载需要自己设置；
 3.可通过listView的setOnItemClickListener获得需要自己获取所选的条目position；

adapter这里就不絮叨了，我们直接看Activity中代码：

public class DropDownMenuActivity extends AppCompatActivity {

    @InjectView(R.id.dropDownMenu)
    DropDownMenu mDropDownMenu;
    private String headers[] = {"城市", "年龄", "性别", "星座"};
    private List popupViews = new ArrayList<>();

    private GirdDropDownAdapter cityAdapter;
    private ListDropDownAdapter ageAdapter;
    private ListDropDownAdapter sexAdapter;
    private ConstellationAdapter constellationAdapter;

    private String citys[] = {"不限", "武汉", "北京", "上海", "成都", "广州", "深圳", "重庆", "天津", "西安", "南京", "杭州"};
    private String ages[] = {"不限", "18岁以下", "18-22岁", "23-26岁", "27-35岁", "35岁以上"};
    private String sexs[] = {"不限", "男", "女"};
    private String constellations[] = {"不限", "白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", "射手座", "摩羯座", "水瓶座", "双鱼座"};

    private int constellationPosition = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dropdowmenu);
        ButterKnife.inject(this);
        initView();
    }

    private void initView() {
        //init city menu
        final ListView cityView = new ListView(this); //gird:准备
        cityAdapter = new GirdDropDownAdapter(this, Arrays.asList(citys));
        cityView.setDividerHeight(0);
        cityView.setAdapter(cityAdapter);

        //init age menu
        final ListView ageView = new ListView(this);
        ageView.setDividerHeight(0);
        ageAdapter = new ListDropDownAdapter(this, Arrays.asList(ages));
        ageView.setAdapter(ageAdapter);

        //init sex menu
        final ListView sexView = new ListView(this);
        sexView.setDividerHeight(0);
        sexAdapter = new ListDropDownAdapter(this, Arrays.asList(sexs));
        sexView.setAdapter(sexAdapter);

        //init constellation
        final View constellationView = getLayoutInflater().inflate(R.layout.custom_layout, null);
        GridView constellation = ButterKnife.findById(constellationView, R.id.constellation);
        constellationAdapter = new ConstellationAdapter(this, Arrays.asList(constellations));
        constellation.setAdapter(constellationAdapter);
        TextView ok = ButterKnife.findById(constellationView, R.id.ok);
        ok.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //其内部已经设置了记录当前tab位置的参数，该参数会随tab被点击而改变，所以这里直接设置tab值即可
                //此处若想获得constellations第一个值“不限”，可修改constellationPosition初始值为-1，且这里代码改为constellationPosition == -1)
                mDropDownMenu.setTabText((constellationPosition == 0) ? headers[3] : constellations[constellationPosition]);
                mDropDownMenu.closeMenu();
//                changeContentView();   //在这里可以请求获得经筛选后要显示的内容
            }
        });

        //add item click event
        cityView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                cityAdapter.setCheckItem(position);
                mDropDownMenu.setTabText(position == 0 ? headers[0] : citys[position]);
                mDropDownMenu.closeMenu();
            }
        });

        ageView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                ageAdapter.setCheckItem(position);
                mDropDownMenu.setTabText(position == 0 ? headers[1] : ages[position]);
                mDropDownMenu.closeMenu();
            }
        });

        sexView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                sexAdapter.setCheckItem(position);
                mDropDownMenu.setTabText(position == 0 ? headers[2] : sexs[position]);
                mDropDownMenu.closeMenu();
            }
        });

        constellation.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                constellationAdapter.setCheckItem(position);
                constellationPosition = position;
            }
        });

        //init popupViews
        popupViews.add(cityView);
        popupViews.add(ageView);
        popupViews.add(sexView);
        popupViews.add(constellationView);

        //init context view
        TextView contentView = new TextView(this);
        contentView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        contentView.setText("内容显示区域");
        contentView.setGravity(Gravity.CENTER);
        contentView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);

        //init dropdownview
        mDropDownMenu.setDropDownMenu(Arrays.asList(headers), popupViews, contentView);
    }

    @Override
    public void onBackPressed() {
        //退出activity前关闭菜单
        if (mDropDownMenu.isShowing()) {
            mDropDownMenu.closeMenu();
        } else {
            super.onBackPressed();
        }
    }
}

主要地方已经做了注释，希望能帮到大家吧！
下边是我自己画的DropDownMenu层级图,可以帮助理解布局:

虽然有点丑，下次改进吧，嘿嘿。。。

简书 3Q竹林