滾動加載條效果

先上圖:
這裏寫圖片描述

效果也是比較簡單的,直接上源碼(具體步驟已經做了註釋)

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();
    }
}
發佈了101 篇原創文章 · 獲贊 29 · 訪問量 27萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章