android仿ios菊花LoadingView

最近抽空仿着ios上的菊花加载效果,自己实现了个,效果感觉还行,于是写篇博客贴出来,供大家参考

自定义view无非就是那几步,首先分析要实现的效果,采用那些方式实现比较好,然后是否需要自定义属性, 测量布局是否需要重写这样, 最重要还是onDraw中画出来.

废话少讲,直接上代码:

ChrysanthemumLoadingView.java

 private int mWidth;
    private int mHeight;
    private int mCenterX;
    private int mCenterY;
    private Paint mPaint;
    private final int mDefaultColor = 0xff999999;
    private final int mDefaultSegmentWidth = 10;
    private final int mDefaultSegmentLength = 20;
    private int mSegmentWidth = mDefaultSegmentWidth;
    private int mSegmentColor = mDefaultColor;
    private int mSegmentLength = mDefaultSegmentLength;

    private int control = 1;

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

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

    public ChrysanthemumLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ChrysanthemumLoadingView);
        int indexCount = typedArray.getIndexCount();
        for (int i = 0; i < indexCount; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr){
                case R.styleable.ChrysanthemumLoadingView_pathColor:
                    mSegmentColor = typedArray.getColor(attr,mDefaultColor);
                    break;
                case R.styleable.ChrysanthemumLoadingView_segmentLength:
                    mSegmentLength = typedArray.getDimensionPixelSize(attr,mDefaultSegmentLength);
                    break;
                case R.styleable.ChrysanthemumLoadingView_segmentWidth:
                    mSegmentWidth = typedArray.getDimensionPixelSize(attr,mDefaultSegmentWidth);
                    break;
            }
        }
        typedArray.recycle();

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(mSegmentColor);
        mPaint.setStrokeWidth(mSegmentWidth);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
        mCenterX = mWidth / 2;
        mCenterY = mHeight / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < 12; i++) {
            mPaint.setAlpha(((i + 1 + control) % 12 * 255) / 12);
            canvas.drawLine(mCenterX, mCenterY - mSegmentLength, mCenterX, mCenterY - mSegmentLength*2, mPaint);
            canvas.rotate(30, mCenterX, mCenterY);
        }
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        ValueAnimator valueAnimator = ValueAnimator.ofInt(12, 1);
        valueAnimator.setDuration(1000);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                control = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
    }

onFinishInflate()就是在activity中布局加载完毕后调用的方法, 在里边真正开启的loadingview交替运行的效果.

绘制的原理就是先画出一段line, 然后将canvas旋转,此例是旋转30度,我们都知道圆的一周是360度,这样正好需要绘制12个线段,然后每次画布旋转30度即可.

在布局中使用:

<com.xxx.ChrysanthemumLoadingView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_centerHorizontal="true"
                app:pathColor="#000000"
                app:segmentLength="7sp"
                app:segmentWidth="3sp" />

由于是自定义view, 已经用到了自定义属性,需要声明:

xmlns:app="http://schemas.android.com/apk/res-auto"

这个声明不要忘记添加.

然后就是看到的效果:

最后, 奉上自己正在更新完善的Github项目,https://github.com/MrDeclanCoder/KotlinMVPRxJava2Dagger2GreenDaoRetrofitDemo   我平常练手的项目使用了一些框架以及自己写的自定义View,点进去看一下,可能有你能用到的,欢迎star!