进度条

作者: 苏苏说得对 | 来源:发表于2017-06-21 19:34 被阅读0次

1 案例描述

1.1 场景描述

进度条,从0到100逐渐增长,上方显示百分比。

1.2 思路分析

1)进度条,就是一个有填充颜色的矩形在另一个无填充的矩形中不断拉伸,直到两者重合。

2)百分比即为两者长度之比,向上取整。

1.3 元件准备(如图1)

1)一个375*20的矩形,无填充颜色,命名为“Kuang”。

2)一个1*20的矩形,填充颜色为红,命名为“Jin du tiao”,放置在“Kuang”的最左侧。

3)一个文本标签,放置在“Kuang”的上方,设为隐藏。

图1

2 用例

2.1 设置“Jin du tiao”的“载入时”用例(如图2)

1)双击“载入时”,再点击“设置尺寸”。

2)设置锚点为“左侧“,动画为”线性“,时间为“5000”毫秒。

3)设置“宽”的函数,使局部变量LVAR1为“元件”、“Kuang”,英文输入状态下,插入函数:[[LVAR1.width]]。

图2

2.2 设置“Bai fen bi”的“载入时”和“显示时”用例(如图3、图4)

1)载入时:显示“Bai fen bi”

2)显示时:设置文本,值为“[[Math.ceil(LVAR1.width/LVAR2.width*100)]]%”;等待0毫秒;隐藏“Bai fen bi”;显示“Bai fen bi”。

图3 图4

2.3 点击“预览“察看效果。

相关文章

  • sys模块

    打印进度条 进度条的效果 [# ][## ][### ...

  • 橡皮筋进度条ElasticProgressBar

    橡皮筋进度条ElasticProgressBar 橡皮筋进度条是一个极具动画效果的进度条。该进度条不仅具有皮筋效果...

  • Android SeekBar的使用,进度条的另一种实现方式

    概述: SeekBar是进度条。我们使用进度条时,可以使用系统默认的进度条;也可以自定义进度条的图片和滑块图片等。...

  • Android控件之SeekBar

    SeekBar是进度条。我们使用进度条时,可以使用系统默认的进度条;也可以自定义进度条的图片和滑块图片等。 See...

  • Android进度条

    Android进度条 不同的进度条显示结果: demo xml代码: 二.模拟进度条加载过程:运行展示图: xml...

  • SeekBar的用法

    1)ProgressBar (一般进度条,例如:下载进度条)2)SeekBar(拖动条,适用于音乐,视频播放进度条...

  • 设置进度条的样式

    1.首先是水平进度条 2.分别设置进度条的第一、第二进度条的样式和进度条背景的样式。新建一个文件progressb...

  • IOS开发 UISlider和UIProgressView

    进度条和滑动动条控件 本节学习内容: 1.进度条和滑动条的概念 2.进度条和滑动条的属性 3.进度条和滑动条的使用...

  • ProgressBar进度条

    SeekBar :搜寻进度条RatingBar:评价进度条 style="?android:attr/progre...

  • Android中常用UI控件ProgressBar

    ProgressBar表示进度条, 应用场景也很多,比如下载时候的进度条, 程序更新时候的进度条. 我们今天用昨天...

网友评论

      本文标题:进度条

      本文链接:https://www.haomeiwen.com/subject/psbtcxtx.html