关于安卓自定义进度条(二)

简介: 关于安卓自定义进度条(二)

先上gif效果图:

效果图

上图中,蓝色的进度条为自定义进度条

注意!!!源码在文末

背景

要实现一个进度条,大部分情况下,都是需要进行自定义的。因为原生就算你自定义了背景图片,但是一旦进度条的高度,超过了一定的范围,且进度在1%左右的时候,就会看到明显的“卡边”情况。
就是进度条如果是圆角的背景,但是如果是小进度的时候,进度会显示出一个长方形。因此为了一了百了,则有了这篇文章,自定义进度条!




思路

要实现自定义进度条,首先,是需要有canvas的基础知识的。如果没有,则需要自行学习。
伸手党看到这里,可以关闭网页了。

首先,如开头的图片所示,进度条,有以下要素:

(1)区分为当前进度颜色,和背景进度颜色

(2)有圆角

(3)点击后,有扩散的水波纹效果,然后从百分之一百回到当前进度




大概要点就是这些。下面开始定义要素。

(1)有一个状态变量,是控制进度条的状态的,例如说默认状态,选中状态,非选中状态

(2)控制颜色的变量

(3)进度条的值

(4)点击时候的参数




再者,我们需要思考一下问题:

(1)默认情况,是没有进度的,所以只需要绘制一个默认的背景即可

(2)非选中状态,进度条是从0开始到目标值的,中间有个过渡的动画

(3)选中状态,先触发水波纹动画,当动画到达最长边的时候,则会有消失,然后播放进度条动画

实现

(1)水波纹
直接使用canvas中的drawCircle方法绘制即可,通过ValueAnimator进行半径的变化,然后即可实现

(2)普通从0-xx的进度条动画,也是通过ValueAnimator进行控制即可

(3)基于(2)的基础上,如果进度条从100-xx也是通过ValueAnimator变化即可。

整体绘制实现,都需要放到onDraw方法中,通过标识(Boolean)的控制,控制绘制的方法,绘制不同的效果,onDraw核心代码如下:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (!hadInit()) {
            return;
        }
        if (getStatus() == TYPE_STATUS_DEFAULT) {
            drawBgInfo(canvas);
            return;
        }
        if (!needDraw()) {
            return;
        }
        if (!needAnim()) {
            drawChangeBg(canvas);
            //不需要动画,直接画进度条
            drawProgressInfo(canvas);
            return;
        }
        //绘制顺序:
        //非选中模式,进度条慢慢叠加,直到进度值
        //选中模式,水波纹填充后,进度条渐渐显示,数值从100退回到目标值
        if (mDrawingRipple) {
            //绘制水波纹
            drawRippleInfo(canvas);
        }
        if (mDrawingCustomBg) {
            //绘制修改后的背景
            drawChangeBg(canvas);
        }
        if (mDrawingProgress) {
            //绘制进度条
            drawProgressInfo(canvas);
        }
    }

注意

(1)对于动画的实现,用到了ValueAnimator,注意释放的时机

(2)对于recyclerview中使用该进度条控件,请注意复用问题

(3)对于进度条的值换算,通过实际px值换算即可

(4)对于圆角,在绘制的过程中,你会发现低进度的情况(1%)圆角失效,
同时,网上大部分自定义进度条也是的,这里就不一一放出他们的博客地址了。实现方法有很多,我这里是直接使用clipPath后再绘制。

就这么多,链接在下面

that's all----------------------------------------------------

类名:

SelectionProgressHorizontalBarView

SelectionProgressVerticalBarView

代码地址

目录
相关文章
|
6月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
506 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
6月前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量,结合`PathEffect`的子类(如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等)实现路径绘制的动态变化。文章详细解析了各子类的功能与参数,并通过案例代码展示了如何使用`ComposePathEffect`组合效果,以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动,源码附于文末供参考。
106 0
|
6月前
|
Android开发 开发者
Android自定义view之利用drawArc方法实现动态效果
本文介绍了如何通过Android自定义View实现动态效果,重点使用`drawArc`方法完成圆弧动画。首先通过`onSizeChanged`进行测量,初始化画笔属性,设置圆弧相关参数。核心思路是不断改变圆弧扫过角度`sweepAngle`,并调用`invalidate()`刷新View以实现动态旋转效果。最后附上完整代码与效果图,帮助开发者快速理解并实践这一动画实现方式。
167 0
|
6月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
114 0
|
6月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先,作者自定义了一个圆角图片控件`MellowImageView`,用于绘制圆角矩形图片。接着,通过将布局放入`HorizontalScrollView`中,实现了左右滑动功能,并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例,包括XML布局、动画文件和Java代码,最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
302 65
Android自定义view之网易云推荐歌单界面
|
6月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程,涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现(如通过三个构造函数解决焦点问题),接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例,如跑马灯、折线图、太极图等。此外,文章详细解析了View绘制流程(measure、layout、draw)和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题,并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
629 84
|
6月前
|
Android开发 开发者
Android自定义View之不得不知道的文件attrs.xml(自定义属性)
本文详细介绍了如何通过自定义 `attrs.xml` 文件实现 Android 自定义 View 的属性配置。以一个包含 TextView 和 ImageView 的 DemoView 为例,讲解了如何使用自定义属性动态改变文字内容和控制图片显示隐藏。同时,通过设置布尔值和点击事件,实现了图片状态的切换功能。代码中展示了如何在构造函数中解析自定义属性,并通过方法 `setSetting0n` 和 `setbackeguang` 实现功能逻辑的优化与封装。此示例帮助开发者更好地理解自定义 View 的开发流程与 attrs.xml 的实际应用。
150 2
Android自定义View之不得不知道的文件attrs.xml(自定义属性)
|
6月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下,传统View可能引发卡顿的问题,进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法,包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
169 3
|
6月前
|
XML 搜索推荐 Android开发
Android改变进度条控件progressbar的样式(根据源码修改)
本文介绍了如何基于Android源码自定义ProgressBar样式。首先分析了系统源码中ProgressBar样式的定义,发现其依赖一张旋转图片实现动画效果。接着分两步指导开发者实现自定义:1) 模仿源码创建一个旋转动画XML文件(放置在drawable文件夹),修改图片为自定义样式;2) 在UI控件中通过`indeterminateDrawable`属性应用该动画。最终实现简单且个性化的ProgressBar效果,附带效果图展示。
391 2
|
6月前
|
Android开发 开发者
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
118 0
Android自定义view之围棋动画(化繁为简)

热门文章

最新文章