二级菜单ExpandPopView的使用和实现

开发中需要展示很详细的内容时,往往会用到二级菜单,诸如美团,大众点评选择地点位置的菜单一样。这里分享一个第三方包: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中去指定这些属性的值即可。

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
YCExpandView01.该库介绍02.效果展示03.如何使用04.注意要点05.优化问题06.部分代码逻辑01.该库介绍自定义折叠和展开布局,在不用改变原控件的基础上,就可以实现折叠展开功能,入侵性极低。主要的思路是,设置一个折叠时的布局高度,设置一个内容展开时的高度,然后利用属性动画去动态改变布局的高度。可以设置折叠和展开的监听事件,方便开发者拓展其他需求。可以设置动画的时间。可以支持支持常见的文本折叠,流失布局标签折叠,或者RecyclerView折叠等功能。十分方便,思路也比较容易理解,代码不超过300行……02.效果展示03.如何使用设置文本控件      如何切换展开和折叠//初始化操作 expand.initExpand(false ,mHeight); //设置动画时间 expand.setAnimationDuration(300); //折叠或者展开操作后的监听 expand.setOnToggleExpandListener(new ExpandLayout.OnToggleExpandListener() {     @Override     public void onToggleExpand(boolean isExpand) {         if (isExpand){             ivExpand.setBackgroundResource(R.mipmap.icon_btn_collapse);         }else {             ivExpand.setBackgroundResource(R.mipmap.icon_btn_expand);         }     } }); //折叠view expand.collapse(); //展开view expand.expand(); //查看控件是折叠还是展开状态 expand.isExpand(); //这个是置反操作 expand.toggleExpand();04.注意要点05.优化问题1.在从折叠状态到伸展状态,或者反之。只要是在动画过程中,则执行动画的过程中屏蔽事件传递2.当控件销毁后,在onDetachedFromWindow方法中,手动销毁动画3.针对折叠和伸展状态之间切换,如果动画在执行中,即使调用多次toggleExpand()方法,避免频繁调用collapse或者expand4.如果开发者使用该折叠控件时,设置折叠时的高度为0,则会抛出异常
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值