DropDownMenu下拉菜单

最近项目要用到一个下拉菜单的功能，网上找了个例子http://www.jcodecraeer.com/a/opensource/2016/0110/3855.html，发现用起来不太方便，这个例子的内容区是外部addview进去的，不好控制实时刷新页面的情况，对控件操作也比较麻烦。然后自己就把别人的例子拿过来修改了一下，就可以在xml里面直接编写UI使用了，使用起来就方便了很多。

请尊重作者劳动成果，转载请标明原文地址：

http://blog.csdn.net/u010053224/article/details/51179251

1，使用预览

<pre name="code" class="html"><com.hyg.dropdownmenu.DropDownMenu    android:id="@+id/dropDownMenu"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    app:dddividerColor="@color/gray"    app:ddmaskColor="@color/mask_color"    app:ddmenuBackgroundColor="@color/white"    app:ddmenuSelectedIcon="@mipmap/drop_down_selected_icon"    app:ddmenuIconToRight="true"    app:ddmenuTextSize="13sp"    app:ddmenuUnselectedIcon="@mipmap/drop_down_unselected_icon"    app:ddtextSelectedColor="@color/drop_down_selected"    app:ddtextUnselectedColor="@color/drop_down_unselected"    app:ddunderlineColor="@color/gray"    >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/dropDownMenu_underLine"        android:clickable="true"        android:gravity="center"        android:text="demo"        android:textSize="40sp"/></com.hyg.dropdownmenu.DropDownMenu>

只需xml只需简单添加如上代码，必须在

com.hyg.dropdownmenu.DropDownMenu的最外层添加android:layout_below="@id/dropDownMenu_underLine"添加这一行代码，否则内容区会有一部分被顶部菜单覆盖了，这个id名字是在ids里面写死的。 

效果如下图，图片也是从那个例子拿过来的，感谢原作者dongjunkun。

2，代码分析

能在xml里面添加内容的主要原因是id必须预先写好，使在布局时在xml里面能调用java代码编写的控件，因此在资源文件夹新建一个ids的文件夹写死几个id名字。

<?xml version="1.0" encoding="utf-8"?><resources>    <item name="dropDownMenu_tabMenuView" type="id"></item>    <item name="dropDownMenu_underLine" type="id"></item></resources>

菜单列表是从上往下弹出来的，为了能显示从菜单底部弹出列表，菜单就必须在顶层，这里说的菜单是上面图片最上一行的菜单，采用removeView和addView的方法使菜单置于顶层会有些问题，因为remove后，前面与其为参照物的控件的位置就失效了，所以我在底部放置一个view，只要view的高度和菜单栏的高度一样就行了。如果是在dropdownmenu的java文件里面对xml的控件的位置采用 addRule重新设置的，不能显示实时更新，必须要调用 requestLayout方法才可以。

//初始化tabMenuView并添加到tabMenuView的参照物tabMenuViewButtom = new LinearLayout(context);tabMenuViewButtom.setId(R.id.dropDownMenu_tabMenuView);LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);addView(tabMenuViewButtom,0);

这写代码就是那个底部的view。,

3，直接上最关键的代码。

package com.hyg.dropdownmenu;import android.content.Context;import android.content.res.TypedArray;import android.support.annotation.NonNull;import android.text.TextUtils;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.Gravity;import android.view.View;import android.view.ViewGroup;import android.view.animation.AnimationUtils;import android.widget.FrameLayout;import android.widget.LinearLayout;import android.widget.RelativeLayout;import android.widget.TextView;import java.util.List;/** * 使用时，在这个布局最外层的view添加android:layout_below="@id/dropDownMenu_underLine"这一行代码。 * Created by HuangYuGuang on 2016/4/14. */public class DropDownMenu extends RelativeLayout {    //底层参照物控件，作为其他控件布局时候的相对参照    private LinearLayout tabMenuViewButtom;    //顶部菜单布局    private LinearLayout tabMenuView;    //底部容器，包含popupMenuViews，maskView    private View containerView;    //弹出菜单父布局    private FrameLayout popupMenuViews;    //遮罩半透明View，点击可关闭DropDownMenu    private View maskView;    //tabMenuView里面选中的tab位置，-1表示未选中    private int current_tab_position = -1;    //分割线颜色    private int dividerColor = 0xffcccccc;    //tab选中颜色    private int textSelectedColor = 0xff890c85;    //tab未选中颜色    private int textUnselectedColor = 0xff111111;    //遮罩颜色    private int maskColor = 0x88888888;    //tab字体大小    private int menuTextSize = 14;    //tab选中图标    private int menuSelectedIcon;    //tab未选中图标    private int menuUnselectedIcon;    //菜单背景色    private int menuBackgroundColor = 0xffffffff;    //菜单下面的分割线颜色    private int underlineColor = 0xffcccccc;    //菜单的箭头是否靠右边    private boolean menuIconToRight = false;    public DropDownMenu(Context context) {        super(context, null);    }    public DropDownMenu(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public DropDownMenu(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        //为DropDownMenu添加自定义属性        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DropDownMenu);        underlineColor = a.getColor(R.styleable.DropDownMenu_ddunderlineColor, underlineColor);        dividerColor = a.getColor(R.styleable.DropDownMenu_dddividerColor, dividerColor);        textSelectedColor = a.getColor(R.styleable.DropDownMenu_ddtextSelectedColor, textSelectedColor);        textUnselectedColor = a.getColor(R.styleable.DropDownMenu_ddtextUnselectedColor, textUnselectedColor);        menuBackgroundColor = a.getColor(R.styleable.DropDownMenu_ddmenuBackgroundColor, menuBackgroundColor);        maskColor = a.getColor(R.styleable.DropDownMenu_ddmaskColor, maskColor);        menuTextSize = a.getDimensionPixelSize(R.styleable.DropDownMenu_ddmenuTextSize, menuTextSize);        menuSelectedIcon = a.getResourceId(R.styleable.DropDownMenu_ddmenuSelectedIcon, menuSelectedIcon);        menuUnselectedIcon = a.getResourceId(R.styleable.DropDownMenu_ddmenuUnselectedIcon, menuUnselectedIcon);        menuIconToRight = a.getBoolean(R.styleable.DropDownMenu_ddmenuIconToRight, menuIconToRight);        a.recycle();        //初始化tabMenuView并添加到tabMenuView的参照物        tabMenuViewButtom = new LinearLayout(context);        tabMenuViewButtom.setId(R.id.dropDownMenu_tabMenuView);        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);        addView(tabMenuViewButtom,0);        //为tabMenuView添加下划线        View underLine = new View(getContext());        underLine.setId(R.id.dropDownMenu_underLine);        LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1);        lp.addRule(RelativeLayout.BELOW, R.id.dropDownMenu_tabMenuView);        underLine.setLayoutParams(lp);        underLine.setBackgroundColor(underlineColor);        addView(underLine, 1);    }    /**     * 初始化DropDownMenu     *     * @param tabTexts     * @param popupViews     */    public void setDropDownMenu(@NonNull List<String> tabTexts, @NonNull List<View> popupViews) {        if (tabTexts.size() != popupViews.size()) {            throw new IllegalArgumentException("params not match, tabTexts.size() should be equal popupViews.size()");        }        LayoutParams plp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);        plp.addRule(RelativeLayout.BELOW, R.id.dropDownMenu_underLine);        maskView = new View(getContext());        maskView.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));        maskView.setBackgroundColor(maskColor);        maskView.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                closeMenu();            }        });        maskView.setVisibility(GONE);        maskView.setLayoutParams(plp);        addView(maskView);        popupMenuViews = new FrameLayout(getContext());        popupMenuViews.setVisibility(GONE);        popupMenuViews.setLayoutParams(plp);        addView(popupMenuViews);        for (int i = 0; i < popupViews.size(); i++) {            popupViews.get(i).setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));            popupMenuViews.addView(popupViews.get(i), i);        }        //初始化tabMenuView并添加到tabMenuView，为了能tabMenuView使位于顶层，所以最后添加tabMenuView        tabMenuView = new LinearLayout(getContext());        tabMenuView.setId(R.id.dropDownMenu_tabMenuView);        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);        tabMenuView.setOrientation(LinearLayout.HORIZONTAL);        tabMenuView.setBackgroundColor(menuBackgroundColor);        tabMenuView.setLayoutParams(params);        addView(tabMenuView);        for (int i = 0; i < tabTexts.size(); i++) {            addTab(tabTexts, i);        }        //为了使tabMenuViewButtom和tabMenuView的高度一样        LayoutParams tparams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,tabMenuView.getHeight());        tabMenuViewButtom.setLayoutParams(tparams);    }    private void addTab(@NonNull List<String> tabTexts, int i) {        final TextView tab = new TextView(getContext());        LinearLayout menuItenmView = new LinearLayout(getContext());        menuItenmView.setLayoutParams(new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f));        menuItenmView.setGravity(Gravity.CENTER);        menuItenmView.setOrientation(LinearLayout.HORIZONTAL);        tab.setSingleLine();        tab.setEllipsize(TextUtils.TruncateAt.END);        tab.setGravity(Gravity.CENTER);        tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, menuTextSize);        if(menuIconToRight)            tab.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));        else            tab.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));        tab.setTextColor(textUnselectedColor);        tab.setCompoundDrawablesWithIntrinsicBounds(null, null, getResources().getDrawable(menuUnselectedIcon), null);        tab.setText(tabTexts.get(i) + "  ");        tab.setPadding(dpTpPx(5), dpTpPx(8), dpTpPx(5), dpTpPx(8));        menuItenmView.addView(tab, 0);        //添加点击事件        menuItenmView.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                switchMenu(tab);            }        });        tabMenuView.addView(menuItenmView);        //添加分割线        if (i < tabTexts.size() - 1) {            View view = new View(getContext());            view.setLayoutParams(new LayoutParams(dpTpPx(0.5f), ViewGroup.LayoutParams.MATCH_PARENT));            view.setBackgroundColor(dividerColor);            tabMenuView.addView(view);        }    }    /**     * 改变tab文字     *     * @param text     */    public void setTabText(String text) {        if (current_tab_position != -1) {            ((TextView) ((ViewGroup)tabMenuView.getChildAt(current_tab_position)).getChildAt(0)).setText(text+"  ");        }    }    public void setTabClickable(boolean clickable) {        for (int i = 0; i < tabMenuView.getChildCount(); i = i + 2) {            tabMenuView.getChildAt(i).setClickable(clickable);        }    }    /**     * 关闭菜单     */    public void closeMenu() {        if (current_tab_position != -1) {            TextView tab = (TextView) ((ViewGroup)tabMenuView.getChildAt(current_tab_position)).getChildAt(0);            tab.setTextColor(textUnselectedColor);            tab.setCompoundDrawablesWithIntrinsicBounds(null, null,                    getResources().getDrawable(menuUnselectedIcon), null);            popupMenuViews.setVisibility(View.GONE);            popupMenuViews.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.dd_menu_out));            maskView.setVisibility(GONE);            maskView.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.dd_mask_out));            current_tab_position = -1;        }    }    /**     * DropDownMenu是否处于可见状态     *     * @return     */    public boolean isShowing() {        return current_tab_position != -1;    }    /**     * 切换菜单     *     * @param target     */    private void switchMenu(View target) {        System.out.println(current_tab_position);        for (int i = 0; i < tabMenuView.getChildCount(); i = i + 2) {            TextView tab = (TextView) ((ViewGroup)tabMenuView.getChildAt(i)).getChildAt(0);            if (target == tab) {                if (current_tab_position == i) {                    closeMenu();                } else {                    if (current_tab_position == -1) {                        popupMenuViews.setVisibility(View.VISIBLE);                        popupMenuViews.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.dd_menu_in));                        maskView.setVisibility(VISIBLE);                        maskView.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.dd_mask_in));                        View view = popupMenuViews.getChildAt(i / 2);                        popupMenuViews.getChildAt(i / 2).setVisibility(View.VISIBLE);                    } else {                        popupMenuViews.getChildAt(i / 2).setVisibility(View.VISIBLE);                    }                    current_tab_position = i;                    tab.setTextColor(textSelectedColor);                    tab.setCompoundDrawablesWithIntrinsicBounds(null, null,                            getResources().getDrawable(menuSelectedIcon), null);                }            } else {                tab.setTextColor(textUnselectedColor);                tab.setCompoundDrawablesWithIntrinsicBounds(null, null,                        getResources().getDrawable(menuUnselectedIcon), null);                popupMenuViews.getChildAt(i / 2).setVisibility(View.GONE);            }        }    }    public int dpTpPx(float value) {        DisplayMetrics dm = getResources().getDisplayMetrics();        return (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, dm) + 0.5);    }}

4，改进

模块经过项目的反复使用过程，又改进了一些，时使用起来更方便快捷了。XML里不用变，java文件了只需添加下面这段代码即可完成菜单的添加。

<pre name="code" class="java">mDropDownMenu1 = (DropDownMenu) findViewById(R.id.dropDownMenu1);DropDownMenuUtils.addTextList(this, mDropDownMenu1, new DropDownMenuUtils.OnMenuClickListener() {            @Override            public void onMenuClick(int viewPosition, int itemPosition) {                textView.setText(viewPosition+"---"+itemPosition);            }        }, Arrays.asList("全部", "衣服","鞋子"),Arrays.asList("默认排序","升序","降序"),Arrays.asList("好评","差评"));

如有还能改进的请大神在评论里面说一下。

              点击下载源码

      改进版源码