如何设计firemonkey的style样式 by [青岛]小豆豆(599132718) 2015-01-30.docxVIP

我本是菜鸟，不懂编程，只是个设计师，但因工作需要，老板需要我熟悉Delphi控件，方便设计控件样式，在本人长期的自我摸索与学习中学到了点东西，因为关于style的设计的资料不多，我写一些自己的经验，发表出来，希望能帮助像我一样的菜鸟，如果你是高手就请路过···我本是菜鸟，只为小白提供服务，因为我只能做到这里了···下面我说下如何将style样式应用到你的窗体上，另外如何导出设计属于自己的样式，然后应用出来。以XE7为例说明：1： 新建一个Muti-Device Application，我都会将每步操作用图片的形式记录下来，表达的不好尽请谅解。如下图：2：选择Blank application，点击ok。如下图：3：新建好后会我们就看见了主窗体，然后给放两个按钮，方便我们以后看到我们样式的效果，控件根据自己情况随便拖几个到窗体，因为按钮效果明显，所以我选择按钮：如下图4：点击菜单栏-里面的tool里面的bitmap style designer：出现如图的界面。：5：点击file 打开一个系统自带的一个style样式的文件vsf格式的，如图：Amakrits.vsf 6：点击images 下面有个.Png的图片点击一下：如图出现这样的图片注意 这个图片就是属于Amakrits的图片 每个控件的皮肤都在一定的位置上，位置不能改变。不过万一改变也没关系 因为你可以改他的坐标 用鼠标左键或右键。我们只有得到了png图片 才能用图形编辑软件进行编辑，我用的是ps（Photoshop cc ）;7：下面我们就导出png格式的图片在图像编辑软件进行编辑，点击Export会出现下图点击，将我们要编辑的图片导出到桌面。这样方便找。9：保存好后如下图，我们得到了png的图片。10：进入我们的图像编辑软件ps.(photoshop)我们可以根据自己喜好设计 但是切记每个小图片位置最好是不要变的 否则必将麻烦（上面说过）；具体每个按钮是干什么的 ，我们得在Delphi里面的bitmap style designer里面的object下面一一查看看。我为了简单让大家知道操作流程就用了调整他的色相饱和度 对比度 等调色工具得到如图11：好了图片调整好了：如图(右下角的名字我输入有个小失误多写了r不过不要紧 这只是给我们自己提醒用的 让我们知道自己用谁的母版设计的 )这里有个小技巧就是我把这个文件的名字写到右下角 这样方便我以后用 ，因为每个style的图片都是不一样的 位置也不一样 自然坐标就不一样 如果我们想设计自己的style 必须要在系统给的母版上update才行 要不然我们得自己一个一个的设计坐标 那样会崩溃的（这里听不懂的先不要紧，慢慢来）你只要跟着做就行。12.导出我们设计好的png 。导出的格式是png 但是起名字得注意：我起的名字是amakrits11，你也可以和我一起这样做。（这样我们就知道我设计的这个样式是基于谁的母版做的）13:保存好，将文件存入这个路径下：。14:回到bitmap style designer 点击images下面的style.png文件 在点击update，这是更新图片，（每个控件的图片的位置我们没变过 所以 在object里面可以查看每个控件皮肤 都不会出现问题了 。）15：点击ok ,如果你的图和我不一样不要紧的啊 主要你确定导入的图是你刚刚编辑好的就行。如下图：16：另存为：一个目录，我存入了vcf下面名字还是起Amakrists11这样方便以后修改。17：这是我存的路径，将自己设计的样式最好备份下 ，因为升级的时候就会覆盖掉，文件就丢失了，本人已经受过此害了。希望你们不要重蹈覆辙。将vsf格式的存入vcl 下面，这样方便以后调出编辑。18：继续另存为：将style格式的存入fmx 下面 并且格式是style 别弄错19：可以关掉bitmap style designer回到窗体拖一个stylebook控件到窗体 20：双击stylebook1 ，出现如图：点击本按钮21：导入刚才我们存入的fmx下面的Amakrists11.style文件点击按钮打开：如下图22：点击蓝色按钮。这样我们就将我们设计的样式载入到stylebook1了23：下面很关键，点击窗体空白处选中窗体然后在 object inspector 里面的参数stylebook 选中stylebook1；如下图：24：选中了stylebook1；窗体如下图：我们设计的样式就这样做好了。25：点击按钮运行26：点击运行后如图： 这就是我们设计好的一个style了。你学会了吗？ 燕子QQ: 599132718