仿新浪微博首页具有泥鳅蚯蚓滑动效果的可自定义View的Android ViewPager指示器

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LosingCarryJie/article/details/81322693

说到蚯蚓滑动效果的指示器，市面上很常见

也许是普通的控件习以为常了，刷微博的时候看到微博首页的设计觉得很有意思

于是在公司的蚯蚓滑动指示器的基础上进行了加工，写了这么一个指示器，效果如下所示

代码不多，正当我窃喜的时候我突然发现遇到个坑，点击popupwindow之外的区域关闭了弹框但是再点击“直播”逻辑就有问题了，一时半会找不到解决方案就去看淘宝和京东是怎么个实现逻辑

咦？淘宝也写了bug!再去看京东

错误更加明显！

事情到了这里是不是就可以告诉产品——淘宝和京东都没实现你让我实现？
他们解决不了的bug为啥我就不能解决呢？

package com.tab.views;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.TextView;

import com.inidicator.TabIndicator;
import com.inidicator.callback.OnGetIndicatorViewAdapter;
import com.inidicator.impl.IPagerIndicator;
import com.inidicator.impl.IPagerTitleView;
import com.tab.R;


/**
 * 理财师个人主页用于填充每个tabview
 */
public abstract class LcsCustomOnGetIndicatorViewAdapter extends OnGetIndicatorViewAdapter {
    //view
    private LinearLayout ll;
    private PopupWindow window;
    private Context context;

    //data
    public static int ARROW_UP = 0; //箭头朝上
    public static int ARROW_DOWN = 1;
    private int currentIndex;
    private boolean clickItem=false;
    private boolean hasDismiss=false;
    private TabIndicator tabIndicator;
    private int outFirstTime = 0;
    private int outSecondTime = 0;
    //方法
    public  abstract TabIndicator getTabIndicator();
    public  abstract void childTabSelected(int index,String type);

    @Override
    public void getSelectedIndex(int index) {
        currentIndex = index;
    }

    @Override
    public IPagerTitleView getTitleView(Context context, final int index) {

        if(getTabIndicator()==null||context==null) return null;

        this.context = context;
        tabIndicator = getTabIndicator();
        final LcsPageTabView simplePagerTitleView = new LcsPageTabView(context);
        simplePagerTitleView.setText(tabIndicator.getPagerAdapter().getPageTitle(index).toString());
        simplePagerTitleView.setShowArrow(index == 0);
        simplePagerTitleView.setTextSize((float) tabIndicator.getmTextSize());
        simplePagerTitleView.setmNormalColor(tabIndicator.getmTextColor());
        simplePagerTitleView.setmSelectedColor(tabIndicator.getmSelectTextColor());
        simplePagerTitleView.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                outSecondTime = (int) System.currentTimeMillis();

                if(currentIndex!=index){//旧的item转到新的item

                    restoreTabState();
                    tabIndicator.getViewPager().setCurrentItem(index);
                    currentIndex = index;
                    if(simplePagerTitleView.isShowArrow()){
                        simplePagerTitleView.setArrowDirection(ARROW_DOWN);
                    }

                }else {//重复点击此item

                    if(!simplePagerTitleView.isShowArrow()) return;//如果此item不包括箭头就不用判断后面的操作了

                    if(hasDismiss&&outSecondTime-outFirstTime<=300&&outSecondTime-outFirstTime!=0){
                        restoreTabState();
                    }else {
                        if(window!=null&&window.isShowing()) {
                            dismissPopWindow();
                        }else {
                            showPopwindow(simplePagerTitleView,index);
                        }
                    }


                }
            }


        });
        return simplePagerTitleView;
    }

    /**
     * 判断的参数全部还原
     */
    private void restoreTabState() {
        hasDismiss = false;
        outFirstTime = 0;
        outSecondTime = 0;
    }

    @Override
    public IPagerIndicator getIndicator(Context context) {
        return super.getIndicator(context);
    }


    public void showPopwindow(final LcsPageTabView tabView, int index) {

        if(context==null) return;

        tabView.setArrowDirection(ARROW_UP);
        View contentView = LayoutInflater.from(context).inflate(R.layout.pop_item, null, false);
        initView(contentView,tabView,index);

        window = new PopupWindow(contentView, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT, false);//并不获取焦点，防止拦截其他点击事件
        window.setOutsideTouchable(true);
        window.setBackgroundDrawable(new ColorDrawable(Color.WHITE));
        window.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                outFirstTime = (int) System.currentTimeMillis();

                if(clickItem){
                    clickItem = false;
                    hasDismiss = false;
                }else {
                    hasDismiss = true;
                }
                if(tabView.isShowArrow()){
                    tabView.setArrowDirection(ARROW_DOWN);
                }
            }
        });
        window.showAsDropDown(tabView, 0, 2);
    }

    public void dismissPopWindow() {
        if(window!=null&& window.isShowing()){
            window.dismiss();
        }
    }

    private void initView(View contentView, final LcsPageTabView titleView, int index) {
        if(contentView==null||titleView==null) return;

        ll = contentView.findViewById(R.id.ll);

        dynamicCreateView(index, "关羽");
        dynamicCreateView(index, "张飞");

    }


    /**
     * 根据tab的个数 动态生成相应个数的view
     * @param index
     * @param text
     */
    private void dynamicCreateView(final int index, final String text) {
        LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        TextView tv = new TextView(context);
        tv.setText(text);
        param.setMargins(20, 20, 0, 0);
        ll.addView(tv, param);
        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                clickItem = true;
                if (window != null && window.isShowing()) {
                    window.dismiss();
                }
                childTabSelected(index, text);
            }
        });
    }

}

package com.tab.views;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.inidicator.impl.IMeasureablePagerTitleView;
import com.tab.R;


/**
 * 理财师个人主页自定义TabView
 *
 * 自定义一组合布局，包括一个TextView和ImageView
 */
public class LcsPageTabView extends ViewGroup implements IMeasureablePagerTitleView {
    private ImageView mImageView;
    private TextView mTextView;
    private Context context;

    protected int mSelectedColor;
    protected int mNormalColor;

    public boolean isShowArrow() {
        return showArrow;
    }

    private boolean showArrow;//显示箭头吗?
    public LcsPageTabView(Context context) {
        this(context,null);
    }

    public LcsPageTabView(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }

    public LcsPageTabView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        View view= LayoutInflater.from(context).inflate(R.layout.tab_item, this);
        initView(view);
    }

    private void initView(View view) {
        mTextView = view.findViewById(R.id.tv_title);
        mImageView = view.findViewById(R.id.img_arrow);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }



    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        View view = getChildAt(0);
        view.layout(0,0,view.getMeasuredWidth(),view.getMeasuredHeight());
    }

    @Override
    public int getContentLeft() {
        return 0;
    }

    @Override
    public int getContentTop() {
        return 0;
    }

    @Override
    public int getContentRight() {
        return 0;
    }

    @Override
    public int getContentBottom() {
        return 0;
    }

    @Override
    public void onSelected(int i, int i1) {
        if(mImageView==null || mTextView==null) return;

        mTextView.setTextColor(mSelectedColor);

        if(showArrow){
            mImageView.setVisibility(VISIBLE);
        }else {
            mImageView.setVisibility(GONE);
        }
    }

    @Override
    public void onDeselect(int i, int i1) {
        if(mTextView!=null){
            mTextView.setTextColor(mNormalColor);
        }
        if(mImageView!=null){
            mImageView.setVisibility(GONE);
        }
    }

    @Override
    public void inLeave(int i, int i1, float v, boolean b) {
    }

    @Override
    public void onEnter(int i, int i1, float v, boolean b) {
    }

    @Override
    public void setText(String s) {
        if(mTextView!=null){
            mTextView.setText(s);
        }
    }

    public void  setArrowDirection(int direction){
        if(mImageView==null||context==null) return;

        if(direction==0){
            //todo  设置方向朝上
            mImageView.setImageDrawable(context.getResources().getDrawable(R.mipmap.arrow_up));
        }else {
            //todo  设置方向朝下
            mImageView.setImageDrawable(context.getResources().getDrawable(R.mipmap.arrow_down));
        }

    }

    public void  setTextSize(float f){
        if(mTextView!=null){
            mTextView.setTextSize(f);
        }
    }
    public void setmSelectedColor(int mSelectedColor) {
        this.mSelectedColor = mSelectedColor;
    }

    public void setmNormalColor(int mNormalColor) {
        this.mNormalColor = mNormalColor;
    }

    public void setShowArrow(boolean showArrow) {
        this.showArrow = showArrow;
    }
}

具体代码请移步我的Github仿新浪微博首页具有泥鳅蚯蚓滑动效果的可自定义View的Android ViewPager指示器,如果觉得不错，欢迎star啊

评论区欢迎留言，帮大家解惑~