滚动加载条效果

先上图:
这里写图片描述

效果也是比较简单的,直接上源码(具体步骤已经做了注释)

package com.test.ndktest;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by ygdx_lk on 17/9/27.
 */

public class LoadingView extends View {
    private static int COLOR_COUNT;//颜色数量
    private final int[] colors = {Color.RED, Color.BLUE, Color.GREEN, Color.CYAN, Color.YELLOW};//颜色值
    private final Paint mPaint;//画笔
    private float width, height;//控件宽,高
    private float item_width;//每一个颜色item所占宽度
    private float offset;//偏移距离
    private static final String TAG = "LoadingView";

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

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

    public LoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //关闭硬件加速
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        //设置画笔
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        //颜色数量
        COLOR_COUNT = colors.length;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = right - left;
        height = bottom - top;
        //计算每一个色块所占宽度
        item_width = width * 1f / COLOR_COUNT;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //首先绘制一个圆角矩形
        RectF rectF = new RectF(0, 0, width, height);
        mPaint.setColor(Color.WHITE);
        canvas.drawRoundRect(rectF, 30, 30, mPaint);

        //设置图形重叠模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));


        //如果偏移量大于控件宽度,重置
        if(offset >= width){
            offset = 0;
        }

        float offSpace = offset % item_width;//位置偏移量
        int colorOffset = COLOR_COUNT - (int) (offset / item_width);//颜色的偏移量

        float left = 0;
        float right = 0;
        float top = 0;
        float bottom = height;

        Log.i(TAG, "onDraw: " + colorOffset + "  " + offSpace + "  " + offset + " ");


        if(offSpace > 0) {//如果有偏移,则绘制一部分色块
            right = offSpace;
            RectF rectF1 = new RectF(left, top, right, bottom);
            mPaint.setColor(colors[colorOffset % COLOR_COUNT]);
            canvas.drawRect(rectF1, mPaint);
            Log.i(TAG, "onDraw:----- " + colorOffset % COLOR_COUNT);
        }

        //依次绘制,无论偏移多少,依然会有COLOR_COUNT - 1个完整色块
        for (int i = 0; i < COLOR_COUNT - 1; i++) {
            left = right;
            right = left + item_width;
            RectF rectF2 = new RectF(left, top, right, bottom);
            mPaint.setColor(colors[(i + colorOffset + 1) % COLOR_COUNT]);
            canvas.drawRect(rectF2, mPaint);
            Log.i(TAG, "onDraw:------ " + ((i + colorOffset + 1) % COLOR_COUNT));
        }

        //绘制最后一个色块(可能完整,也可能是一部分)
        if(right < width) {
            //draw right
            left = right;
            right = width;
            RectF rectF2 = new RectF(left, top, right, bottom);
            mPaint.setColor(colors[colorOffset % COLOR_COUNT]);
            canvas.drawRect(rectF2, mPaint);
        }

        mPaint.setXfermode(null);

        //增加偏移量
        offset += 1;
        //重绘
        invalidate();
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值