PageIndicator两种动画效果

来源：互联网发布：excel2016数据记录单编辑：程序博客网时间：2024/05/22 12:07

最近看了一个关于PageIndicator的开源项目，发现效果挺好，遍着手写了一两个效果。上代码

自定义属性：

<declare-styleable name="PageIndicatorView">        <attr name="dot_radius" format="dimension" />        <attr name="dot_margin" format="dimension" />        <attr name="dot_count" format="integer" />        <attr name="dot_bg" format="reference" />    </declare-styleable>

//第一种效果

public class CircleSmoothPageIndictor extends View implements ViewPager.OnPageChangeListener {    private int mDotRadius;    private int mDotMargin;    private int mDotCount;    private int mDotSytle;    private ViewPager mViewPager;    private RectF mRectF;    private boolean mFirstLoad = true;    private List<Integer> mDotLeftXs = new ArrayList<>(10);    public CircleSmoothPageIndictor(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PageIndicatorView);        mDotRadius = typedArray.getDimensionPixelSize(R.styleable.PageIndicatorView_dot_radius, 10);        mDotMargin = typedArray.getDimensionPixelOffset(R.styleable.PageIndicatorView_dot_margin, 10);        mDotCount = typedArray.getInteger(R.styleable.PageIndicatorView_dot_count, 0);        mDotSytle = typedArray.getResourceId(R.styleable.PageIndicatorView_dot_bg,0);        typedArray.recycle();        initRectF();    }    private void initRectF(){        mRectF = new RectF();        mRectF.left = 0;        mRectF.top = 0;        mRectF.right = mRectF.left + mDotRadius;        mRectF.bottom = mDotRadius;    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int width = mDotRadius * mDotCount + (mDotCount-1)* mDotMargin;        int height = mDotRadius;        setMeasuredDimension(width,height);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawColor(Color.parseColor("#B48A8A"));        drawAtOnce(canvas);    }    private void drawAtOnce(Canvas canvas){        Log.d("getMeasuredHeight()",""+getMeasuredHeight());        Paint paint = new Paint();        if (mFirstLoad){            int dotX;            for (int i =0;i< mDotCount;i++){                if (i ==0){                    dotX = mDotRadius/2;                }else{                    dotX = mDotRadius/2 + (mDotRadius+ mDotMargin)*i;                }                mDotLeftXs.add(dotX-mDotRadius/2);                paint.setColor(Color.parseColor("#3F48CC"));                paint.setStyle(Paint.Style.FILL);                paint.setAntiAlias(true);                canvas.drawCircle(dotX,mDotRadius/2,mDotRadius/2,paint);            }        }        paint.setColor(Color.parseColor("#000000"));        canvas.drawRoundRect(mRectF,mDotRadius,mDotRadius,paint);    }    public void setViewPager(ViewPager viewPager){        mViewPager = viewPager;        mViewPager.setOnPageChangeListener(this);    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        Log.d("xjbin",positionOffset+"");//0-1        if (mRectF == null){            mRectF = new RectF();//rect 的高度最大mRedius的一半，长度最大为mRedius的mMargin        }        if (mDotLeftXs != null && mDotLeftXs.size() > 0){            mRectF.left = mDotLeftXs.get(position) + (mDotRadius+mDotMargin)*positionOffset/1;            mRectF.top = 0;            mRectF.right = mRectF.left + mDotRadius;            mRectF.bottom = mDotRadius;            invalidate();        }    }    @Override    public void onPageSelected(int position) {        if (mRectF != null){            mRectF.setEmpty();        }    }    @Override    public void onPageScrollStateChanged(int state) {    }}

//第二种效果

public class RectAnimPageIndictor extends View implements ViewPager.OnPageChangeListener {    private int mDotRadius;    private int mDotMargin;    private int mDotCount;    private int mDotSytle;    private ViewPager mViewPager;    private RectF mRectF;    private boolean mFirstLoad = true;    private List<Integer> mDotLeftXs = new ArrayList<>(10);    public RectAnimPageIndictor(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PageIndicatorView);        mDotRadius = typedArray.getDimensionPixelSize(R.styleable.PageIndicatorView_dot_radius, 10);        mDotMargin = typedArray.getDimensionPixelOffset(R.styleable.PageIndicatorView_dot_margin, 10);        mDotCount = typedArray.getInteger(R.styleable.PageIndicatorView_dot_count, 0);        mDotSytle = typedArray.getResourceId(R.styleable.PageIndicatorView_dot_bg,0);        typedArray.recycle();        initRectF();    }    private void initRectF(){        mRectF = new RectF();        mRectF.left = 0;        mRectF.top = 0;        mRectF.right = mRectF.left + mDotRadius;        mRectF.bottom = mDotRadius;    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int width = mDotRadius * mDotCount + (mDotCount-1)* mDotMargin;        int height = mDotRadius;        setMeasuredDimension(width,height);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawColor(Color.parseColor("#B48A8A"));        drawAtOnce(canvas);    }    private void drawAtOnce(Canvas canvas){        Log.d("getMeasuredHeight()",""+getMeasuredHeight());        Paint paint = new Paint();        if (mFirstLoad){            int dotX;            for (int i =0;i< mDotCount;i++){                if (i ==0){                    dotX = mDotRadius/2;                }else{                    dotX = mDotRadius/2 + (mDotRadius+ mDotMargin)*i;                }                mDotLeftXs.add(dotX-mDotRadius/2);                paint.setColor(Color.parseColor("#3F48CC"));                paint.setStyle(Paint.Style.FILL);                paint.setAntiAlias(true);                canvas.drawCircle(dotX,mDotRadius/2,mDotRadius/2,paint);            }        }        paint.setColor(Color.parseColor("#000000"));        canvas.drawRoundRect(mRectF,mDotRadius,mDotRadius,paint);    }    public void setViewPager(ViewPager viewPager){        mViewPager = viewPager;        mViewPager.setOnPageChangeListener(this);    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        Log.d("xjbin",positionOffset+"");//0-1        if (mRectF == null){            mRectF = new RectF();//rect 的高度最大mRedius的一半，长度最大为圆点的mMargin        }        int maxDotWidth = mDotMargin;        if (mDotLeftXs != null && mDotLeftXs.size() > 0){            mRectF.top = 0;            mRectF.bottom = mDotRadius;            //0-0.5之间变长            if (positionOffset < 0.5){                mRectF.left = mDotLeftXs.get(position) + mDotRadius/2f*positionOffset/0.5f;                mRectF.right =  mDotLeftXs.get(position) + mDotRadius/2f*positionOffset/0.5f + mDotRadius  + mDotMargin * positionOffset/0.5f;            }else{            //0.5-1之间变短到正常长度                float leftOffset = (mDotRadius/2f + mDotMargin) * (positionOffset-0.5f)/0.5f;                mRectF.left = (mDotLeftXs.get(position) + mDotRadius/2f) + leftOffset;                float offset = mDotRadius/2f * (positionOffset/1f);                mRectF.right = mDotLeftXs.get(position+1)+ mDotRadius/2f + offset;            }            invalidate();        }    }    @Override    public void onPageSelected(int position) {    }    @Override    public void onPageScrollStateChanged(int state) {    }}

引用开源https://github.com/XjbJoy/PageIndicatorView.git

阅读全文

0 0