Android自定义进度条 Android仿字节颜色自定义进度条

时间:2021-08-09 我想月薪过万人气:0

想了解Android仿字节颜色自定义进度条的相关内容吗，我想月薪过万在本文为您仔细讲解Android自定义进度条的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：Android,进度条，下面大家一起来学习吧。

效果展示

代码实现

第一步：编写自定义属性

res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyLoadingView">
        <attr name="loading_color_one" format="color"/>
        <attr name="loading_color_two" format="color"/>
        <attr name="loading_color_three" format="color"/>
        <attr name="loading_color_four" format="color"/>
        <attr name="loading_color_five" format="color"/>
    </declare-styleable>
</resources>

第二步：编写自定义java类

package com.wust.jingdutiao;
 
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.Animation;
 
import androidx.annotation.Nullable;
 
/**
 * ClassName: MyLodingView <br/>
 * Description: <br/>
 * date: 2021/7/21 15:59<br/>
 *
 * @author yiqi<br />
 * @QQ 1820762465
 * @微信 yiqiideallife
 * @技术交流QQ群 928023749
 */
public class MyLoadingView extends View {
 
    private int rect_color_one;
    private int rect_color_two;
    private int rect_color_three;
    private int rect_color_four;
    private int rect_color_five;
    private Paint rect_one_paint;
    private Paint rect_two_paint;
    private Paint rect_three_paint;
    private Paint rect_four_paint;
    private Paint rect_five_paint;
    private int mWidth;
    private int mHeight;
    private float[] mHeightRate = {1/16.0f,1/10.0f,1/8.0f};
    private int HORIZONTAL_OFFSET = 5;
    private int bg_default_color;
    private ValueAnimator va;
 
    public MyLoadingView(Context context) {
        super(context);
    }
 
    public MyLoadingView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initAttrs(context, attrs);
        initPaint();
        initAnima();
    }
 
    public MyLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(context, attrs);
        initPaint();
        initAnima();
    }
 
    //设置 属性动画
    private void initAnima() {
        va = ValueAnimator.ofInt(0, 4);
        va.setDuration(3000);
        va.setRepeatCount(ValueAnimator.INFINITE);
        va.setRepeatMode(ValueAnimator.RESTART);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                setRectColorByNum(value);
            }
        });
        postDelayed(new Runnable() {
            @Override
            public void run() {
                va.start();
            }
        },500);
    }
 
    private void initAttrs(Context context, AttributeSet attrs) {
        //获取用户传来的五种颜色
        TypedArray ty = context.obtainStyledAttributes(attrs, R.styleable.MyLoadingView);
 
        rect_color_one = ty.getColor(R.styleable.MyLoadingView_loading_color_one, Color.parseColor("#325AB4"));
        rect_color_two = ty.getColor(R.styleable.MyLoadingView_loading_color_two, Color.parseColor("#3C8CFF"));
        rect_color_three = ty.getColor(R.styleable.MyLoadingView_loading_color_three, Color.parseColor("#888888"));
        rect_color_four = ty.getColor(R.styleable.MyLoadingView_loading_color_four, Color.parseColor("#00C8D2"));
        rect_color_five = ty.getColor(R.styleable.MyLoadingView_loading_color_five, Color.parseColor("#78E6DC"));
 
        //获取背景色
        try {
            ColorDrawable bg = (ColorDrawable) getBackground();
            bg_default_color = bg.getColor();
        }catch (Exception e){
            bg_default_color = Color.WHITE;
        }
 
        ty.recycle();
    }
 
    //初始化画笔
    private void initPaint() {
        rect_one_paint = getPaintByColor(rect_color_one);
        rect_two_paint = getPaintByColor(rect_color_two);
        rect_three_paint = getPaintByColor(rect_color_three);
        rect_four_paint = getPaintByColor(rect_color_four);
        rect_five_paint = getPaintByColor(rect_color_five);
    }
 
    private Paint getPaintByColor(int Color) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setColor(Color);
        return paint;
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
        //让其为正方形，并且宽高不能小于40
        mWidth = mHeight = Math.max(Math.min(mWidth, mHeight),dp2px(100));
        setMeasuredDimension(mWidth, mHeight);
    }
 
    private int dp2px(int value) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,value,getResources().getDisplayMetrics());
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制矩形
        drawRect(canvas);
 
    }
 
    private void drawRect(Canvas canvas) {
        int centerX = mWidth/2;
        int centerY = mHeight/2;
        RectF rectOne = new RectF(centerX-HORIZONTAL_OFFSET,
                centerY-mWidth*mHeightRate[0],
                centerX+HORIZONTAL_OFFSET,
                centerY+mWidth*mHeightRate[0]);
        canvas.drawRoundRect(rectOne,5,5,rect_one_paint);
 
        RectF rectTwo = new RectF(centerX+HORIZONTAL_OFFSET*3,
                centerY-mWidth*mHeightRate[1],
                centerX+HORIZONTAL_OFFSET*5,
                centerY+mWidth*mHeightRate[1]);
        canvas.drawRoundRect(rectTwo,5,5,rect_two_paint);
 
        RectF rectThree = new RectF(centerX-HORIZONTAL_OFFSET*3,
                centerY-mWidth*mHeightRate[1],
                centerX-HORIZONTAL_OFFSET*5,
                centerY+mWidth*mHeightRate[1]);
        canvas.drawRoundRect(rectThree,5,5,rect_three_paint);
 
        RectF rectFour = new RectF(centerX+HORIZONTAL_OFFSET*7,
                centerY-mWidth*mHeightRate[2],
                centerX+HORIZONTAL_OFFSET*9,
                centerY+mWidth*mHeightRate[2]);
        canvas.drawRoundRect(rectFour,5,5,rect_four_paint);
 
        RectF rectFive = new RectF(centerX-HORIZONTAL_OFFSET*7,
                centerY-mWidth*mHeightRate[2],
                centerX-HORIZONTAL_OFFSET*9,
                centerY+mWidth*mHeightRate[2]);
        canvas.drawRoundRect(rectFive,5,5,rect_five_paint);
    }
 
    //根据属性动画的 变化的值 给画笔换不同的颜色
    private void setRectColorByNum(int num){
        if (num == 0){
            rect_one_paint.setColor(rect_color_one);
            rect_two_paint.setColor(bg_default_color);
            rect_three_paint.setColor(bg_default_color);
            rect_four_paint.setColor(bg_default_color);
            rect_five_paint.setColor(bg_default_color);
        }else if (num == 1){
            rect_one_paint.setColor(bg_default_color);
            rect_two_paint.setColor(rect_color_two);
            rect_three_paint.setColor(rect_color_three);
            rect_four_paint.setColor(bg_default_color);
            rect_five_paint.setColor(bg_default_color);
        }else if (num == 2){
            rect_one_paint.setColor(bg_default_color);
            rect_two_paint.setColor(bg_default_color);
            rect_three_paint.setColor(bg_default_color);
            rect_four_paint.setColor(rect_color_four);
            rect_five_paint.setColor(rect_color_five);
        }else if (num == 3){
            rect_one_paint.setColor(rect_color_one);
            rect_two_paint.setColor(rect_color_two);
            rect_three_paint.setColor(rect_color_three);
            rect_four_paint.setColor(rect_color_four);
            rect_five_paint.setColor(rect_color_five);
        }
        invalidate();
    }
}

第三步：使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:gravity="center">
 
    <com.wust.jingdutiao.MyLoadingView
        android:layout_width="100dp"
        android:layout_height="100dp"/>
 
</LinearLayout>

到此为止，效果便可以完美实现了。

加载全部内容