ViewPager指示器（三角形）

自定义的三角形指示器，可以跟ViewPager一起滑动。

 

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;
    }
}

布局的话：

 <cn......view.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="北京"
            android:textColor="#FFFFFF" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="上海"
            android:textColor="#FFFFFF" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="深圳"
            android:textColor="#FFFFFF" />

        </cn.....view.ViewPagerTriangleIndicatorView>

调用：只需要在ViewPager的onPageScrolled里面写入：

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

完事儿！！！

这个也没有进行封装，因为是自己使用就懒得写了。目前是根据3个Tab算的，如果要实现别的效果就需要各位大佬自己改吧改吧了。