火山PC从零开始学炫彩UI 第三课

火山PC从零开始学炫彩UI 第三课

作者：灰羊羊

一、本文学习内容
使用代码实现窗口、按钮的背景管理，背景管理器的使用
本文学习的目的是学习背景管理器的使用，在这里我提供如下一份素材，这是未闻花名界面，一份优秀的素材，下载地址在文末。

二、火山炫彩项目创建
我们继续使用上一节课程的项目，打开您的火山IDE

首先我们先管理窗口的背景，我们开始进行第一步，将窗口背景图片设置为下面的图片

右键点击图片，选择属性可以看到，图片的分辨率为850×550，也就是说这个图片的尺寸就是850×550，我们需要将窗口的尺寸设置成850×550。
下面我将这个素材的文件夹打包做成zip压缩包，然后加载到视窗资源里面，这样子比较方便，我们需要图片的时候可以直接从内存里面。找而不是从文件加载，这样子您的界面exe就会变得非常的简洁

首先我们需要找到左侧项目，然后右键点击它，打开文件所在位置。并且将我们打包好的压缩包复制在src目录下。

然后我们在启动类的下面新建一个变量素材，类型为视窗文件资源。在后面的初始值。点击出现下拉三角，点击选择。浏览选择找到我们，刚才放在src目录下的压缩包，选中它加载。

这样，您的素材就被加载进视窗文件资源了。程序在编译的时候会将这个资源一起编译。

下面我们再创建一个变量。图片类型为炫彩图片。这里不一定非得是在启动类型创建，您可以在启动方法下面创建也可以。它的主要作用是加载图片，然后返回一个句柄。使用这个句柄来操作。如下图所示，图片这里可以从多个途径来加载。而我们选择从内存zip中加载。您也可以选择从文件加载，那样的话会读取本地文件。这里我推荐使用内存zip的方法。

按照他的参数提示。写入参数。数据资源，这里就是素材变量名。文件名就是您需要加载的图全名，这里它是15.png，压缩包密码，这里我没有设置压缩包密码，所以默认为空就可以了。

下面我们开始将这个图片放在窗口上。我们使用炫彩窗口点背景管理器。这样子会使用背景管理器来管理窗口。然后我们选的函数添加图片。这里有很多，也可以选择添加填充或者添加边框之类的。由于我们加载的是图片，所以需要添加图片。这里提示我们第一个参数为组合状态。我们可以输入组合状态，然后和上一篇文章的方法一样。右键跳转它的定义位置看看，看看里面有什么常量

这里就是组合状态的类型以及说明，我们在这里选择窗口全部。就是说让这个图片覆盖整个窗口。

第二个参数为图片，其实这里说的是图片的句柄。我们用刚才加载图片的那个变量，然后图片.句柄。就可以获取到刚才图片的句柄。这里要记得我们的图片尺850×500的，所以我们需要将窗口的尺寸也要改一下。

做完了之后，我们就可以调试运行了。运行的结果如下图所示，您会发现。原来的窗口图标还带着，这样子不美观。所以下面我们将这个图标去掉。

去掉的方法就是将窗口样式.默认。改为我们自己定义的。比如说我在这里用三个样式居中、拖动、边框。来定义样式。这样子窗口的图标就会消失。而且他的几个控制按钮也会有不进这里，我们不用它的默认的控制按钮。我们自己来做。现在做好调试一下，看看效果。

这样子是不是很美观？

下面我们来设置按钮。我们就按钮按照下图的方式一个一个排列在左边的空白区。首先因为，因为我们不用窗口默认的关闭按钮，所以这时我们需要自己做一个。为了美观，我们将关闭按钮放在最下面。

首先创建一个关闭按钮的变量名，由于素材里面的按钮图标是135×45的尺寸，所以这时候我们将按钮的尺寸设置为135*45，位置在窗口的左下角。所以他的顶边就是550-45，左边为0
我们调试一下，看看效果。

然后对这个按钮来进行一下美化。我们可以重复利用上面的图片变量。我们使用这个图片变量，在加载一个图片的时候，原来的图片句柄会被释放掉，会加入一个新的覆盖但是不影响我们设置的窗口背景。同样的，对于按钮也是使用背景管理器添加图片。这个时候组合状态就是和按钮相关的，我们先添加正常的按钮显示样式。在这里我们选择鼠标离开，这个状态是指的是，鼠标不放在这个按钮上，这个按钮的状态。然后第二个参数一样的，我们填入图片的句柄。

同理，我们的按钮肯定不会只有一个状态吧？我们需要三个，一个是鼠标离开时按钮正常的显示，另一个就是鼠标在按钮上停留按钮的显示。最后一个就是鼠标下按钮的显示，同样的方法我们加载进图片来赋予他们状态。到这里一个简单的按钮三个状态就做好了，我们来调试一下。

这样子是不是美观一些

在上面的图片中，您会发现我们点击退出按钮。他没反应。我们想做的是点击这个按钮，让窗口关闭，所以说我们这个时候需要赋予这个按钮。一个特殊的属性，赋予它关闭窗口的属性。

通过设置按钮类型，我们就可以让这个按钮做到关闭窗口的效果

最后，我们再给窗口设置一个边框，我们使用蓝色的线条，线宽为2，这里我们为了不让关闭按钮，遮挡住边框。我们把按钮的位向右移动2，向上移动2。设置边框的方法和添加图片类似。

来调试，看一下结果。

本文就先到这里。

三、素材文件

点击下载