详解Android如何自定义view实现圆形进度条

 更新时间:2022年01月20日 14:32:12   作者:吐尔洪江Coding  
Android中实现进度条有很多种方式,自定义进度条一般是继承progressBar或继承view来实现。本文将介绍通过自定义View实现的圆形进度条,感兴趣的可以动手试一试

Android中实现进度条有很多种方式,自定义进度条一般是继承progressBar或继承view来实现,本篇中讲解的是第二种方式。

先上效果图:

实现圆形进度条总体来说并不难,还是跟往常一样继承view,初始化画笔,按下面的步骤一步步来就好了。对初学者来说动画效果可能比较陌生,我们可以使用属性动画中的valueAnimator来实现动画效果。

实现步骤:

1、画出一个灰色的圆环作为背景。

2、画出上层的圆环覆盖下方的圆环。

3、加入动画效果

值得注意的是怎么设置圆环和文字的位置。

画出矩形只需要传入矩形对角线的坐标即可,如果不加以处理的话画出来的圆环的边缘是不完整的,刚开始接触自定义view的同学们一定要先好好看看Android坐标系相关内容,不然很难理解位置参数为什么这样设置。

完整代码:

package com.example.floatingwindow.widget;
 
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
 
import androidx.annotation.Nullable;
 
import com.example.floatingwindow.R;
 
public class ProgressBarView extends View {
 
    private Paint mPaintBack;
    private Paint mPaint;
    private Paint mPaintText;
    private float process;
    private int strokeWidth = 15;
    private int textSize = 20;
    private long duration = 3000;
    private float startDegree = 0;
    private float endDegree = 360;
    private String text = "完成";
    private String defaultText = "0%";
 
 
    public ProgressBarView(Context context) {
        super(context);
        init();
    }
 
    public ProgressBarView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }
 
    public ProgressBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
 
    private void init() {
        mPaintBack = new Paint();
        mPaintBack.setColor(getResources().getColor(R.color.gray));
        mPaintBack.setStyle(Paint.Style.STROKE);
        mPaintBack.setAntiAlias(true);
        mPaintBack.setStrokeCap(Paint.Cap.ROUND);
        mPaintBack.setStrokeWidth(strokeWidth);
 
        mPaint = new Paint();
        mPaint.setColor(getResources().getColor(R.color.purple_200));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(strokeWidth);
 
        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setStyle(Paint.Style.STROKE);
        mPaintText.setColor(Color.BLACK);
        mPaintBack.setStrokeCap(Paint.Cap.ROUND);
        mPaintText.setTextSize(sp2px(textSize));
    }
 
    public void setStrokeWidth(int width) {
        strokeWidth = width;
    }
 
    public void setTextSize(int textSize) {
        this.textSize = textSize;
    }
 
    public void setDuration(long duration) {
        this.duration = duration;
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //创建圆环矩形
        RectF rectF = new RectF(strokeWidth, strokeWidth, getWidth() - strokeWidth, getHeight() - strokeWidth);
        //画出灰色进度条作为背景
        canvas.drawArc(rectF, 0, 360, false, mPaintBack);
        //画进度条
        canvas.drawArc(rectF, 0, process, false, mPaint);
        //计算进度
        int percent = (int) (process / 360 * 100);
        //设置文字在canvas中的位置
        Paint.FontMetrics fm = mPaintText.getFontMetrics();
        int mTxtWidth = (int) mPaintText.measureText(text, 0, defaultText.length());
        int mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
        int x = getWidth() / 2 - mTxtWidth / 2;
        int y = getHeight() / 2 + mTxtHeight / 4;
        if (percent < 100) {
            canvas.drawText(percent + "%", x, y, mPaintText);
        } else {
            canvas.drawText(text, x, y, mPaintText);
        }
    }
 
    /**
     * 设置动画效果
     */
    public void start() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(startDegree, endDegree);
        valueAnimator.setDuration(duration);
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.addUpdateListener(animation -> {
            process = (float) animation.getAnimatedValue();
            invalidate();
        });
        valueAnimator.start();
    }
 
    private int sp2px(int sp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp,
                getResources().getDisplayMetrics());
    }
}

最后就是动画效果了,使用valueanimator,传入开始和结束的进度以及执行时间。然后每次进度发生变化时做UI刷新。

xml布局:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
 
    <com.example.floatingwindow.widget.ProgressBarView
        android:id="@+id/progressBar"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
    </com.example.floatingwindow.widget.ProgressBarView>
 
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        progressBar.start()
 
        progressBar.setOnClickListener { progressBar.start()}
    }

以上就是详解Android如何自定义view实现圆形进度条的详细内容,更多关于Android圆形进度条的资料请关注脚本之家其它相关文章!

相关文章

  • Android 自定义view仿支付宝咻一咻功能

    Android 自定义view仿支付宝咻一咻功能

    支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天就通过本文给大家分享实现此功能的思路及实例代码,一起看看吧
    2016-12-12
  • linphone-sdk-android版本号生成解析

    linphone-sdk-android版本号生成解析

    这篇文章主要为大家介绍了linphone-sdk-android版本号生成解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Android画中画窗口开启方法

    Android画中画窗口开启方法

    Android8.0 Oreo(API Level26)允许活动启动画中画Picture-in-picture(PIP)模式。PIP是一种特殊类型的多窗口模式,主要用于视频播放。PIP模式已经可用于Android TV,而Android8.0则让该功能可进一步用于其他Android设备
    2023-01-01
  • Android自定义View展开菜单功能的实现

    Android自定义View展开菜单功能的实现

    这篇文章主要介绍了Android自定义View展开菜单功能的实现,需要的朋友可以参考下
    2017-06-06
  • Android 自定义LayoutManager实现花式表格

    Android 自定义LayoutManager实现花式表格

    这篇文章主要介绍了Android 自定义LayoutManager实现花式表格,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Android手机卫士之确认密码对话框

    Android手机卫士之确认密码对话框

    这篇文章主要为大家详细介绍了Android手机卫士之确认密码对话框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Android中的Bitmap缓存池使用详解

    Android中的Bitmap缓存池使用详解

    这篇文章主要介绍了Android中的Bitmap缓存池使用详解,本文主要目的是讲解如何使用缓存来提高UI的载入输入和滑动的流畅性,需要的朋友可以参考下
    2015-01-01
  • idea下Android各目录所代表的含义介绍

    idea下Android各目录所代表的含义介绍

    这篇文章主要给大家介绍了关于idea下Android各目录所代表含义的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Android开发技巧之Fragment的懒加载

    Android开发技巧之Fragment的懒加载

    我们都知道fragment放在viewPager里面,viewpager会帮我们预先加载一个,但是当我们要看fragment里面的内容时,我们也许只会去看第一个,不会去看第二个,如果这时候不去实现fragment的懒加载的话,就会多余的去加载一些数据,造成用户多消耗流量。下面来一起看看吧。
    2016-10-10
  • Flutter渲染原理深入解析

    Flutter渲染原理深入解析

    众所周知 Flutter是由Google推出的开源的高性能跨平台框架,一个2D渲染引擎。在Flutter中,Widget是Flutter用户界面的基本构成单元,可以说一切皆Widget。下面来看下Flutter框架的整体结构组成
    2023-04-04

最新评论