說到蚯蚓滑動效果的指示器，市面上很常見

也許是普通的控制元件習以為常了，刷微博的時候看到微博首頁的設計覺得很有意思

於是在公司的蚯蚓滑動指示器的基礎上進行了加工，寫了這麼一個指示器，效果如下所示

程式碼不多，正當我竊喜的時候我突然發現遇到個坑，點選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啊

評論區歡迎留言，幫大家解惑~