[教程] FMX-实现简单的环形进度条

谁说进度条一定要是长长的一条?太三俗,特三俗!今天,利用 FMX 我们来做一个环形的进度条。

1、创建一个空白的 FMX 应用(这个步骤略过了,New->Project->Delphi Project->Multi-Device Application);

2、放一个TCircle,我们命名为clBase,将 Stroke 的 Kind 属性设置为 None,Fill 属性修改下,给我们一个喜欢的发型,比如玩下渐变(Kind 属性改为Gradient,然后设置 Gradient 属性调整激变的配色),另外设置下 Width 和 Height 为同样的值;

3、再放一个TCircle,将它的父调整为clBase,我们命名为clMask,Align 设置为 Client,然后将Stroke同样设置为None,然后设置设置 Fill 属性修改下,做为环形的内圈。为了形成环形,我们将clMask的Margins的四边都设置成10,缩进就保留出了环的位置了。

4、再放一个TArc,将它的父调整为clBase,我们命名为acProgress,Align 设置为 Client,设置 Stroke 的 Thickness 值为10。设置它的颜色为半透明,比如 #80000000。由于我们习惯顺时针从正中算0,所以设置 StartAngle 为 -90,EndAngle 设置先随便设置一个值,如45.

5、再放一个 TLabel,将它的父调整为clBase,我们命名为lblHint,设置 Align 为Center,TextSettings 的 HorizAlign 也为 Center,Text 设置为 0%。

好了,上面的一切就绪,我们先看一下大概的效果:

CircleProgress

我们现在为了演示进度条的实际效果,我们在 acProgress.EndAngle 上添加一个 FloatAnimation(我们命名为faProgress),让它从 0->360 之间变化,Duration 设置的稍长一点,比如5秒,Enabled 设置为True,Trigger 改为 Visible=True,其它属性看着设置就好。在FloatAnimation.OnProcess 事件中,添加下面的代码来更新 lblHint 的文本:

procedure TForm1.faProgressProcess(Sender: TObject);
begin
lblHint.Text:=IntToStr(Trunc(acProgress.EndAngle*100/360))+'%';
end;

OK,现在运行程序看效果吧,我抓一个 Windows 平台下的动画截图参考效果:

circleprogress

好了,为了重用这个东西,你可以将它做成一个Frame,然后加一个 Progress 属性来来代替动画来修改进度和提示。附上 全部源码

分享到: