Android 自定义View之实现ViewPager指示器

ViewPager指示器实现代码如下，我主要是实现了圆形的指示器。

首先在attrs文件中添加:

<declare-styleable name="ViewPagerIndicator">
    <attr name="unSelectCirclerColor" format="color"></attr>
    <attr name="selectCirclerColor" format="color"></attr>
    <attr name="circlerSize" format="dimension"></attr>
    <attr name="itemWidth" format="dimension"></attr>
</declare-styleable>

public class ViewPagerIndicator extends View {
    private Paint mPaint;//未选中的画笔
    private Paint selectPaint;//选中的画笔
    private int selectPosition = 0; //当前选中的位置
    private float positionOffset = 0;//偏移量

    private int defaultColor = Color.BLACK;
    private int selectColor = Color.RED;
    private float circlerWidth = 20;

    private int circlerCount = 0;//circler的个数
    private float itemWidth = 0;//每一个cirler的总长度
    public ViewPagerIndicator(Context context) {
        this(context , null);
    }

    public ViewPagerIndicator(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs , 0);
    }

    public ViewPagerIndicator(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.obtainStyledAttributes(attrs , R.styleable.ViewPagerIndicator);
        defaultColor = ta.getColor(R.styleable.ViewPagerIndicator_unSelectCirclerColor , Color.BLACK);
        selectColor = ta.getColor(R.styleable.ViewPagerIndicator_selectCirclerColor , Color.RED);
        circlerWidth = ta.getDimension(R.styleable.ViewPagerIndicator_circlerSize , 20);
        itemWidth = ta.getDimension(R.styleable.ViewPagerIndicator_itemWidth , 0);
        initPaint();
    }

    private void initPaint(){
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(defaultColor);

        selectPaint = new Paint();
        selectPaint.setAntiAlias(true);
        selectPaint.setColor(selectColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        if(circlerCount > 0){
            if(itemWidth == 0){
                for(int i = 0 ; i  < circlerCount ; i ++){
                    canvas.drawCircle(width/circlerCount/2 + i * width/circlerCount, height/2 , circlerWidth , mPaint);
                }
                float x = width * positionOffset / circlerCount;
                canvas.drawCircle(width*selectPosition/circlerCount + width/circlerCount/2 + x, height/2 , circlerWidth , selectPaint);
            }else{
                for(int i = 0 ; i < circlerCount ; i ++){
                    canvas.drawCircle(itemWidth * (i + 1) , height/2 , circlerWidth , mPaint);
                }
                float x = itemWidth * positionOffset;
                float scrollCirclerWidth = 0;
                if(positionOffset > 0.5){
                    scrollCirclerWidth = circlerWidth + (circlerWidth*(1 - positionOffset))/2;
                }else{
                    scrollCirclerWidth = circlerWidth + (circlerWidth*positionOffset)/2;
                }
                canvas.drawCircle(itemWidth * (selectPosition + 1) + x, height/2 , scrollCirclerWidth , selectPaint);
            }
        }
    }

    public void setSelectPosition(int position){
        selectPosition = position;
        positionOffset = 0;
        invalidate();
    }

    public void setPositionOffset(int position , float positionOffset ){
        selectPosition = position;
        this.positionOffset = positionOffset;
        invalidate();
    }

    public void setCirclerCount(int circlerCount){
        this.circlerCount = circlerCount;
        setSelectPosition(0);
        invalidate();
    }
调用方法如下：

需要设置显示的个数：viewPagerIndicator.setCirclerCount(5);

然后在viewPager 的监听器中实现如下代码即可：

vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    //positionOffset 表示距离 position的偏移量有多少
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        LogUtils.e(TAG , "position : " + position + " ,positionOffset : " + positionOffset
                + " , positionOffsetPixels : " + positionOffsetPixels);
        viewPagerIndicator.setPositionOffset(position , positionOffset);
        if(positionOffset == 0){
            viewPagerIndicator.setSelectPosition(position);
        }
    }

    @Override
    public void onPageSelected(int position) {
        //TextPaint textPaint = tvNumberStyle.getPaint();
        //float len = textPaint.measureText(tvNumberStyle.getText().toString().trim());
        //LogUtils.e(TAG , "tvNumberStyle length : " + tvNumberStyle.getMeasuredWidth());
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});