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

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

作者：灰羊羊

一、本文学习内容
上一课，我们通过设计窗口的背景，以及设计按钮的三种状态。来达到美化组件美化界面的目的。您应该也发现了，我们让一个组件美化，就需要大概写六行代码。如果这个时候您的组件很多，那么代码量也会相应的增加。这对于您后期项目的维护以及代码的编写是非常不便的。所以这个时候我们就可以使用界面设计器。来减少我们的任务量。

本文使用界面设计器来实现我们在前三课中所的涉及到的界面布置，如果您还没有安装设计器，请先观看第一课的内容。

二、界面设计UI项目
首先您需要下载第一课的安装包，然后把他们解压到一个文件夹里面。如下图所示，我们点击启动点我exe，就可以启动我们的设计器了。

这个是设计器的主界面。看样子图标很多，其实并不是很麻烦。左这个是解决方案，我们用不到直接给他关掉就好

在左边解决方案，这里您可以直接右键，然后选择移除项目全部或者清理项目全部。这两种方式都可以，如果是移除的话，只是在这里不显示了。磁盘上还有这些个东西如果，如果是清理的话就删掉了。因为这部分东西对于我们做界面用处不大，所以说我们可以不用看这个。您跟着我往下做就可以了。

下面我们来新建一个自己的布局。我们左键点击文件，选择新建项目，在弹出的界面中选择界面设计，美化无代码文件。然后输入您要保存项目目名称以及位置。点击确定就可以了。同时这里您要注意，这里要选择不使用解决方案。因为我们只做界面，用不到解决方案。

这里是我们创建好的项目。首先看main.xml。这个是界面的布局，res后缀是资源文件。资源文件里保存着一些图片，字体等内容。最后一个css这个是样式文件，我们先用不到。

下面我们需要把我们的素材文件，导进来，素材文件在第三课的末尾附下载链接
右键点击项目，选择打开所在文件夹

找到项目存放的文件夹。在这里面把我们的素材文件夹复制过来。

然后我们在左侧项目中选择resource.res。点击它，在右边的窗口中。选择同步。

在弹出的窗口中选择您刚才复制的素材文件夹，点击同步

资源同步完成之后，它会在这里显示这样子，我们就把素材做好了，面我们开始做窗口。

回到我们最开始的窗口。

在窗口的空白地方右键点击，选择背景编辑器。这里就是和我们代码里面的背景管理器是一样的功能。

首先进入背景编辑器之后。点击下面这个图标所示的增加符号

在弹出的窗口选择整个窗口背景。因为我们要将背景图片覆盖整个窗口。

左键点击整个窗口，选中这个状态。然后在右边点击图片图标，在空白的编辑处释放它。如下图三所示。最后将这个点击铺满，铺满整个编辑窗口。

然后在右面点击图片右侧的三个，来选择我们需要到的图片

和原来一样，我们的15这是一个背景图，我们选中他。点确定。

做完了这一系列操作之后，需要点修改。不然的话，您的操作不会被保存下来。

修改之后，这个编辑窗口他不会自己关不闭。需要您手动把它关闭。然后看到我们的界面背景是不是换成了我们刚才的图片？记得将窗口的尺寸修改下，改成850*550。这里原来窗口的图标还带着。我们下面来把它去掉。

首先选中窗口。在窗口右边的窗口，点击齿轮符号。在弹出的窗口中，我们只要居中、拖动、边框。其他的都不要

修改完这些会发现这个界面好像没有变化，然后我们可以先点保存，再点预览，它就会刷新。

下面我们开始添加按钮。在右面这个工具箱里面找到按钮。在窗口上点击放下。我们把按钮的尺寸改为135×40。您拖动这个按钮，把它放到合适的位置上。

我们先做一个退出按钮。您可以直接把上面的按钮复制一份，然后放到合适的位置。

在下面这个按钮上右键点击背景管理器。

进入背景编辑界面。和上面操作窗口的方式一样，我们先添加状态。我们要选择三态。

我们先添加离开状态下的样子。首先鼠标选中离开。然后在右面。用操作窗口同样的方式，先点击图片。放入空白编辑处，铺满。再选择图片

其他几个状态也是这样子操作。到最后我们修改保存

保存之后发现这个按钮的上面还有文字，显得比较花。

我们选中这个按钮，在右边找到它的文本，也就是按钮标题。把他的文本去掉就好了。

我们可以用同样的方法再添加几个按钮然后给，然后给他们设计状态。我们素材里面有很多，您可以随便添加几个。

这里我随便添加了几个按钮，最终的样子，如下图所示。

预览一下

我们在前面给窗口加了个边框，现在我们在设计器里面也添加边框
右键点击窗口，选择背景编辑器。
选中整个窗口，然后在窗口上面。按照下图所示添加一个矩形，铺满

箭头指的地方，这里是边框色。另一个您可以理解为是前景色。

我们给边框的颜色选个红色，线宽为1。这样子，蓝色旁边存在一个红色边框

我们做边框肯定不能带着这么多蓝色就保存，我们西安选择前景色。然后将前景色的颜色改为透明色。透明色的位置，看下图。这样子一个边框就做好了，我们用到的是两个图层。

预览一下

三、本文到此结束。