Android自定义View实现进度条动画

本文实例为大家分享了Android自定义View实现进度条动画的具体代码,供大家参考,具体内容如下

控件效果

原理:

控制代码/

/更新进度值
val mHandler = object : Handler() {
        override fun handleMessage(msg: Message?) {
            progressView.setCurrentProgress(progress1.toFloat())
        }
    }

//开启动画,更新进度值
 private fun progressAdd() {
        isAnimate = true
        progress1 = 0
        Thread(Runnable {
            while (isAnimate) {
                Thread.sleep(random.nextInt(200).toLong())
                progress1 += 1
                mHandler.sendEmptyMessage(0)
            }
        }).start()
    }

    //停止动画
    private fun progressReduce() {
        isAnimate = false
    }

控件源码:

public class ProgressView extends View {

    //前景颜色
    private int FIRST_COLOR = 0xffFEA711; //  0xff00574B;//
    //背景颜色
    private int SECOND_COLOR = 0xffFBE39C;

    private int mSecondWidth;
    private int mFirstWidth;
    private int mHeight;
    private int mSecondRadius;
    private int mFirstRadius;
    private int progressPadding = 30;

    private float currentValue;
    private int maxProgress = 100;

    //画笔
    private Paint paint;
    private RectF rectF;
    private Bitmap leafBitmap;
    private int mLeafWidth;
    private int mLeafHeight;
    private List<Leaf> mLeafInfos;

    public ProgressView(Context context) {
        super(context, null);
    }

    public ProgressView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(FIRST_COLOR);
        paint.setAntiAlias(true);

        rectF = new RectF();
        leafBitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.icon_leaf);
        mLeafWidth = leafBitmap.getWidth();
        mLeafHeight = leafBitmap.getHeight();
        Log.e("zhen", " mLeafWidth: " + mLeafWidth + " mLeafHeight: " + mLeafHeight);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mHeight = h;
        //外围
        mSecondWidth = w;
        mSecondRadius = (int) ((mSecondWidth * 1f / 5) / 2);
        //内部进度条
        mFirstWidth = mSecondWidth - progressPadding - mSecondRadius;
        mFirstRadius = mSecondRadius - progressPadding;
        mLeafInfos = new LeafFactory(mFirstRadius - mLeafWidth, 6).generateLeafs();
        Log.e("zhen", " mSecondWidth: " + mSecondWidth + " mHeight: " + mHeight +
                " mSecondRadius: " + mSecondRadius + " mFirstWidth: " + mFirstWidth + " mFirstRadius: " + mFirstRadius);

    }

    public void setCurrentProgress(float currentProgress) {
        Log.e("zhen", "currentProgress: " + currentProgress);
        if (currentProgress > 100) return;
        currentValue = currentProgress / maxProgress * mFirstWidth;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画布移动
        canvas.translate(mSecondRadius, mHeight / 2);
        //画背景左半圆
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(SECOND_COLOR);
        rectF.left = -mSecondRadius;
        rectF.top = -mSecondRadius;
        rectF.right = mSecondRadius;
        rectF.bottom = mSecondRadius;
        canvas.drawArc(rectF, 90, 180, false, paint);
        //画背景右半圆
        rectF.left = mSecondWidth - 3 * mSecondRadius;
        rectF.top = -mSecondRadius;
        rectF.right = mSecondWidth - mSecondRadius;
        rectF.bottom = mSecondRadius;
        canvas.drawArc(rectF, -90, 180, false, paint);
        //画背景中间方形
        rectF.left = 0;
        rectF.top = -mSecondRadius;
        rectF.right = mSecondWidth - 2 * mSecondRadius;
        rectF.bottom = mSecondRadius;
        canvas.drawRect(rectF, paint);
        //绘制进度条半圆
        paint.setColor(FIRST_COLOR);
        float leftValue = (mFirstRadius - currentValue) > 0 ? (mFirstRadius - currentValue) : 0;
        float angel = (float) Math.toDegrees(Math.acos(leftValue / mFirstRadius));
        rectF.left = -mFirstRadius;
        rectF.top = -mFirstRadius;
        rectF.right = mFirstRadius;
        rectF.bottom = mFirstRadius;
        canvas.drawArc(rectF, 180 - angel, 2 * angel, false, paint);
        //绘制进度条方形
        if (currentValue >= mFirstRadius) {
            currentValue = currentValue > mFirstWidth ? mFirstWidth : currentValue;
            rectF.left = 0;
            rectF.top = -mFirstRadius;
            rectF.right = currentValue - mFirstRadius;
            rectF.bottom = mFirstRadius;
            canvas.drawRect(rectF, paint);
        }

        //落叶纷飞
        if (currentValue > 0 && currentValue < mFirstWidth) {
            long currentTime = System.currentTimeMillis();
            for (int i = 0; i < mLeafInfos.size(); i++) {
                Leaf leaf = mLeafInfos.get(i);
                int delay = (int) ((currentTime - leaf.startTime) % CIRCLE_TIME);
                leaf.x = mFirstWidth - mFirstRadius - delay * (mFirstWidth * 1f / CIRCLE_TIME);
                if (leaf.x + mFirstRadius + mLeafWidth < currentValue) continue;
                leaf.y = (float) (leaf.amplitude * Math.sin(2 * Math.PI / CIRCLE_TIME * delay + leaf.phaseOffeset));
                Log.e("zhen", "延时ms数" + delay + " 角速度: " + (2 * Math.PI / CIRCLE_TIME) + " leaf.x: " + leaf.x + " leaf.y: " + leaf.y);
                // 通过Matrix控制叶子旋转
                Matrix matrix = new Matrix();
                matrix.postTranslate(leaf.x, leaf.y);
                // 根据叶子旋转方向确定叶子旋转角度
                float rotate = leaf.rotateOrientation ? leaf.x % 360f : -leaf.x % 360;
                matrix.postRotate(rotate, leaf.x + mLeafWidth / 2, leaf.y + mLeafHeight / 2);
                Log.e("zhen", "落叶子旋转角度: " + rotate);
                canvas.drawBitmap(leafBitmap, matrix, paint);
            }
        }

        //绘制旋转风车
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);
        float x = mSecondWidth - 2 * mSecondRadius;
        float y = 0;
        canvas.drawCircle(x, y, mSecondRadius, paint);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(0XFFFCD158);
        canvas.drawCircle(x, y, mSecondRadius - 5, paint);
    }

    @IntDef({Amplitude.SMALL, Amplitude.MIDDLE, Amplitude.LARGE})
    public @interface Amplitude {
        int SMALL = 0;
        int MIDDLE = 1;
        int LARGE = 2;
    }

    public static class Leaf {

        public static long CIRCLE_TIME = 3000; //一个周期所需要的时间

        //振幅大小
        private int amplitude;
        //初始相位偏移
        private int phaseOffeset;
        //旋转方向
        private boolean rotateOrientation;
        //延时时间
        private long startTime;

        //x位置取决于初始位置偏移
        private float x;
        //y位置取决于振幅,初始相位
        private float y;

        @Override
        public String toString() {
            return "Leaf{" +
                    "amplitude=" + amplitude +
                    ", phaseOffeset=" + phaseOffeset +
                    ", rotateOrientation=" + rotateOrientation +
                    ", startTime=" + startTime +
                    ", x=" + x +
                    ", y=" + y +
                    '}';
        }
    }

    public static class LeafFactory {

        private Random random = new Random();
        int randomValue;

        private int mHeight;
        private int mLeafSize;

        public LeafFactory(int mHeight, int mLeafSize) {
            this.mHeight = mHeight;
            this.mLeafSize = mLeafSize;
        }

        public List<Leaf> generateLeafs() {
            List<Leaf> mLeafsInfo = new ArrayList<>();
            for (int i = 0; i < mLeafSize; i++) {
                mLeafsInfo.add(generateLeaf());
            }
            return mLeafsInfo;
        }

        private Leaf generateLeaf() {
            Leaf leaf = new Leaf();
            randomValue = random.nextInt(3);
            switch (randomValue) {
                case Amplitude.SMALL:
                    leaf.amplitude = (int) (mHeight * 1f / 3);
                    break;
                case Amplitude.MIDDLE:
                    leaf.amplitude = (int) (mHeight * 2f / 3);
                    break;
                case Amplitude.LARGE:
                    leaf.amplitude = (int) (mHeight * 3f / 3);
                    break;
            }
            leaf.startTime = random.nextInt((int) CIRCLE_TIME);
            leaf.phaseOffeset = random.nextInt(8);
            leaf.rotateOrientation = random.nextBoolean();
            Log.e("zhen", "生成一个叶子:" + leaf);
            return leaf;
        }
    }
    
}

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

(0)

相关推荐

  • android自定义进度条渐变色View的实例代码

    最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码  ,大概讲解一下实现思路吧! 复制代码 代码如下: package com.spring.progressview; import android.conten

  • Android实现进度条(ProgressBar)的功能与用法

    进度条(ProgressBar)的功能与用法,供大家参考,具体内容如下 进度条是UI界面中一种实用的UI组件,用于显示一个耗时操作显示出来的百分比,进度条可以动态的显示进度,避免是用户觉得系统长时间未反应,提高用户的体验. 下面程序简单示范了进度条的用法,界面布局文件如下: 在layout下的activity_main中: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr

  • Android编程之ProgressBar圆形进度条颜色设置方法

    本文实例讲述了Android ProgressBar圆形进度条颜色设置方法.分享给大家供大家参考,具体如下: 你是不是还在为设置进度条的颜色而烦恼呢--别着急,且看如下如何解决. ProgressBar分圆形进度条和水平进度条 我这里就分享下如何设置圆形进度条的颜色吧,希望对大家会有帮助. 源码如下: 布局文件代码: <ProgressBar android:id="@+id/progressbar" android:layout_width="wrap_content

  • Android中自定义进度条详解

    Android原生控件只有横向进度条一种,而且没法变换样式,比如原生rom的样子 很丑是吧,当伟大的产品设计要求更换前背景,甚至纵向,甚至圆弧状的,咋办,比如: ok,我们开始吧: 一)变换前背景 先来看看progressbar的属性: 复制代码 代码如下: <ProgressBar             android:id="@+id/progressBar"             style="?android:attr/progressBarStyleHor

  • Android 七种进度条的样式

    当一个应用在后台执行时,前台界面就不会有什么信息,这时用户根本不知道程序是否在执行.执行进度如何.应用程序是否遇到错误终止等,这时需要使用进度条来提示用户后台程序执行的进度.Android系统提供了两大类进度条样式,长形进度条(progress-BarStyleHorizontal) 和圆形进度条(progressBarStyleLarge).进度条用处很多,比如,应用程序装载资源和网络连接时,可以提示用户稍等,这一类进度条只是代表应用程序中某一部分的执行情况,而整个应用程序执行情况呢,则可以通

  • Android中实现Webview顶部带进度条的方法

    写这篇文章,做份备忘,简单滴展示一个带进度条的Webview示例,进度条位于Webview上面. 示例图如下: 主Activity代码: 复制代码 代码如下: package com.droidyue.demo.webviewprogressbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.vi

  • Android文件下载进度条的实现代码

    main.xml: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_paren

  • android ListView和ProgressBar(进度条控件)的使用方法

    ListView控件的使用:ListView控件里面装的是一行一行的数据,一行中可能有多列,选中一行,则该行的几列都被选中,同时可以触发一个事件,这种控件在平时还是用得很多的.使用ListView时主要是要设置一个适配器,适配器主要是用来放置一些数据.使用起来稍微有些复杂,这里用的是android自带的SimpleAdapter,形式如下:android.widget.SimpleAdapter.SimpleAdapter(Context context, List<? extends Map<

  • android中实现OkHttp下载文件并带进度条

    OkHttp是比较火的网络框架,它支持同步与异步请求,支持缓存,可以拦截,更方便下载大文件与上传文件的操作.下面我们用OkHttp来下载文件并带进度条! 相关资料: 官网地址:http://square.github.io/okhttp/ github源码地址:https://github.com/square/okhttp 一.服务器端简单搭建 可以参考搭建本地Tomcat服务器及相关配置这篇文章. 新建项目OkHttpServer,在WebContent目录下新建downloadfile目录

  • 实例详解Android自定义ProgressDialog进度条对话框的实现

    Android SDK已经提供有进度条组件ProgressDialog组件,但用的时候我们会发现可能风格与我们应用的整体风格不太搭配,而且ProgressDialog的可定制行也不太强,这时就需要我们自定义实现一个ProgressDialog. 通过看源码我们发现,ProgressDialog继承自Alertdialog,有一个ProgressBar和两个TextView组成的,通过对ProgressDialog的源码进行改进就可以实现一个自定义的ProgressDialog. 1.效果: 首先

随机推荐