自定义ViewPagerIndicator-视图指示器

Posted 2020-08-29

ViewPagerIndicator.java

public class ViewPagerIndicator extends LinearLayout {

    private Paint mPaint;
    private Path mPath;
    private int mTriangleWidth;
    private int mTriangleHeight;
    private static final float RADIO_TRIANGLE_WIDTH = 1/6F;
    //三角形的底边最大宽度
    private final float DIMENTION_TRIANGLE_WIDTH_MAX = getScreenWidth() / 3 * RADIO_TRIANGLE_WIDTH;
    private int mInitTranslationX;
    private int mTranslationX;
    private int mVisibleTabCount;
    private static final int COUNT_DEFAULT_TAB = 4;
    private static final int COLOR_TEXT_NORMAL = 0x77FFFFFF;
    private static final int COLOR_TEXT_HIGHLIGHT = 0xFFFFFFFF;
    private ViewPager mViewPager;
    private HorizontalScrollView mScrollView;
    private boolean isClicked = false; //判断是否是由点击产生的滑动
    private int scrollLocation; //Tab滚动的位置

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

    public ViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取可见的tab数量
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);
        mVisibleTabCount = a.getInt(R.styleable.ViewPagerIndicator_visible_table_count, COUNT_DEFAULT_TAB);

        if (mVisibleTabCount < 0) {
            mVisibleTabCount = COUNT_DEFAULT_TAB;
        }
        a.recycle();

        int w = getScreenWidth();  //屏幕宽度
        Log.i("屏幕宽度", w+"");

        mTriangleWidth = (int) (w / mVisibleTabCount * RADIO_TRIANGLE_WIDTH);
        mTriangleWidth = (int) Math.min(mTriangleWidth, DIMENTION_TRIANGLE_WIDTH_MAX);
        mInitTranslationX = w / mVisibleTabCount / 2 - mTriangleWidth / 2;
        Log.i("InitTranslationX", ""+mInitTranslationX);
        Log.i("mTrianglewidth", mTriangleWidth+"");
        Log.i("TabWidth", ""+(int)(w/mVisibleTabCount));
        initTriangle();

        //初始化画笔
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#ffffff"));
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setPathEffect(new CornerPathEffect(3));
    }

    public interface OnPageChangeListener {
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

        public void onPageSelected(int position);

        public void onPageScrollStateChanged(int state);
    }

    public OnPageChangeListener mListener;

    public void setOnPageChangedListener(OnPageChangeListener listener) {
        this.mListener = listener;
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {

        canvas.save();

        canvas.translate(mInitTranslationX + mTranslationX, getHeight()+2);
        canvas.drawPath(mPath, mPaint);

        canvas.restore();

        super.dispatchDraw(canvas);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    /**
     * 通过布局添加Tab
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        int cCount = getChildCount();
        if (cCount == 0) {
            return;
        }

        for (int i = 0; i < cCount; i++) {
            View view = getChildAt(i);
            LayoutParams lp = (LayoutParams) view.getLayoutParams();
            lp.weight = 0;
            lp.width = getScreenWidth() / mVisibleTabCount;
        }

        setItemClickEvent();
    }

    /**
     * 获得屏幕的宽度
     * @return
     */
    private int getScreenWidth() {
        WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.widthPixels;
    }

    /**
     * 初始化三角形
     */
    private void initTriangle() {
        mTriangleHeight = mTriangleWidth / 2;
        mPath = new Path();
        mPath.moveTo(0,0);
        mPath.lineTo(mTriangleWidth, 0);
        mPath.lineTo(mTriangleWidth/2, -mTriangleHeight);
        mPath.close();
    }

    /**
     * 指示器跟随手指进行滚动
     * @param position
     * @param offset
     */
    public void scroll(int position, float offset) {
        int tabWidth = getScreenWidth() / mVisibleTabCount;
        mTranslationX = (int) (tabWidth * (position + offset));
        invalidate();

        //三角形的位置
        int triangleLocation = mTranslationX + mInitTranslationX;
        int screenWidth = getScreenWidth();
        //当三角形处于滑动至屏幕外时移动外层ScrollView
        if ((triangleLocation - scrollLocation) > (screenWidth - mInitTranslationX)
                && offset > 0.5 && !isClicked) {
            if (mVisibleTabCount == 1) {
                mScrollView.scrollTo(mTranslationX, 0);
                scrollLocation = mTranslationX;
            } else {
                mScrollView.scrollTo((position - 2) * tabWidth, 0);
                scrollLocation = (position - 2) * tabWidth;
            }
        } else if((triangleLocation - scrollLocation) < mInitTranslationX && offset > 0
                && offset < 0.5 && !isClicked) {
            if (mVisibleTabCount == 1) {
                mScrollView.scrollTo(mTranslationX, 0);
                scrollLocation = mTranslationX;
            } else {
                mScrollView.scrollTo(position * tabWidth, 0);
                scrollLocation = position * tabWidth;
            }
        }
        //滑动完成时,将标记位恢复
        if (offset == 0) {
            isClicked = false;
        }
    }

    public void setTabItemTitles(List<String> titles) {
        if(titles != null && titles.size() > 0) {
            this.removeAllViews();
            for (String title : titles) {
                addView(generateTextView(title));
            }
        }

        setItemClickEvent();
    }

    /**
     * 根据title创建tab
     * @param title
     * @return
     */
    private View generateTextView(String title) {
        TextView tv = new TextView(getContext());
        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        lp.width = getScreenWidth() / mVisibleTabCount;
        tv.setText(title);
        tv.setGravity(Gravity.CENTER);
        tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
        tv.setTextColor(COLOR_TEXT_NORMAL);
        tv.setLayoutParams(lp);
        return tv;
    }

    /**
     * 设置可见Tab数量
     * @param count
     */
    public void setVisibleTabCount(int count) {
        mVisibleTabCount = count;
    }

    /**
     * 设置关联的ViewPager
     * @param viewPager
     * @param position
     */
    public void setViewPager(ViewPager viewPager, int position) {
        mViewPager = viewPager;


        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                scroll(position, positionOffset);
                if(mListener != null) {
                    mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
                }
            }

            @Override
            public void onPageSelected(int position) {
                if(mListener != null) {
                    mListener.onPageSelected(position);
                }

                highLightTextView(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                if(mListener != null) {
                    mListener.onPageScrollStateChanged(state);
                }
            }
        });

        viewPager.setCurrentItem(position);
        highLightTextView(position);
    }

    /**
     * 设置外层HorizontalScrollView
     * @param scrollView
     */
    @RequiresApi(api = Build.VERSION_CODES.M)
    public void setScrollView(HorizontalScrollView scrollView) {
        mScrollView = scrollView;

        mScrollView.setOnScrollChangeListener(new OnScrollChangeListener() {
            @Override
            public void onScrollChange(View view, int i, int i1, int i2, int i3) {
                scrollLocation = i2;
            }
        });
    }

    /**
     * 高亮显示选中tab文本
     * @param position
     */
    public void highLightTextView(int position) {
        View view;
        for (int i = 0; i < getChildCount(); i++) {
            view = getChildAt(i);
            if(view instanceof TextView) {
                ((TextView) view).setTextColor(COLOR_TEXT_NORMAL);
            }
        }
        view = getChildAt(position);
        if(view instanceof TextView) {
            ((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHT);
        }
    }

    /**
     * 设置Tab的点击事件
     */
    public void setItemClickEvent() {
        int cCount = getChildCount();
        for (int i = 0; i < cCount; i++) {
            final int j = i;
            View view = getChildAt(i);
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    isClicked = true;
                    mViewPager.setCurrentItem(j);
                }
            });
        }
    }

}