Android仿字节颜色自定义进度条
时间:2023-03-08 12:03:09|栏目:Android代码|点击: 次
本文实例为大家分享了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>
到此为止,效果便可以完美实现了。