ViewPager指示器（三角形）

前言：

公司产品要实现如下图所示效果

image.png

Tab下边还有一个凸起的小三角，为了省事就用了一个图片显示隐藏实现。
谁知UI说小三角要有滑动效果，我就加了个平移动画。又说不行，要随着ViewPager滑动，所以就写了个自定义三角形指示器。

实现思路：

• 1、首先我是继承LinearLayout实现的，这里面可以写TextView或者一个RecyclerView。
  我写的这个只是适用我的项目的所有属性都是固定死的，Tab只能是三个。
  2、监听ViewPager的滑动事件也就是onPageScrolled()方法。
  3、绘制小三角形并让它随ViewPager滑动

详细说下三角形的绘制及滑动
3.1绘制：

• 绘制三角形我们需要 ：三角形底宽、三角形绘制起始位置、三角形高度
  三角形底宽：每个Tab的六分之一(屏幕宽度/Tab数/6)在这里Tab数为3
  三角形绘制起始位置：第一个Tab的中点减去底宽的一半（屏幕宽度/可见Tab数量/2-底宽/2）
  三角形高度：取底宽的一半（屏幕宽度/Tab数/6/2）也就是（底宽/2） 如果三角形的高度过高请自行调整

3.1滑动：

• 滑动距离：就是每个Tab的宽度。想让三角形跟着ViewPager滑动的话，需要用到onPageScrolled()的positionOffset参数代表滑动的偏移值，区间在[0,1)也就是说当前的滑动距离为Tab的宽度*偏移值(positionOffset),这样三角形就会在X轴上舒服的滑动了。

代码实现

public class ViewPagerTriangleIndicatorView extends LinearLayout {
    /**
     * 三角形底边宽
     */
    private int mTriangleWidth;
    /**
     * 三角形高度
     */
    private int mTriangleHeigh;
    /**
     * 三角形起始点
     */
    private int mTriangleInitPos;
    /**
     * 三角形移动偏移
     */
    private int mTriangleMoveWidth;

    private Paint mPaint;
    private Path mPath;

    public ViewPagerTriangleIndicatorView(Context context) {
        super(context, null);
    }

    public ViewPagerTriangleIndicatorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setColor(Color.parseColor("#FFFFFF"));
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

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

    /**
     * 当布局大小发生变化时回调
     *
     * @param w
     * @param h
     * @param oldw
     * @param oldh
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mTriangleWidth = w / 3 / 6;
        mTriangleHeigh = mTriangleWidth / 2 - 12;
        mTriangleInitPos = getScreenWidth() / 3 / 2 - mTriangleWidth / 2;
        initTriangle();
    }

    /**
     * 绘制子View
     *
     * @param canvas
     */
    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.translate(mTriangleInitPos + mTriangleMoveWidth, getHeight());
        canvas.drawPath(mPath, mPaint);
    }

    /**
     * 监听ViewPager滑动,联动Indicator
     *
     * @param position
     * @param positionOffset
     */
    public void scroll(int position, float positionOffset) {
        int tabWidth = getScreenWidth() / 3;
        mTriangleMoveWidth = (int) (tabWidth * position + tabWidth * positionOffset);
        invalidate();
    }

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

XML RecyclerView Item必须是平均分的

<cn....ViewPagerTriangleIndicatorView
            android:id="@+id/mViewPagerTriangleIndicatorView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

          <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/background"
            android:visibility="visible" />

        </cn......ViewPagerTriangleIndicatorView>

XML 加入3个Tab(TextView) 必须要加权重哦

<cn....ViewPagerTriangleIndicatorView
            android:id="@+id/mViewPagerTriangleIndicatorView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
       <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="财经"
             />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="娱乐"
             />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="军事"
             />
</cn......ViewPagerTriangleIndicatorView>

调用三角形指示器：

   @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
           mViewPagerTriangleIndicatorView.scroll(position, positionOffset) 
    }