自定义View-28 多条目菜单筛选控件

作者: zsj1225 | 来源:发表于2018-07-15 18:24 被阅读217次

自定义View-28 多条目菜单筛选控件
iOS 筛选菜单
筛选菜单控件
会弹跳的菜单（高级UI）
下拉列表控件---iOS---一级下拉列表控件
使用Databinding轻松快速打造仿携程app筛选控件(三)
WKWebView, UIWebView H5标签input t
Android自定义PopupWindow实现流式布局筛选控件（
Swift中一个简单好用的下拉菜单
QT2

1. 要仿照的效果

Gif_20180715_150056.gif

2.效果分析

2.1 是一个组合布局 ,分成上下两部分,上面部分为Tab,下面部分为菜单内容和阴影,所以继承LinearLayout
2.2 默认菜单内容是看不到的,也就是说向上位移菜单内容的高度
2.3 点击Tab 打开菜单(菜单内容向下位移菜单内容高度同时阴影的透明度从完全透明到完全不透明),同时Tab字体变色
2.4 已经打开的菜单内容,再次点击同一个Tab关闭菜单内容和Tab颜色值变成默认颜色.菜单内容向上位移菜单内容高度,阴影的透明度从不透明变成透明
2.5 打开菜单内容情况下,点击阴影关闭菜单.
2.6 打开菜单内容打开的情况下,点击另一个Tab,菜单内容切换成另外一个菜单内容.

3.代码实现

package com.zsj.listdatascreenview;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Color;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

/**
 * @author 朱胜军
 * @date 2018/7/15
 * 描述         菜单筛选
 * <p>
 * 更新者     $Author$
 * 更新时间   $Date$
 * 更新描述   TODO
 */
//是一个组合布局，extends LinearLayout 两层结构，上的Tab，下面菜单内容和阴影
public class ListDataScreenView extends LinearLayout implements View.OnClickListener {

    private static final String TAG = "ZsjTAG";
    /**
     * 阴影的颜色
     */
    private int mShadowColor = Color.parseColor("#88888888");
    private BaseMenuAdapter mAdapter;
    private LinearLayout mTabContainer;
    private FrameLayout mMenuContentContainer;
    private int mMenuContentHeight;
    /**
     * 当前的点击位置
     */
    private int mCurrentPosition = -1;
    private long ANIMATOR_DURATION = 350;
    private View mShadowView;
    /**
     * 动画在执行
     */
    private boolean mIsAnimatorRun = false;
    private FrameLayout mMenuContainer;

    public ListDataScreenView(Context context) {
        this(context, null);
    }

    public ListDataScreenView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ListDataScreenView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initLayout();
    }

    private void initLayout() {
        //设置垂直布局
        setOrientation(VERTICAL);

        //组合布局可以分成两种写法
        //1  inflate 一个 Lyaout布局
//        LayoutInflater.from(getContext()).inflate()
        //2  代码实现
        //上面的TabLayout 是一个线性布局，然后均分。
        mTabContainer = new LinearLayout(getContext());
        //给TabContainer设置大小
        mTabContainer.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT));

        //添加到自己中
        addView(mTabContainer);

        //下面剩下的内容是阴影和菜单内容
        //用FrameLayout作为容器
        mMenuContainer = new FrameLayout(getContext());
        mMenuContainer.setVisibility(GONE);
        //先添加一个阴影，用View设置背景即可
        mShadowView = new View(getContext());
        mShadowView.setBackgroundColor(mShadowColor);
        mShadowView.setAlpha(0f);
//         添加到menuContainer中
        mMenuContainer.addView(mShadowView);
        mShadowView.setOnClickListener(this);
        //添加菜单内容
        mMenuContentContainer = new FrameLayout(getContext());
        mMenuContentContainer.setBackgroundColor(Color.WHITE);
        mMenuContainer.addView(mMenuContentContainer);

        LinearLayout.LayoutParams menuContainerParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0);
        menuContainerParams.weight = 1;
        mMenuContainer.setLayoutParams(menuContainerParams);

        //把才菜单阴影容器添加到自己身上。
        addView(mMenuContainer);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Log.e(TAG, "onMeasure ");
        ////菜单的高度应该的屏幕宽度的75％
        int height = MeasureSpec.getSize(heightMeasureSpec);
        if ((mMenuContentHeight == 0) && height > 0) {
            mMenuContentHeight = (int) (height * 0.75);
            ViewGroup.LayoutParams params = mMenuContentContainer.getLayoutParams();
            params.height = mMenuContentHeight;
            mMenuContentContainer.setLayoutParams(params);

            //菜单内容默认收起来,向上位移 - mMenuContentHeight
            mMenuContentContainer.setTranslationY(-mMenuContentHeight);
        }
    }

    public void setAdapter(BaseMenuAdapter adapter) {
        mAdapter = adapter;

        int count = mAdapter.getCount();
        for (int i = 0; i < count; i++) {
            View tabView = mAdapter.getTabView(i, mTabContainer);
            setTabClickListener(i, tabView);
            mTabContainer.addView(tabView);
//            TabLayout布局均分
            LinearLayout.LayoutParams params = (LayoutParams) tabView.getLayoutParams();
            params.weight = 1;
            tabView.setLayoutParams(params);

            View menuContentView = mAdapter.getMenuContentView(i, mMenuContentContainer);
            //菜单内容叠在一起了
            //一开始全部菜单内容全部隐藏
            menuContentView.setVisibility(GONE);
            mMenuContentContainer.addView(menuContentView);
        }
        //遇到的问题
        //TabLayout布局均分
        //菜单内容叠在一起了
        //菜单的高度应该的屏幕宽度的75％
        //菜单内容默认收起来
        //点击Tab打开菜单或者关闭菜单
        //点击阴影关闭菜单
        //菜单打开,Tab的颜色值变化,丢给Adapter处理
        //打开或者关闭菜单的动画还在执行就不处理东湖
        //菜单已打开,点击其他的TAB,切换而也不是关闭菜单
    }

    private void setTabClickListener(final int position, final View tabView) {
        tabView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mCurrentPosition == -1) {
                    //没有打开菜单,去打开菜单
                    openMenu(position, tabView);
                } else {
                    //打开过菜单,去关闭菜单
                    if (position != mCurrentPosition) {
                        //菜单已打开,点击其他的TAB,切换而也不是关闭菜单
                        //切换菜单内容
                        //隐藏上一个菜单内容
                        View preMenuContent = mMenuContentContainer.getChildAt(mCurrentPosition);
                        preMenuContent.setVisibility(GONE);
                        //把上一个Tab设置为默认颜色
                        View tabView = mTabContainer.getChildAt(mCurrentPosition);
                        mAdapter.closeMenu(tabView);

                        mCurrentPosition = position;
                        View currentMenuContent = mMenuContentContainer.getChildAt(mCurrentPosition);
                        currentMenuContent.setVisibility(VISIBLE);
                        //把当期Tab设置点击颜色
                        View tabView2 = mTabContainer.getChildAt(mCurrentPosition);
                        mAdapter.openMenu(tabView2);

                    } else {
                        closeMenu();
                    }
                }
            }
        });
    }

    private void closeMenu() {
        mMenuContainer.setVisibility(GONE);
        if (mIsAnimatorRun) {
            return;
        }
        // 给菜单内容启动移动动画,同时给阴影启动一个透明度动画
        //位移动画
        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mMenuContentContainer,
                "translationY", 0, -mMenuContentHeight);

        //透明度动画
        ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(mShadowView, "alpha", 1f, 0f);

        animatorSet.playTogether(translationAnimator, alphaAnimator);
        animatorSet.setDuration(ANIMATOR_DURATION);
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                mIsAnimatorRun = true;
                View tabView = mTabContainer.getChildAt(mCurrentPosition);
                mAdapter.closeMenu(tabView);
            }


            @Override
            public void onAnimationEnd(Animator animation) {
                mIsAnimatorRun = false;
                //关闭菜单,隐藏菜单内容
                View menuContentView = mMenuContentContainer.getChildAt(mCurrentPosition);
                menuContentView.setVisibility(GONE);
                mCurrentPosition = -1;
            }
        });
        animatorSet.start();

    }

    /**
     * 打开菜单
     *
     * @param position
     * @param tabView
     */
    private void openMenu(final int position, final View tabView) {
        mMenuContainer.setVisibility(VISIBLE);
        if (mIsAnimatorRun) {
            return;
        }
        // 给菜单内容启动移动动画,同时给阴影启动一个透明度动画
        //位移动画
        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mMenuContentContainer,
                "translationY", -mMenuContentHeight, 0);

        //透明度动画
        ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(mShadowView, "alpha", 0f, 1f);

        animatorSet.playTogether(translationAnimator, alphaAnimator);
        animatorSet.setDuration(ANIMATOR_DURATION);
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                mIsAnimatorRun = true;
                mAdapter.openMenu(tabView);
                mCurrentPosition = position;
                //打开菜单显示菜单内容
                View menuContentView = mMenuContentContainer.getChildAt(position);
                menuContentView.setVisibility(VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                mIsAnimatorRun = false;
            }
        });
        animatorSet.start();
    }

    @Override
    public void onClick(View v) {
        closeMenu();
    }
}

模仿效果

Gif_20180715_183059.gif

完整代码

listdatascreenview

自定义View-28 多条目菜单筛选控件
1. 要仿照的效果 2.效果分析 2.1 是一个组合布局 ,分成上下两部分,上面部分为Tab,下面部分为菜单内容和...
iOS 筛选菜单
自由定制电商筛选菜单超级简单好用的电商筛选菜单自定义筛选标题,自定义筛选内容,自定义筛选标签,自定义筛选头部内...
筛选菜单控件
https://github.com/dopcn/DOPDropDownMenu https://github.c...
会弹跳的菜单（高级UI）
BouncingMenu一款弹跳菜单控件弹跳菜单控件是一款专门脱离于Activity的一个自定义控件。特点概述...
下拉列表控件---iOS---一级下拉列表控件
简单好用的, 可自定义选中和非选中状态样式的下拉列表菜单选择筛选条件的控件喜欢的朋友们可以 star 一下,...
使用Databinding轻松快速打造仿携程app筛选控件(三)
前面两章实现了筛选控件的内容，今天要来实现筛选控件的容器，首先看效果：需求分析点击上面的按钮可以展开隐藏菜单，...
WKWebView, UIWebView H5标签input t
今天介绍一下 html input type=file 控件如何实现自定义菜单。安卓那边对这个控件的菜单貌似可...
Android自定义PopupWindow实现流式布局筛选控件（
前言：因公司项目重构需要，添加了二级菜单筛选及类似商品分类筛选的功能。上一篇文章介绍了带二级菜单的筛选控件，今天介...
Swift中一个简单好用的下拉菜单
SwiftDropMenuView 一个自定义下拉菜单的实现，可用于一些筛选菜单。GitHub: https://...
QT2
1、带菜单栏的窗口2、资源文件3、对话框4、界面布局5、常用控件6、自定义控件 1QMainWindow1.1菜单...