二级下拉列表菜单ExpandTabView改进版(仿美团,大众点评)

    |     2015年12月16日   |   Android UI界面   |     0 条评论   |    5028

美团、大众点评一类 App 常见二级下拉筛选。网上已有 ExpandTabView,Github 可点 DownLoad。这里做一版改进,顺带练 PopupWindow、自定义控件、自定义 ToggleButton 和回调。


一、效果与数据源

实现效果:

ExpandTab

价格、排序、优惠各一个 List;区域有二级,需要父 List 和子 List 的 List。

private List<KeyValueBean> mPriceLists; // 价格
private List<KeyValueBean> mSortLists;  // 排序
private List<KeyValueBean> mFavorLists; // 优惠
private List<KeyValueBean> mParentLists = new ArrayList<>(); // 父区域
private List<ArrayList<KeyValueBean>> mChildrenListLists = new ArrayList<>(); // 子区域

class KeyValueBean {
    private String key;
    private String value;
}
Tab 弹出 View 数据
价格 / 排序 / 优惠 PopOneListView 单个 List<KeyValueBean>
区域 PopTwoListView 父 List + 子 List 的 List

二、引入库与布局

第三方包下载请移步这里 DownLoad。Activity 布局里放自定义控件 ExpandPopTabView:

<com.warmtel.expandtab.ExpandPopTabView
        android:id="@+id/expandtab_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

弹出 View 用库里默认的 PopOneListView 和 PopTwoListView:

PopOneListView popOneListView = new PopOneListView(this);
PopTwoListView popTwoListView = new PopTwoListView(this);

三、关联数据、默认选中与封装

setCallBackAndData 绑数据和点击回调,再 addItemToExpandTab 挂到顶栏。也可用 setDefaultSelectByValue 设默认项。

popOneListView.setCallBackAndData(lists, expandTabView, new PopOneListView.OnSelectListener() {
    @Override
    public void getValue(String key, String value) {
        // 弹出框选项点击选中回调方法
    }
});
expandTabView.addItemToExpandTab(defaultShowText, popViewOne);

popTwoListView.setCallBackAndData(expandTabView, parentLists, childrenListLists, new PopTwoListView.OnSelectListener() {
    @Override
    public void getValue(String showText, String parentKey, String childrenKey) {
        // 弹出框选项点击选中回调方法
    }
});
expandTabView.addItemToExpandTab(defaultShowText, distanceView);

popOneListView.setDefaultSelectByValue(defaultSelect);
popTwoListView.setDefaultSelectByValue(defaultParentSelect, defaultChildSelect);

封装两个 addItem 重载,一级、二级各走一遍:

public void addItem(ExpandPopTabView expandTabView, List<KeyValueBean> lists, String defaultSelect, String defaultShowText) {
    PopOneListView popOneListView = new PopOneListView(this);
    popOneListView.setDefaultSelectByValue(defaultSelect);
    popOneListView.setCallBackAndData(lists, expandTabView, new PopOneListView.OnSelectListener() {
        @Override
        public void getValue(String key, String value) {
            // 弹出框选项点击选中回调方法
        }
    });
    expandTabView.addItemToExpandTab(defaultShowText, popOneListView);
}

public void addItem(ExpandPopTabView expandTabView, List<KeyValueBean> parentLists,
                    List<ArrayList<KeyValueBean>> childrenListLists, String defaultParentSelect, String defaultChildSelect, String defaultShowText) {
    PopTwoListView popTwoListView = new PopTwoListView(this);
    popTwoListView.setDefaultSelectByValue(defaultParentSelect, defaultChildSelect);
    popTwoListView.setCallBackAndData(expandTabView, parentLists, childrenListLists, new PopTwoListView.OnSelectListener() {
        @Override
        public void getValue(String showText, String parentKey, String childrenKey) {
            // 弹出框选项点击选中回调方法
        }
    });
    expandTabView.addItemToExpandTab(defaultShowText, popTwoListView);
}

调用方式(价格、排序、优惠、区域):

ExpandPopTabView expandTabView = (ExpandPopTabView) findViewById(R.id.expandtab_view);
addItem(expandTabView, mPriceLists, "", "价格");
addItem(expandTabView, mFavorLists, "默认", "排序");
addItem(expandTabView, mSortLists, "优惠最多", "优惠");
addItem(expandTabView, mParentLists, mChildrenListLists, "锦江区", "合江亭", "区域");

对上述使用方式还不清楚的同学可以到这里下载源码 Demo:源码下载

一句话总结:一级用 PopOneListView,二级用 PopTwoListView,addItem 封装后往 ExpandPopTabView 上挂即可。

转载请注明来源:二级下拉列表菜单ExpandTabView改进版(仿美团,大众点评)
本文链接地址:https://ai.zhousir.top/?p=1059
回复 取消