广告
返回顶部
首页 > 资讯 > 移动开发 >Android自定义view实现圆形进度条效果
  • 571
分享到

Android自定义view实现圆形进度条效果

2024-04-02 19:04:59 571人浏览 泡泡鱼
摘要

Android中实现进度条有很多种方式,自定义进度条一般是继承progressBar或继承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()}
    }

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

--结束END--

本文标题: Android自定义view实现圆形进度条效果

本文链接: https://www.lsjlt.com/news/149156.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android自定义view实现圆形进度条效果
    Android中实现进度条有很多种方式,自定义进度条一般是继承progressBar或继承view来实现,本篇中讲解的是第二种方式。 先上效果图: 实现圆形进度条总体来说并不难,还...
    99+
    2022-11-13
  • android自定义view制作圆形进度条效果
    还是我们自定View的那几个步骤: 1、自定义View的属性 2、在View的构造方法中获得我们自定义的属性 [ 3、重写onMesure ] 4、重写onDraw 1、自定...
    99+
    2022-06-06
    view 进度条 Android
  • Android自定义View实现圆形进度条
    本文实例为大家分享了Android自定义View实现圆形进度条的具体代码,供大家参考,具体内容如下 原理非常简单,在自定义View的基础上使用Canvas的drawCircle画两个...
    99+
    2022-11-13
  • Android自定义view实现圆环进度条效果
    本文实例为大家分享了Android自定义view实现圆环进度条效果的具体代码,供大家参考,具体内容如下 一、实现效果图 二、核心代码 自定义view的属性 <xml vers...
    99+
    2022-11-13
  • Android自定义圆形进度条效果
    本文实例为大家分享了Android自定义圆形进度条效果的具体代码,供大家参考,具体内容如下 1 控件 RoundProgress package listview.tianhet...
    99+
    2022-11-12
  • Android自定义View实现圆形加载进度条效果的方法
    这篇文章将为大家详细讲解有关Android自定义View实现圆形加载进度条效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。View仿华为圆形加载进度条效果图实现思路可以看出该View可分为三个部分...
    99+
    2023-05-30
    android view 进度条
  • Android自定义View实现圆形加载进度条
    本文实例为大家分享了Android自定义View实现圆形加载进度条的具体代码,供大家参考,具体内容如下 效果图 话不多说,咱们直接看代码 首先第一种: 1、创建自定义View类 p...
    99+
    2022-11-13
  • Android怎么自定义View实现圆形进度条
    本文小编为大家详细介绍“Android怎么自定义View实现圆形进度条”,内容详细,步骤清晰,细节处理妥当,希望这篇“Android怎么自定义View实现圆形进度条”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。原...
    99+
    2023-07-02
  • Android中怎么自定义view实现圆环进度条效果
    这篇文章主要讲解了“Android中怎么自定义view实现圆环进度条效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android中怎么自定义view实现圆环进度条效果”吧!核心代码自定义...
    99+
    2023-06-29
  • Android自定义View圆形进度条控件(三)
    继续练习自定义View,这次带来的圆形进度条控件与之前的圆形百分比控件大同小异,这次涉及到了渐变渲染以及画布旋转等知识点,效果如下: 虽然步骤类似,但是我还是要写,毕竟基础的...
    99+
    2022-06-06
    view 进度条 Android
  • Android实现自定义圆形进度条
    今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的...
    99+
    2022-06-06
    自定义 进度条 Android
  • 详解Android如何自定义view实现圆形进度条
    Android中实现进度条有很多种方式,自定义进度条一般是继承progressBar或继承view来实现,本篇中讲解的是第二种方式。 先上效果图: 实现圆形进度条总体来说并不难,还...
    99+
    2022-11-13
  • Android自定义View之圆形进度条式按钮
    介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图。 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态。而且他说圆...
    99+
    2022-06-06
    view 进度条 按钮 Android
  • Android怎么自定义View实现圆弧进度效果
    这篇文章主要介绍“Android怎么自定义View实现圆弧进度效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Android怎么自定义View实现圆弧进度效果”文章能帮助大家解决问题。技术实现Ar...
    99+
    2023-07-06
  • Android View实现圆形进度条
    本文实例为大家分享了Android View实现圆形进度条的具体代码,供大家参考,具体内容如下 主要涉及到下面几个方法: // 画圆 canvas.drawCircle // 画...
    99+
    2022-11-12
  • Android自定义view实现进度条指示效果
    先看看效果图: 首先是布局文件 <FrameLayout android:layout_width="match_parent" android:layout_...
    99+
    2022-06-06
    view 进度条 Android
  • Android自定义View圆形进度条控件的方法
    这篇文章主要讲解了Android自定义View圆形进度条控件的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。继续练习自定义View,这次带来的圆形进度条控件与之前的圆形百分比控件大同小异,这次涉及到了渐变渲...
    99+
    2023-05-31
    android roi %d
  • Android自定义控件实现圆形进度条
    项目中常用到的圆形进度条有好多个,从网上搜到的自定义进度条多是封装的比较好的代码,但是不利于初学者,现在本博客就教给大家如何一步步实现自定义进度条的效果: 先看效果如图… ...
    99+
    2022-06-06
    进度条 Android
  • Android自定义View实现钟摆效果进度条PendulumView
    在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果。由于原生的进度条确实是不好看,所以想可以自定义View实现这样的效果,以后也可以用于加载页面的进度条。...
    99+
    2022-06-06
    view Android
  • Android自定义View实现简单的圆形Progress效果
    先给大家展示下效果图,如果感觉不错,请参考实现思路: 我们要实现一个自定义的再一个圆形中绘制一个弧形的自定义View,思路是这样的:   先要创建一个类ProgressVie...
    99+
    2022-06-06
    view progress Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作