揭秘FMX进度条样式修改

程序员文章站 2024-02-02 11:56:19

...

Delphi跨平台开发中的FMX样式处理给了我们UI设计的很多便捷。在很多年前使用Delphi开发VCL应用时，我们都期盼各种各样的皮肤控件，他能给我们带来新颖、夺目、优雅的程序外观。在现今的FMX应用中，我们其实已不再需要其他三方的UI控件，FMX中的样式已能非常好的满足我们的需要，当然要做到非常美观仅靠我们码农还是较为欠缺的，所以若有美工的配合就非常的完美了。

闲话少说，今天我们从一个进度条来引入对控件样式的修改处理。

问题的提出

前几天，有朋友问我，想修改手机上进度条的高度，单独设置控件的Height值无效，值不改变，控件的高度也不能改变（在Windows系统的设计状态下是可以修改的，但回到安卓状态就变回原值），进度条在手机上显示为一条细线。当然，我们要理解，手机上界面就那么点大，少占用点显示空间自然也无可厚非，可我们有时候就希望进度条高一点，设置控件的高度又无效，那怎么办呢？

总结问题点：1、手机应用；2、控件大小不能通过设置控件属性完成；
如何解决？

解答

下面，我们一步一步来实际操作：
1、新建一个项目，一个空白窗体，拖放一个进度条控件到窗体中，选择样式模式为安卓；
揭秘FMX进度条样式修改
在这种情况下，进度条属性值高度是不能调整的。
2、鼠标到控件上，点击右键，在弹出的菜单中选择“ **Edit Custom Style **”

选定菜单后，出现当前进度条的样式编辑窗体：

接下来的所有工作，我们都在这里完成。
（样式设计工具的功能非常强大的，这里不会一一介绍，大家可以自己多尝试，因为也确实没什么可以查询的资料）

3、修改控件及显示高度
揭秘FMX进度条样式修改
原值为10，我们现在修改为20，这时候窗体上的控件可以显示25的高度，但进度条的那条线仍然是那条线，并没有改变。

4、改变显示内容
揭秘FMX进度条样式修改
点击“SourceLink”后面的编辑按钮，会弹出图片链接编辑框：

我们需要修改图片定位，修改结果如下：

最下边的红框是修改后的显示效果，需要注意的是中间红框标识处的不同比例都需要分别进行修改，当然有时候我们只用到一种。
刚刚，我们修改的是进度条的底色图片，进度显示的图片设置也作类似修改：
这次，需要选中hindicator
揭秘FMX进度条样式修改
修改图片定位：

完成修改后的预览效果：

5、完成并保存修改
保存后，系统会自动增加“StyleBook1”到窗体设计器上，我们修改进度条的Value属性值，观察进度条的显示情况，如下图：

比较一下，修改过样式的进度条与没有修改过样式的进度条：
揭秘FMX进度条样式修改
修改StyleLookup，可以使用不同样式显示。其他新增加的进度条，可直接选择已修改好的样式，不需要每个都去修改一次。

新的问题

刚刚我们是修改了控件的显示大小，但现在我想要修改控件的显示颜色，怎么处理呢？
进度条这类的控件，修改颜色有两种方式，其一是修改对应链接的图片颜色：
揭秘FMX进度条样式修改
这里增加了一样不同颜色的图片，修改后的效果如下：

另外一种方法是增加其他可视控件替换：

在样式编辑器里，hindicator下增加一个“Rectangle”，设置填充方式为Client,修改填充颜色，继续设置无边框，边框填充颜色为空，设置圆角。
揭秘FMX进度条样式修改
完成修改并保存，显示效果如下：

（题外话：现在知道为什么要美工了吧，我这码农只知道怎么修改，并不知道怎么样搭配会好看。）