二级菜单ExpandPopView的使用和实现

最新推荐文章于 2022-03-26 14:33:11 发布
最新推荐文章于 2022-03-26 14:33:11 发布
阅读量2.3k 收藏 4
点赞数 1
分类专栏： java语言实现文件夹的复制 android 文章标签： 二级菜单 自定义view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tom_xiaoxie/article/details/50390506
版权

开发中需要展示很详细的内容时，往往会用到二级菜单，诸如美团，大众点评选择地点位置的菜单一样。这里分享一个第三方包：expandpoptabview-library包来实现二级单。

效果如下：


首先需要下载一个第三方架包：就是一个自定义View

GitHub地址：https://github.com/Tomxieke/ExpandPopTabView

csdn资源下载地址：http://download.csdn.net/detail/tom_xiaoxie/9376255


使用:下载资源可以将library导入你的工程使用，亦可以直接Copy library中的几个类（自定义View）到工程目录下即可使用。

使用很简单，主要是构造好数据源：

(1)、首先介绍一级菜单的使用：数据源为一个装有KeyVaule对象的集合。

 /**
     * 一级菜单数据源
     */
    void setData(){
        list = new ArrayList<>();
        KeyValueBean bean = new KeyValueBean();
        bean.setKey("A");
        bean.setValue("200元");
        list.add(bean);

        bean = new KeyValueBean();
        bean.setKey("B");
        bean.setValue("300元");
        list.add(bean);

        bean = new KeyValueBean();
        bean.setKey("C");
        bean.setValue("400元");
        list.add(bean);

        bean = new KeyValueBean();
        bean.setKey("D");
        bean.setValue("500元");
        list.add(bean);
    }

主Activity XML布局中只放了这个自定义的控件。 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:poptab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.warmtel.expandtab.ExpandPopTabView
        android:id="@+id/expand_tab_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        poptab:tab_toggle_btn_font_color="@android:color/holo_blue_dark"/>

</RelativeLayout>

将空间实例化，一级菜单是向自定义View中添加 PopOneListView的实例。将数据附加在PopOneListView上，并设置了选中监听。 


 PopOneListView popOneListView = new PopOneListView(this);
        popOneListView.setCallBackAndData(list, mPopTabView, new PopOneListView.OnSelectListener() {
            @Override
            public void getValue(String key, String value) {
                Toast.makeText(ExpandPopTabViewActivity.this,value,Toast.LENGTH_SHORT).show();
            }
        });
        mPopTabView.addItemToExpandTab("价格",popOneListView); //添加上去

（2）、二级菜单只是在构造数据源的时候与上面的内容有所区别。需要两个集合，一个是Parent选项集合ArrayList<ArrayList<KeyValue>>,另一个是child选项集合ArrayList<KeyValue> 


/**
     * 二级菜单数据源
     */
    void setSecondMenuData(){
        parentsList = new ArrayList<>();
        KeyValueBean parentBean = new KeyValueBean();
        parentBean.setKey("1");
        parentBean.setValue("四川");
        parentsList.add(parentBean);

        parentBean = new KeyValueBean();
        parentBean.setKey("2");
        parentBean.setValue("重庆");
        parentsList.add(parentBean);

        parentBean = new KeyValueBean();
        parentBean.setKey("3");
        parentBean.setValue("云南");
        parentsList.add(parentBean);
        //==================================================

        childList = new ArrayList<>();
        ArrayList<KeyValueBean>  sclist = new ArrayList<>();
        KeyValueBean bean = new KeyValueBean();
        bean.setKey("11");
        bean.setValue("成都");
        sclist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("12");
        bean.setValue("绵阳");
        sclist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("13");
        bean.setValue("德阳");
        sclist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("14");
        bean.setValue("宜宾");
        sclist.add(bean);
        childList.add(sclist);


        ArrayList<KeyValueBean>  cqlist = new ArrayList<>();
        bean = new KeyValueBean();
        bean.setKey("21");
        bean.setValue("渝北");
        cqlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("22");
        bean.setValue("渝中");
        cqlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("23");
        bean.setValue("江北");
        cqlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("24");
        bean.setValue("沙坪坝");
        cqlist.add(bean);
        childList.add(cqlist);

        ArrayList<KeyValueBean>  shlist = new ArrayList<>();
        bean = new KeyValueBean();
        bean.setKey("31");
        bean.setValue("昆明");
        shlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("32");
        bean.setValue("丽江");
        shlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("33");
        bean.setValue("香格里拉");
        shlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("34");
        bean.setValue("凯里");
        shlist.add(bean);
        childList.add(shlist);

   //     childList.add(shlist);





    }



设置给自定义的View时实例化PopTwoListView并将数据附带。

 PopTwoListView popTwoListView = new PopTwoListView(this);
        popTwoListView.setDefaultSelectByValue("四川","成都"); //二级菜单的默认选项必须设置，不然报数组越位
        popTwoListView.setCallBackAndData(mPopTabView, parentsList, childList, new PopTwoListView.OnSelectListener() {
            @Override
            public void getValue(String showText, String parentKey, String childrenKey) {
                Toast.makeText(ExpandPopTabViewActivity.this,showText,Toast.LENGTH_SHORT).show();
            }
        });
        mPopTabView.addItemToExpandTab("区域",popTwoListView);

最后贴上完整代码：

TestActivity:

package com.example.tom.study.expandpop_tabview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import com.example.tom.study.R;
import com.warmtel.expandtab.ExpandPopTabView;
import com.warmtel.expandtab.KeyValueBean;
import com.warmtel.expandtab.PopOneListView;
import com.warmtel.expandtab.PopTwoListView;

import java.util.ArrayList;
import java.util.List;

public class ExpandPopTabViewActivity extends Activity {
    private ExpandPopTabView mPopTabView;
    ArrayList<KeyValueBean> list ;
    ArrayList<KeyValueBean> parentsList;
    ArrayList<ArrayList<KeyValueBean>> childList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_expand_pop_tab_view);
        mPopTabView = (ExpandPopTabView) findViewById(R.id.expand_tab_view);

        setData();  //一级菜单数据源。
        setSecondMenuData();//二级菜单数据源

        PopOneListView popOneListView = new PopOneListView(this);
        popOneListView.setCallBackAndData(list, mPopTabView, new PopOneListView.OnSelectListener() {
            @Override
            public void getValue(String key, String value) {
                Toast.makeText(ExpandPopTabViewActivity.this,value,Toast.LENGTH_SHORT).show();
            }
        });
        mPopTabView.addItemToExpandTab("价格",popOneListView); //添加上去


        PopTwoListView popTwoListView = new PopTwoListView(this);
        popTwoListView.setDefaultSelectByValue("四川","成都"); //二级菜单的默认选项必须设置，不然报数组越位
        popTwoListView.setCallBackAndData(mPopTabView, parentsList, childList, new PopTwoListView.OnSelectListener() {
            @Override
            public void getValue(String showText, String parentKey, String childrenKey) {
                Toast.makeText(ExpandPopTabViewActivity.this,showText,Toast.LENGTH_SHORT).show();
            }
        });
        mPopTabView.addItemToExpandTab("区域",popTwoListView);

        //当然也可以封装直接添加的方法：
        addItem(mPopTabView,list,"默认","排序");
        addItem(mPopTabView,parentsList,childList,"重庆","渝北","城市");

    }

    /**
     * 一级菜单添加数据的方法封装
     * @param expandTabView  自定义的View
     * @param lists     数据源
     * @param defaultSelect     默认选中项
     * @param defaultShowText   没人显示项
     */
    public void addItem(ExpandPopTabView expandTabView, List<KeyValueBean> lists, String defaultSelect, String defaultShowText) {
        PopOneListView popOneListView = new PopOneListView(this);
        popOneListView.setDefaultSelectByValue(defaultSelect);
        //popViewOne.setDefaultSelectByKey(defaultSelect);
        popOneListView.setCallBackAndData(lists, expandTabView, new PopOneListView.OnSelectListener() {
            @Override
            public void getValue(String key, String value) {
                //弹出框选项点击选中回调方法
            }
        });
        expandTabView.addItemToExpandTab(defaultShowText, popOneListView);
    }

    /**
     * 二级菜单
     * @param expandTabView
     * @param parentLists  主数据集
     * @param childrenListLists  子数据集
     * @param defaultParentSelect
     * @param defaultChildSelect
     * @param defaultShowText
     */
    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);
        //distanceView.setDefaultSelectByKey(defaultParent, defaultChild);
        popTwoListView.setCallBackAndData(expandTabView, parentLists, childrenListLists, new PopTwoListView.OnSelectListener() {
            @Override
            public void getValue(String showText, String parentKey, String childrenKey) {
                //弹出框选项点击选中回调方法
            }
        });
        expandTabView.addItemToExpandTab(defaultShowText, popTwoListView);
    }

    /**
     * 二级菜单数据源
     */
    void setSecondMenuData(){
        parentsList = new ArrayList<>();
        KeyValueBean parentBean = new KeyValueBean();
        parentBean.setKey("1");
        parentBean.setValue("四川");
        parentsList.add(parentBean);

        parentBean = new KeyValueBean();
        parentBean.setKey("2");
        parentBean.setValue("重庆");
        parentsList.add(parentBean);

        parentBean = new KeyValueBean();
        parentBean.setKey("3");
        parentBean.setValue("云南");
        parentsList.add(parentBean);
        //==================================================

        childList = new ArrayList<>();
        ArrayList<KeyValueBean>  sclist = new ArrayList<>();
        KeyValueBean bean = new KeyValueBean();
        bean.setKey("11");
        bean.setValue("成都");
        sclist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("12");
        bean.setValue("绵阳");
        sclist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("13");
        bean.setValue("德阳");
        sclist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("14");
        bean.setValue("宜宾");
        sclist.add(bean);
        childList.add(sclist);


        ArrayList<KeyValueBean>  cqlist = new ArrayList<>();
        bean = new KeyValueBean();
        bean.setKey("21");
        bean.setValue("渝北");
        cqlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("22");
        bean.setValue("渝中");
        cqlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("23");
        bean.setValue("江北");
        cqlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("24");
        bean.setValue("沙坪坝");
        cqlist.add(bean);
        childList.add(cqlist);

        ArrayList<KeyValueBean>  shlist = new ArrayList<>();
        bean = new KeyValueBean();
        bean.setKey("31");
        bean.setValue("昆明");
        shlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("32");
        bean.setValue("丽江");
        shlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("33");
        bean.setValue("香格里拉");
        shlist.add(bean);

        bean = new KeyValueBean();
        bean.setKey("34");
        bean.setValue("凯里");
        shlist.add(bean);
        childList.add(shlist);

   //     childList.add(shlist);





    }

    /**
     * 一级菜单数据源
     */
    void setData(){
        list = new ArrayList<>();
        KeyValueBean bean = new KeyValueBean();
        bean.setKey("A");
        bean.setValue("200元");
        list.add(bean);

        bean = new KeyValueBean();
        bean.setKey("B");
        bean.setValue("300元");
        list.add(bean);

        bean = new KeyValueBean();
        bean.setKey("C");
        bean.setValue("400元");
        list.add(bean);

        bean = new KeyValueBean();
        bean.setKey("D");
        bean.setValue("500元");
        list.add(bean);
    }
}

XML布局： 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:poptab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.warmtel.expandtab.ExpandPopTabView
        android:id="@+id/expand_tab_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        poptab:tab_toggle_btn_font_color="@android:color/holo_blue_dark"/>

</RelativeLayout>

当然ExpandPopTabView是一个自定义View，自然可以改变它的某些属性，我们可以看到源码里面定义了它的什么属性呢？

 private void init(Context context, AttributeSet attrs) {
        TypedArray a = null;
        try {
            a = context.obtainStyledAttributes(attrs, R.styleable.ExpandPopTabView);
            mToggleBtnBackground = a.getResourceId(R.styleable.ExpandPopTabView_tab_toggle_btn_bg, -1);
            mToggleBtnBackgroundColor = a.getColor(R.styleable.ExpandPopTabView_tab_toggle_btn_color, -1);
            mToggleTextColor = a.getColor(R.styleable.ExpandPopTabView_tab_toggle_btn_font_color,-1);
            mPopViewBackgroundColor = a.getColor(R.styleable.ExpandPopTabView_tab_pop_bg_color,-1);
            mToggleTextSize = a.getDimension(R.styleable.ExpandPopTabView_tab_toggle_btn_font_size, -1);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if(a != null) {
                a.recycle();
            }
        }

定义了它的背景，字体颜色，字体大小等。只需要在XML中去指定这些属性的值即可。

Taserio-xie
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
expandview可实现区域选择，可实现类似58筛选功能
威威的专栏
04-07 1527
expandview 支持自定义popview，每一个弹出的view都是一个独立的popwindow 同时也可实现是否在顶部tab上显示选择的item文字具体代码如下： public class ExpandableView extends LinearLayout implements ExpandItemView.OnExpandItemClick, View.OnClickListe
expandview
04-07
expandview 支持自定义popview，每一个弹出的view都是一个独立的popwindow 同时也可实现是否在顶部tab上显示选择的item文字,轻松实现58区域选择
ExpandableListView 安卓二级菜单
weixin_34361881的博客
09-07 118
ExpandableListView可以显示一个视图垂直滚动显示两级列表中的条目，这不同于列表视图（ListView）。ExpandableListView允许有两个层次：一级列表中有二级列表。比如在手机设置中，对于分类，有很好的效果。手机版QQ也是这样的效果。 使用ExpandableListView的整体思路 （1）给ExpandableListView设置适配器，那么必须先设置数据源...
可伸缩的文本控件ExpandTextView
11-10
文本超出指定行数，收缩状态时只显示指定的行数，展开状态时显示全部
Android 自定义可展开的ExpandTextView
07-01
详情请查看博客： https://blog.csdn.net/qq_20785431/article/details/80873463
js实现横向弹出二级菜单
06-05
本文将详细讲解如何使用JavaScript实现一个横向弹出的二级菜单，包括菜单的显示、隐藏以及响应式行为。 首先，我们需要在HTML中创建基本的菜单结构。二级菜单通常嵌套在一级菜单项下，利用`<ul>`和`<li>`元素来表示...
鼠标悬浮显示二级菜单效果的jquery实现
10-25
当鼠标悬浮时显示二级菜单，这种类似的效果，想必大家在浏览网页时经常会遇到吧，下面有个示例，大家可以看看
原生js实现二级联动菜单
10-15
本篇文章将详细介绍如何使用原生JavaScript实现二级联动菜单。 首先，我们需要了解HTML结构。在示例代码中，有两个`<select>`元素，分别代表一级菜单（chose1）和二级菜单（chose2）。一级菜单的`onchange`事件被...
vue.js实现二级菜单效果
10-16
主要为大家详细介绍了vue.js实现二级菜单效果的具体方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android实现横向二级菜单
09-02
本教程将详细介绍如何在Android平台上实现一个横向二级菜单，这种菜单通常用于提供更精细的导航选项，提升用户体验。横向二级菜单在许多应用程序中都有应用，其美观的设计能吸引用户的眼球。 实现横向二级菜单主要...
ToggleExpandLayout-一个可折叠和展开子view的开关布局控件.zip
09-24
ToggleExpandLayout是一个可折叠和展开子view的开关布局控件。它可以将它的子view以阶梯式的展开。项目地址：https://github.com/fenjuly/ToggleExpandLayout 效果图：如何使用<com.fenjuly.mylibrary.ToggleExpandLayout             android:id="@ id/toogleLayout"             android:layout_width="wrap_content"             android:layout_height="80dp"             >             <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view 1"/>             <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view 2"/>             <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view"/>                      </com.fenjuly.mylibrary.ToggleExpandLayout>注意，由于ToggleExpandLayout的本质是个FrameLayout，所以必须将其高度设置为大于所有子view展开状态的高度，不能设为wrap_content。为了解决这个问题，你可以将ToggleExpandLayout的外面在加个DropDownLayout：<com.fenjuly.mylibrary.DropDownLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         >         <com.fenjuly.mylibrary.ToggleExpandLayout             android:id="@ id/toogleLayout"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             >             <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view 1"/>              <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view 2"/>               <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view"/>                              </com.fenjuly.mylibrary.ToggleExpandLayout> </com.fenjuly.mylibrary.DropDownL
Android listview多级树形列表菜单
11-03
Android listview多级树形列表菜单，支持全选/反选功能，根据ID和组ID添加分支或叶节点
android树形菜单，树形结构，多级展示
07-24
树形菜单，用来展示有层次结构的数据，像文件管理器，一个文件夹下面有很多文件，文件夹，可能文件夹下面还有文件还有文件夹。我们需要展示这些结构，但是安卓并没有提供一个比较方便的控件来展示,所以就需要我们自定义。博客详解:http://blog.csdn.net/wangjie1310/article/details/47026937
Android 二级菜单界面
04-08
NULL 博文链接：https://ubluo.iteye.com/blog/1612278
android仿美团多级下拉列表菜单实现
10-31
android仿美团多级下拉列表菜单实现，满足大多数用户的需求。
RecycleView中实现折叠列表--之自定义ExpandView
点滴之路的博客
12-10 1986
先上效果图： 这是一个RecycleView列表，点击了解更多展开显示主营业务及商品列表，再次点击了解更多收起。 实现起来其实就是item列表中嵌套一个ExpandView默认隐藏，点击了解更多的时候显示，再点击是隐藏，实现起来其实挺简单的，在这块主要是自定义了一个ExpanView，下面直接上代码： public class ExpandView extends FrameLayou...
View系列：View项目：布局展开收起
C++ JAVA的专栏
03-26 2440
11
android表格多行收缩,Android更多条目收缩展开控件ExpandView
weixin_33458169的博客
05-25 375
在Android开发中，我们经常使用列表控件，而有时候列表控件条目中又会是多条目数据，这时候，我们无法确定每个条目的数据多少，而为了美观，我们就希望条目统一高度，多数据的条目能够进行折叠、展开。今天，就为大家介绍一个这样的自定义控件ExpandView。效果演示图演示图演示图Android Studio集成方式dependencies{compile 'com.wkp:ExpandView:1.0...
封装可展开和收缩的View
cool_fuwei的博客
08-07 652
按国际惯例，在开始前先上效果图 第二张gif图片说明，其中这个搜索布局是我借用的别人的，本人比较懒，直接拿来用了布局出处：http://www.jianshu.com/p/e0a6fc621945写在前面：当你看完2个gif，是不是忍不住说，你这搞毛啊，谷歌的ViewAnimationUtils不是已经实现了吗，为什么你还去重复的造轮子，这不是浪费表情浪费青春么，大兄弟莫激动，慢慢听我道来
element-ui 使用Dropdown实现二级菜单
最新发布
11-26
3.在Vue文件中使用Dropdown组件，并在Dropdown组件中添加DropdownMenu和DropdownItem组件，其中DropdownMenu组件用来包含二级菜单，DropdownItem组件用来添加菜单项： ```html 下拉菜单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值