您的位置:首页技术文章
文章详情页

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

【字号: 日期:2023-02-14 17:11:47浏览:6作者:猪猪

本文实例为大家分享了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);//让其为正方形,并且宽高不能小于40mWidth = 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.MyLoadingViewandroid:layout_width='100dp'android:layout_height='100dp'/> </LinearLayout>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好吧啦网。

标签: Android
相关文章: