仿美团、爱奇艺电影票下拉筛选框

仿美团、爱奇艺电影票下拉筛选框

转自github https://github.com/dongjunkun/DropDownMenu 权当笔记记录，感谢作者分享 作者简书地址 简书

• 效果图

• 主要代码

  ` 1、定义属性

  //顶部菜单布局
  private LinearLayout tabMenuView;
  //底部容器，包含popupMenuViews，maskView
  private FrameLayout 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;`

2、初始化

    public DropDownMenu(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    setOrientation(VERTICAL);

    //为DropDownMenu添加自定义属性
    int menuBackgroundColor = 0xffffffff;
    int underlineColor = 0xffcccccc;
    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);
    a.recycle();

    //初始化tabMenuView并添加到tabMenuView
    tabMenuView = new LinearLayout(context);
    LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    tabMenuView.setOrientation(HORIZONTAL);
    tabMenuView.setBackgroundColor(menuBackgroundColor);
    tabMenuView.setLayoutParams(params);
    addView(tabMenuView, 0);

    //为tabMenuView添加下划线
    View underLine = new View(getContext());
    underLine.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dpTpPx(1.0f)));
    underLine.setBackgroundColor(underlineColor);
    addView(underLine, 1);

    //初始化containerView并将其添加到DropDownMenu
    containerView = new FrameLayout(context);
    containerView.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
    addView(containerView, 2);

}

3、设置dropmenu

    public void setDropDownMenu(@NonNull List<String> tabTexts, @NonNull List<View> popupViews, @NonNull View contentView) {
    if (tabTexts.size() != popupViews.size()) {
        throw new IllegalArgumentException("params not match, tabTexts.size() should be equal popupViews.size()");
    }

    for (int i = 0; i < tabTexts.size(); i++) {
        addTab(tabTexts, i);
    }
    containerView.addView(contentView, 0);

    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();
        }
    });
    containerView.addView(maskView, 1);
    maskView.setVisibility(GONE);

    popupMenuViews = new FrameLayout(getContext());
    popupMenuViews.setVisibility(GONE);
    containerView.addView(popupMenuViews, 2);

    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);
    }

}

4、添加tab

private void addTab(@NonNull List<String> tabTexts, int i) {
    final TextView tab = new TextView(getContext());
    tab.setSingleLine();
    tab.setEllipsize(TextUtils.TruncateAt.END);
    tab.setGravity(Gravity.CENTER);
    tab.setTextSize(TypedValue.COMPLEX_UNIT_PX,menuTextSize);
    tab.setLayoutParams(new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f));
    tab.setTextColor(textUnselectedColor);
    tab.setCompoundDrawablesWithIntrinsicBounds(null, null, getResources().getDrawable(menuUnselectedIcon), null);
    tab.setText(tabTexts.get(i));
    tab.setPadding(dpTpPx(5), dpTpPx(12), dpTpPx(5), dpTpPx(12));
    //添加点击事件
    tab.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            switchMenu(tab);
        }
    });
    tabMenuView.addView(tab);
    //添加分割线
    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);
    }
}

5、设置Tab文字

 /**
 * 改变tab文字
 *
 * @param text
 */
public void setTabText(String text) {
    if (current_tab_position != -1) {
        ((TextView) tabMenuView.getChildAt(current_tab_position)).setText(text);
    }
}

5、关闭和选择

  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) tabMenuView.getChildAt(current_tab_position)).setTextColor(textUnselectedColor);
        ((TextView) tabMenuView.getChildAt(current_tab_position)).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) {
        if (target == tabMenuView.getChildAt(i)) {
            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));
                    popupMenuViews.getChildAt(i / 2).setVisibility(View.VISIBLE);
                } else {
                    popupMenuViews.getChildAt(i / 2).setVisibility(View.VISIBLE);
                }
                current_tab_position = i;
                ((TextView) tabMenuView.getChildAt(i)).setTextColor(textSelectedColor);
                ((TextView) tabMenuView.getChildAt(i)).setCompoundDrawablesWithIntrinsicBounds(null, null,
                        getResources().getDrawable(menuSelectedIcon), null);
            }
        } else {
            ((TextView) tabMenuView.getChildAt(i)).setTextColor(textUnselectedColor);
            ((TextView) tabMenuView.getChildAt(i)).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);
}

定义style属性

   <declare-styleable name="DropDownMenu">

    <attr name="ddunderlineColor" format="color"/>
    <attr name="dddividerColor" format="color"/>
    <attr name="ddtextSelectedColor" format="color"/>
    <attr name="ddtextUnselectedColor" format="color"/>
    <attr name="ddmenuBackgroundColor" format="color"/>
    <attr name="ddmaskColor" format="color"/>
    <attr name="ddmenuTextSize" format="dimension"/>
    <attr name="ddmenuSelectedIcon" format="reference"/>
    <attr name="ddmenuUnselectedIcon" format="reference"/>
</declare-styleable>