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

1
2
3
4
5
6
7
8
9
10
<?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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
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();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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>