热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

鸿蒙开源第三方组件——进度轮ProgressWheel

目录:1、前言2、背景3、组件功能展示4、Sample解析5、Library解析6、作者系列文章合集前言基于安卓平台的进度轮组件ProgressWheel(https:github

 

目录:
1、前言
2、背景
3、组件功能展示
4、Sample解析
5、Library解析
6、作者系列文章合集

 

前言

          基于安卓平台的进度轮组件ProgressWheel(https://github.com/Alford087/ProgressWheel),实现了鸿蒙化迁移和重构,代码已经开源到(https://gitee.com/isrc_ohos/progress-wheel_ohos),欢迎各位下载使用并提出宝贵意见!

背景

      进度轮是UI界面中常见的组件,通常用于向用户显示某个耗时操作完成的百分比,例如:加载状态、下载进度、刷新网页等。进度轮可以动态地显示操作进度,避免用户误以为程序失去响应,从而更好地提高用户界面的友好性。

组件功能展示  

       基于鸿蒙系统,通过自定义控件属性的方式实现了进度轮组件,该组件支持进度轮的旋转、进度增加两种功能。

1、旋转

        点击“Start spinning”按钮,此时进度轮会开始旋转,在旋转过程中按钮上的“Start spinning”变成“Stop spinning”,点击“Stop spinning”用户可以随时停止旋转,效果如图1所示。进度轮旋转功能主要用于展示服务器正在加载数据的状态,此时的作用和加载动画库AVLoadingIndicatorView类似。

鸿蒙开源第三方组件——进度轮ProgressWheel

图1 进度轮旋转

2、进度增加

       点击“Increment”按钮,进度轮会定量增加进度,进度值会实时显示在进度轮的中间,效果如图2所示,进度增加功能主要用于展示服务器加载数据的进度。鸿蒙开源第三方组件——进度轮ProgressWheel

图2 按钮控制进度增加

Sample解析

       在Sample中向用户提供了5个场景,分别是:(1)进度轮旋转、(2)按钮控制进度增加、(3)原生进度条控制进度增加、(4)背景改变、(5)样式改变。其中(1)、(2)两种场景较为简单,均为按钮触发,调用ProgressWheel类的开始旋转、进度增加方法即可,在Library解析部分会详解解释。此处重点介绍(3)、(4)、(5)三种场景。

1、原生进度条控制进度增加

鸿蒙开源第三方组件——进度轮ProgressWheel

 图3 原生进度条控制进度增加

        原生进度条是指鸿蒙系统的基本组件slider,它也可以用于显示内容加载或操作处理的进度,此处我们通过拖动原生进度条来改变进度轮的进度值,并将进度值实时显示。效果如图3所示,代码实现如下:

@Override
public void onProgressUpdated(Slider seekBar, int i, boolean b){
    //原生进度条和进度轮换算,100代表原生进度条的进度最大值,360代表进度轮的进度最大值
    double progress = 360.0 * (seekBar.getProgress() / 100.0);
    //进度轮进度设置
    wheel.setProgress((int) progress);
}

2、背景改变

鸿蒙开源第三方组件——进度轮ProgressWheel

图4 进度轮背景改变

使用Random 类产生随机数,特定处理后作为背景像素点。点击“Random bg”按钮,背景像素点显示,进度轮的背景会发生随机变化。效果如图4所示。代码如下:

//背景改变
private static void randomBg(ProgressWheel wheel) {
    //随机产生背景元素
    Random random = new Random();
    int firstColour = random.nextInt();//随机数获取
    int secOndColour= random.nextInt();
    int patternSize = (1 + random.nextInt(3)) * 8;//随机数处理
    int patternChange = (1 + random.nextInt(3)) * 8;
    int[] pixels = new int[patternSize];
    for (int i = 0; i  patternChange) ? firstColour : secondColour;//得到像素点
    }
    PixelMap.InitializationOptions optiOns=new PixelMap.InitializationOptions();
    options.size=new Size(1,patternSize);
    options.pixelFormat=PixelFormat.ARGB_8888;
    //设置背景元素
    wheel.setRimShader(new PixelMapShader(
            new PixelMapHolder(PixelMap.create(pixels, options)),
            Shader.TileMode.REPEAT_TILEMODE,
            Shader.TileMode.REPEAT_TILEMODE), Paint.ShaderType.RADIAL_SHADER);
}

3、样式改变

鸿蒙开源第三方组件——进度轮ProgressWheel

图5 进度轮样式改变

通过自定义进度轮的长度、宽度、背景等来设计不同的样式,点击“A different style”按钮触发样式改变,效果如图5所示,代码如下:

//样式改变
private static void styleRandom(ProgressWheel wheel, Context ctx) {
    wheel.setRimShader(null, Paint.ShaderType.RADIAL_SHADER);
    wheel.setRimColor(0xFFFFFFFF);
    wheel.setCircleColor(0x00000000);//内圆颜色
    wheel.setBarColor(0xFF000000);//进度轮体颜色
    wheel.setContourColor(0xFFFFFFFF);//外圆颜色
    wheel.setBarWidth(pxFromDp(ctx, 8));//宽度
    wheel.setBarLength(pxFromDp(ctx, 100));//长度
    wheel.setSpinSpeed(2);//旋转速度
    wheel.setDelayMillis(3);//间隔时间
}

 Library解析

1.功能实现

      (1)进度轮绘制。

     该功能是通过ProgressWheel类来实现的,在该类中首先声明setupBounds()、setupPaints()方法,后使用canvas绘制进度轮,设定内圆、外圆、条纹等、文字等属性。文字用于显示进度轮的属性值,不局限于显示当前进度。

public ProgressWheel(Context context)  {
    super(context);
    DrawTask task = (component, canvas) -> {
        //初始化元素边界
        setupBounds();
        //初始化绘制属性
        setupPaints();
        //绘制内圆
        canvas.drawArc(innerCircleBounds, new Arc(360, 360, false), circlePaint);
        //绘制外圆
        canvas.drawArc(circleBounds, new Arc(360, 360, false), rimPaint);
        canvas.drawArc(circleOuterContour, new Arc(360, 360, false), contourPaint);
        //绘制条纹
        if (isSpinning) {
            canvas.drawArc(circleBounds, new Arc(progress - 90, barLength, false), barPaint);
        } else {
            canvas.drawArc(circleBounds, new Arc(-90, progress, false), barPaint);
        }
        //设置文字于圆心处显示
        float textHeight = textPaint.descent() - textPaint.ascent();
        float verticalTextOffset = (textHeight / 2) - textPaint.descent();
        for (String line : splitText) {
            float horizOntalTextOffset= textPaint.measureText(line) / 2;
            canvas.drawText(
                    textPaint,
                    line,
                    (float) component.getWidth() / 2 - horizontalTextOffset,
                    (float) component.getHeight() / 2 + verticalTextOffset);
        }
        //旋转时在不同的位置画进度条
        if (isSpinning) {
            scheduleRedraw();
        }
    };
    addDrawTask(task);
}

(2)进度轮旋转

该功能只提供给用户进度轮旋转的展示形式,不提供当前线程的量化进度。

1)开始旋转。进度轮进入旋转模式时,需要开辟新的线程,每隔一定时间重新绘制进度,来达到旋转的效果。

public void startSpinning() {
    isSpinning = true;//设置当前为旋转状态
    pinHandler.sendEvent(0);//更新进度
}

2)停止旋转。进度轮停止旋转时,进度值被置零。

public void stopSpinning() {
    isSpinning = false;//设置当前为停止状态
    progress = 0;//进度清零
    invalidate();
}

(3)进度增加

该功能需提前设定好增量,每次增加固定的进度,进度的最大值设置为360,当超过最大值时,进度值被置零。该模式在旋转时提供当前的量化进度数据,用户可以清晰地了解当前的线程进度,是一种对用户更友好的交互模式。

public void incrementProgress(int amount) {
    isSpinning = false;//增加进度时进度轮不旋转
    progress+= amount;//定量增加
    if (progress > 360){
        progress %= 360;//超过360会自动重置
    }
    invalidate();
}

2.移植方法

本组件在移植时大部分采用API替换的方法,少数方法需要重写,如处理进度轮旋转的时候重写spinHandler()方法,该方法的功能是:进度轮旋转时在不同的像素位置绘制进度条,移动的位置超过360度则置为0度,重新旋转。代码如下:

//每次绘制要移动的像素数目
private float spinSpeed = 2f;
//绘制过程的时间间隔
private int delayMillis = 100;
private EventHandler spinHandler = new EventHandler(EventRunner.getMainEventRunner())
{
    @Override
    public void processEvent(InnerEvent msg)
    {
        invalidate();
        if (isSpinning)
        {
            //更新画进度的位置
            progress += spinSpeed;
            //要移动的像素数目超过360则重置
            if (progress > 360)
            {
                progress = 0;
            }
            spinHandler.sendEvent(0, delayMillis);
        }
         super.processEvent(msg);
    }
};

 项目贡献人

刘磊 郑森文 朱伟 陈美汝 张馨心

作者:小雪糕123
想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com


推荐阅读
  • 如何自行分析定位SAP BSP错误
    The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • 本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程,将每个考题分配给3个独立的专家,如果他们的评分不一致,则需要请一位裁判做出最终决定。文章详细描述了评分规则,并给出了解决该问题的程序。 ... [详细]
  • 本文详细介绍了Java中vector的使用方法和相关知识,包括vector类的功能、构造方法和使用注意事项。通过使用vector类,可以方便地实现动态数组的功能,并且可以随意插入不同类型的对象,进行查找、插入和删除操作。这篇文章对于需要频繁进行查找、插入和删除操作的情况下,使用vector类是一个很好的选择。 ... [详细]
  • 深入理解Kafka服务端请求队列中请求的处理
    本文深入分析了Kafka服务端请求队列中请求的处理过程,详细介绍了请求的封装和放入请求队列的过程,以及处理请求的线程池的创建和容量设置。通过场景分析、图示说明和源码分析,帮助读者更好地理解Kafka服务端的工作原理。 ... [详细]
  • 先看官方文档TheJavaTutorialshavebeenwrittenforJDK8.Examplesandpracticesdescribedinthispagedontta ... [详细]
  • This article discusses the efficiency of using char str[] and char *str and whether there is any reason to prefer one over the other. It explains the difference between the two and provides an example to illustrate their usage. ... [详细]
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • sklearn数据集库中的常用数据集类型介绍
    本文介绍了sklearn数据集库中常用的数据集类型,包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集,包含了波士顿506处房屋的13种不同特征以及房屋价格,适用于回归任务。 ... [详细]
  • [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • 本文讨论了Kotlin中扩展函数的一些惯用用法以及其合理性。作者认为在某些情况下,定义扩展函数没有意义,但官方的编码约定支持这种方式。文章还介绍了在类之外定义扩展函数的具体用法,并讨论了避免使用扩展函数的边缘情况。作者提出了对于扩展函数的合理性的质疑,并给出了自己的反驳。最后,文章强调了在编写Kotlin代码时可以自由地使用扩展函数的重要性。 ... [详细]
  • 本文介绍了机器学习手册中关于日期和时区操作的重要性以及其在实际应用中的作用。文章以一个故事为背景,描述了学童们面对老先生的教导时的反应,以及上官如在这个过程中的表现。同时,文章也提到了顾慎为对上官如的恨意以及他们之间的矛盾源于早年的结局。最后,文章强调了日期和时区操作在机器学习中的重要性,并指出了其在实际应用中的作用和意义。 ... [详细]
author-avatar
真实的阿凯123
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有