鸿蒙开发(13)---ProgressBar与RoundProgressBar组件

简介: 鸿蒙开发(13)---ProgressBar与RoundProgressBar组件

ProgressBar组件


从名字我们就可以看出来,这是一个加载进度条。但是你不要小看这款进度条,Android的进度条非常不容易自定义。


鸿蒙的进度条可以玩出各种花样。今天,我们就来看看如何在鸿蒙手机上实现各式各样的进度条。


基本实现

首先,还是使用XML布局文件,展示一下ProgressBar组件的默认样子。示例代码如下所示:

<ProgressBar
    ohos:id="$+id:test_progressbar"
    ohos:height="150vp"
    ohos:width="match_parent"
    ohos:margin="20vp"
    ohos:max="100"
    ohos:min="0"
    ohos:progress="60"
    ohos:orientation="horizontal"
    ohos:background_instruct_element="#FF0000"
    ohos:progress_color="#555555"
    ohos:divider_lines_enabled="true"
    ohos:divider_lines_number="5"/>


运行之后,效果如下:

上面有一些前面没有见过的属性,这里有必要列出一个表格说明一下:

属性 含义
max 进度条最大值
min 进度条最小值
progress 进度条当前进度值
orientation 进度条是垂直还是水平
background_instruct_element 进度条没有加载部分的颜色
progress_color 进度条加载部分的颜色
divider_lines_enabled 进度条是否有分割线
divider_lines_number 进度条divider_lines_enabled为True之后,通过它设置几个分割段


代码实现样式操作

这里分割段落的颜色无法通过XML布局文件进行定义,因为鸿蒙没有给我们这个属性。但它提供了分割线Java方法进行设置。


示例如下:

public class MainAbilitySlice extends AbilitySlice{
    HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
    private ProgressBar progressBar;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.progressBar=(ProgressBar)findComponentById(ResourceTable.Id_test_progressbar);
        this.progressBar.setDividerLineColor(Color.MAGENTA);//这段代码
    }
}


这里设置分割段的颜色为红色。下图就是,读者可以对比一下上面分割段的效果(上面默认灰色,这里设置为洋红)。



显示加载的数值

当然,我们在实际的项目中,往往给用户更加直观的进度视觉体验,也就是将值以百分比的形式显示出来给用户。


一般来说,加载的数值代码是通过Java代码进行操作。毕竟一般使用进度条的都是一些网络耗时任务。XML布局文件一次性设置肯定不合适。


但是XML布局文件可以通过progress_hint_text属性进行设置。这里,我们只讲解项目中用到的Java设置方式。示例如下:

this.progressBar.setProgressHintText("60%");
this.progressBar.setProgressHintTextColor(Color.RED);
this.progressBar.setProgressHintTextSize(60);


这里一共就3行代码,从方法名应该很容易看出来,一个设置加载进度多少,一个设置加载进度的文字颜色,一个设置加载进度文字的字体大小。



RoundProgressBar组件


从名字上看这个组件也是一个进度条,不过前面加了一个Round,那么说明这是一个圆形的进度条。


属性基本差不多,我们直接用XML布局创建出来,看看样式即可。至于Java代码与ProgressBar组件使用规则基本一致。

<RoundProgressBar
     ohos:id="$+id:test_progressbar"
     ohos:height="300vp"
     ohos:width="300vp"
     ohos:margin="20vp"
     ohos:progress="60"
     ohos:start_angle="30"
     ohos:max_angle="270"/>


运行之后,效果如下:



这里,我们通过start_angle与max_angle实现了非闭合进度条,删除这段代码就是一个正规的圆形进度条。不过这么设置,就是从30度开始,270度结束,整整240是100%。

目录
打赏
0
0
0
0
20
分享
相关文章
|
24天前
|
鸿蒙开发:资讯项目实战之项目初始化搭建
目前来说,我们的资讯项目只是往前迈了很小的一步,仅仅实现了项目创建,步虽小,但概念性的知识很多,这也是这个项目的初衷,让大家不仅仅可以掌握日常的技术开发,也能让大家理解实际的项目开发知识。
鸿蒙开发:资讯项目实战之项目初始化搭建
鸿蒙开发:基于最新API,如何实现组件化运行
手动只是让大家了解切换的原理,在实际开发中,可不推荐手动,下篇文章,我们将通过脚本或者插件,快速实现组件化模块之间的切换,实现独立运行,敬请期待!
鸿蒙开发:基于最新API,如何实现组件化运行
鸿蒙5开发宝藏案例分享---优化应用时延问题
鸿蒙性能优化指南来了!从UI渲染到数据库操作,6大实战案例助你提升应用流畅度。布局层级优化、数据加载并发、数据库查询提速、相机资源延迟释放、手势识别灵敏调整及转场动画精调,全面覆盖性能痛点。附赠性能自检清单,帮助开发者高效定位问题,让应用运行如飞!来自华为官方文档的精华内容,建议收藏并反复研读,共同探讨更多优化技巧。
鸿蒙5开发宝藏案例分享---Swiper组件性能优化实战
本文分享了鸿蒙系统中Swiper组件的性能优化技巧,包括:1) 使用`LazyForEach`替代`ForEach`实现懒加载,显著降低内存占用;2) 通过`cachedCount`精准控制缓存数量,平衡流畅度与内存消耗;3) 利用`onAnimationStart`在抛滑时提前加载资源,提升构建效率;4) 添加`@Reusable`装饰器复用组件实例,减少创建开销。实际应用后,图库页帧率从45fps提升至58fps,效果显著。适合处理复杂列表或轮播场景,欢迎交流经验!
|
18天前
|
HarmonyOS Next快速入门:Button组件
本教程摘自《HarmonyOS Next快速入门》,聚焦HarmonyOS应用开发中的Button组件。Button支持胶囊、圆形和普通三种类型,可通过子组件实现复杂功能,如嵌入图片或文字。支持自定义样式(边框弧度、文本样式、背景色等)及点击事件处理。示例代码展示了不同类型按钮的创建与交互逻辑,助开发者快速上手。适合HarmonyOS初学者及对UI组件感兴趣的开发者学习。
64 0
|
18天前
|
HarmonyOS Next快速入门:Image组件
本教程摘自《HarmonyOS Next快速入门》,专注于HarmonyOS应用开发中的Image组件使用。Image组件支持多种图片格式(如png、jpg、svg等),可渲染本地资源、网络图片、媒体库文件及PixelMap像素图。通过设置`objectFit`属性,实现不同缩放类型;利用`fillColor`属性调整矢量图颜色。示例代码涵盖本地、网络及资源图片的加载与样式设置,同时需在`module.json5`中声明网络权限以加载外部资源。适合开发者快速掌握HarmonyOS图像展示功能。
69 0
鸿蒙5开发宝藏案例分享---优化应用包体积大小问题
本文分享了鸿蒙应用包体积优化的实用技巧,包括SO库压缩、HSP动态共享包、OHPM依赖冲突解决、按需加载和扫描工具定位优化点等方法。通过具体配置示例和实战经验,如启用`compressNativeLibs`、使用共享资源包、强制统一依赖版本以及动态导入功能模块,帮助开发者显著减少包体积,提升用户体验。文中还提供了图标优化、资源混淆和无用代码剔除等补充建议,助力打造更轻量的鸿蒙应用。
鸿蒙5开发宝藏案例分享---Grid性能优化案例
本文深入探讨了鸿蒙系统中Grid组件性能优化的实战技巧,针对Grid加载慢、滚动卡顿的问题,提出用GridLayoutOptions替代columnStart/columnEnd的方法。通过预定义不规则项索引,将位置计算复杂度从O(n)降至O(1),大幅提升性能(如scrollToIndex耗时从447ms降至12ms)。文章结合代码示例与Profiler数据分析,总结最佳实践,帮助开发者优化应用流畅度。
鸿蒙5开发宝藏案例分享---瀑布流优化实战分享
本文基于鸿蒙官方瀑布流优化案例,分享了瀑布流性能优化的实战经验。分析了导致卡顿的三大原因:一次性渲染、动态高度与组件重建,并提供了四大优化方案——懒加载+缓存池、组件复用、动态预加载及固定高度计算。通过实测对比,优化后内存占用降低至98MB,滑动FPS提升至60帧。最后总结避坑指南,帮助开发者解决图片加载、布局嵌套和视频处理等常见问题,实现流畅体验。
鸿蒙5开发宝藏案例分享---长列表性能优化解析
鸿蒙长列表性能优化全揭秘!通过五大实战技巧(LazyForEach懒加载、cachedCount缓存、Prefetcher动态预加载、@Reusable组件复用及布局优化),有效解决卡顿、白块和高内存问题。万条数据测试显示,首屏加载提速77%,滑动零丢帧,内存占用降低86%。针对不同数据量场景提供避坑指南,助你开发流畅的HarmonyOS应用!
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等