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

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

作者：灰羊羊
一、本文学习内容
    上一课，我们简单的学习使用火山加载布局文件。
    本文我们来学习炫彩字体方面的知识，字体在所有界面里面都是一块很重要的，下面一起来看看炫彩的字体，本文会介绍炫彩默认的字体，内置的字体，以及加载外部字体文件的方法
    
二、界面设计UI流程
我们打开上节课的设计器项目，这几节课用到的都是都一个炫彩项目，就是为了方便您在学习的时候不用再创建新的项目，同时，您需要按照课程一步步来，我不再提供源项目以及代码。但是，必备的素材文件我会上传，这一点请您放心
这是我们上一节课的项目截图

我们使用形状文本这个组件，在右边选择形状文本。在左边窗口上放置4个。形状文本相当于标签，这里我们放置了四个标签

我们按住CTRL键，鼠标依次点击形状文本组件

在上面选择左对齐，此时会以第一个选中的组件为基准，对齐。这里我们第一个选择的组件是最上面的形状文本

对齐之后，效果如下图，同时，我们还可以点击其他按钮来使实现等高，等宽之类的功能。

我们开始新建字体，这里我们先使用设计器内置的字体。按下图操作，进入资源视图，点击添加按钮

添加字体后，双击字体，进入设置字体，这里可以改变字体的名称，设计器内置一部分字体，比如说宋体，楷体，雅黑等等，基本上常见的字体都可以在这里看到。同时我们还可以改变字体的大小

添加字体的方法比较简单，这里我们添加三个字体，分别设置为宋体，楷体，雅黑。字号大小设置为12号

我们在设计器上应用字体。选中第一个形状文本，点击右边字体属性齿轮。在弹出的窗口上，选择我们设置好的宋体，确定。
使用相同的方法，我们将其他两个形状文本也设置上字体，最后一个形状文本。我们保持默认，不设置字体。

设置好后字体如下图所示

在设计器里面预览一下界面，可以明显的看到，这几个文本的字体不同

下面，我们将设计器的项目打包。在这里再说一下打包的流程。首先点击打包图标，在弹出的窗口中选择保存位置。

然后将打包后的压缩包，通过火山的视窗文件资源加载进来。如果这里您不清楚，请先浏览以前的课程。这里附带一张火山项目的代码图，这一份代码在最近的几课程中并没有修改。

在火山里面调试运行。在这里我们看到前面的三个形状文本字体都发生了改变。这是使用设计器里面内置的字体。计器里面的字体都可以使用代码来创建。
下面我们使用代码来创建一个我们的字体。

在这里我们创建一个字体变量，类型为炫彩字体。在下图中我们可以看到这一个字体下面使用创建，可以有这么些函数。下面我们来介绍几个常用的。

首先创建函数，这里只有一个参数，就是大小，他这意思是使用默认字体来创建一个指定大小的字体。比如说您的默认字体微软雅黑。在这里指定大小为12。那么他就会创建一个微软雅黑字号为12的字体返回。

创建扩展这里您可以指定自己的名称，大小以及风格。这个名称是您可以在炫彩设计器里面看到的字体

比如说我想创建一个宋体。字号为14号。那么就用。  字体.创建扩展 (“宋体”, 14, 字体风格.正常)     
如果您想创建一个字体，但是这个字体在设计器里面看不到。那么就不能使用这种方法。

字体创建从文件，可以从您电脑上本地的文件里面创建字体。字体的文件是TTF格式的。

假设我有我的电脑c盘根目录下有一个阿里惠普体.ttf。那我就可以使用。 字体.创建从文件 (“C:\\阿里惠普体.ttf”, 12, 字体风格.正常)   来创建一个惠普体字体

从内存创建和从字节集创建是差不多的意思。这里我下面演示的时候会说。

下面回到我们的设计器，我们要给这些标签取名字。因为如果没有名字的话，我们无法在火山中找到这些个组件的句柄。就无法操作他们了。
我给第一个形状文本取名text1。然后按照这个命名顺序往下依次是text2、text3、text4。
取好名字之后，我们再将这个项目保存打包一下。每次更改的时候都要重新保存在打包，因为要更新那个压缩包，压缩包在火山里面被加载。然后根据布局创建窗口。

回到火山项目。我们创建一个变量Text4，类型为形状文本。
这里我们只需要一个，我们的计划是操作一个标签。在设计器里面，我们对第四个标签并没有给他嗯。字体。而是使它保持默认。
这里虽然我们在设计器里面对这四个标签都命名了。但是我们只操作一个就好了，其他的不用管。并不是一定说是设置了名称就得在火山里面获取它的句柄。

我们通过最后一个形状文本的名称来获取组件句柄

下面我们创建扩展，创建一个宋体。字号为16，风格正常的。然后我们使用  Text.字体  ，这是一个写方法，发现这个参数是一个变整数，那么我们将字体的句柄传过去就可以了

这样子就可以了，下面我们来调试火山项目

我们在设计器里面将第一个标签设置为宋体12号。我们在代码里面将最后一个标签使用字体创建扩展的方法。设置为宋体16号。

下面我们来演示创建字体从内存中，并且我们将炫彩的默认字体替换掉。
首先要删除上一张图片中用红框圈起来的这三行代码。让最后一个标签的字体保持默认状态。如果您看过前面的几节课课的时候，你应该也发现了，我们前面没有字体的操作。我们上面一个编辑框。他的字体也是默认的，我们没有给他设置字体。注意这里一会儿用得到。
我们创建一个视窗文件资源的变量。加载一个字体文件，这个字体素材。我在本文的末会上传。

我们要创建一个字节集变量，使用 文件资源到字节集（）。为了是把我们视窗资源里面的字体取出来。放到变量里面。然后我们使用字体创建从字节集。来创建我们需要的这个普惠体。最后我们使用一个函数叫做 炫彩_置默认字体（） 把我们的默认的字体给换成我们的惠普体。
这几个函数都比较简单，他们没有难复杂的参数，所以说这里就不展开了。另外在这里说一下，我们把默认的字体给换成我们自己的惠普体。那么说在设计器里面所有没有设置字体的组件的字体都会变成我们这个惠普体。您可以理解为就是可以批量设置一部分组件字体，这是比较方便的。下面我们来给一张完整的截图，因为就这样的局部截图您看不到这个代码是在哪个位置上写的。

下面我们来调试运行一下。我们的第四个标签字体已经变成了我们的惠普体。然上面那个没有设置字体的编辑框。他的字体也变成了惠普体。

三、本文就先到这里，关于学习。看文章看百遍，不如您自己按照这个流程走一遍来的实在。所以本课程不提供一些简单源码，只提供一些重要的素材。到最后，我会提供本课程的成品。中间这些个步骤，需要您按照每一课来慢慢的学。祝您学习愉快。
字体文件下载