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

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

作者：灰羊羊
一、本文学习内容
    本文我们来做一个选项卡，他的功能类似在MFC界面支持库里面的选择夹。
    本文是一个过渡文章，我们在本文里面做出选项卡了之后，下一节我们就要学习关于列表以及模板的操作。因为我们需要好几个布局，而我们的窗口又比较小，所以这里我们需要用到选项卡。下面让我们一起来学习。
二、界面设计UI流程
首先我们要打开我们以前用到的炫彩设计器项目。
我们以前做了很多的组件，现在我们要将这几个标签删除掉，只留编辑框和我们设置的按钮。
对于标签来说，我们只是设置了它的字体，而对于编辑框和按钮我们设计的比较多，为了防止以后有用到的候。所以说我们现在保留他们，为了使他们不碍事儿，我们把它放界面最上面的位置。

这里如果您的账号小图标组件，没有在编辑框的里面。就是说这个小图标的父组件不是编辑框，而是窗口的话。
那么我们调整一下，把这个账号小图标组件拖动布局层次，让他的父组件变为编辑框。布局层次的改变方法，我们在前面课程中讲过了。
这样子，我们的拖动整个编辑框的时候，它里面的子组件也会跟着一起拖动。就不会出现动一下，布局就乱掉的问题。

下面我们把杂七杂八的组件清理掉之后，我们来在窗口上放着一个基础元素，我们用它做选项卡。
我们的思路是比：我们点击第一个按钮之后。让一个基础元素的布局显示出来，然后点击第二个按钮的时候，第二个基础元素的布局显示出来。以此可以达到做一个选择夹或者选项卡的效果。我们需要考虑的是我们有按钮，就需要多少个基础元素。退出按钮不考虑。
我们这里计划着先做四个，所以说这样子的基础元素我们需要放置四个。
下面我们这里先放置一个。

下面我们就需要对这个基础元素进行背景管理的编辑了。
我们为了好看，要把这个基础元素的背景色改为和窗口背景色是一样的。
这个时候我们有四个基础元素的组件，背景是一样的颜色，我们如果一一来设置他们的背景色的话，是件挺麻烦的事情。
所以下面我们来创建一个背景资源，我们创建好背景资源之后，相同类型的组件可以一键引用背景资源。
下面按照步骤，我们先在设计器里面进入资源文件的视图。中间位置找到背景资源，然后点击添加。

在弹出的窗口中，对象类型，我们选择基础元素，这里您可能要问了，不认识英文怎么办？很简单，我们在窗口布局的时候，左边有一个导航，可以看一下组件的英文名。
记住英文名字，然后在这里选择就可以。

选择完类型之后，您可以在描述这里写一个备注。最后点击确认就可以了。

保存完后，我们可以看到我们创建的背景资源了。
我们选择我们创建的背景，然后点击编辑背景。这样的就会弹出我们常见的背景编辑器，在这里我们对它进行设置。

这里首先添加一个组件离开的状态。选择矩形元素，铺满。

我们在颜色里面选择添加颜色。添加一个和窗口布局内容一样的颜色。

应用颜色，保存，修改，关闭编辑窗口。这样子一个基础元素的背景就做好了

在我们的窗口布局区。选中基础元素，在右边的属性栏里面找到背景信息。按下图操作。

这样子我们就应用上基础元素背景信息了。由于我们的组件背景和窗口的背景是一个颜色，所以这里我们只能通过一个边框来区别他们。

我们通过调整它的长度和高度，以及左侧坐标的位置。来使得这个基础元素完整的布置在窗口布局区域
同时设置它的ID为101，设置他的名称为布局_用户中心。这里我们给他设置ID为101之后，在左侧的导航位置可以明显的看到有一个数字，101。通过ID号就可以知道这是哪一个组件了

下面我们再放置一个基础元素，注意不要将第二个基础元素放置在第一个的组件内，他们是平级的关系而不是父子的关系。

我们给第二个基础元素取名为 布局_会员权益，ID为102，在背景信息里面套用我们创建的背景。
在左边文档大纲这个导航里面，此时我们的ID102的组件在101的上面，下面101被覆盖不显示。

这里我们需要注意，如果我们想显示101，那就把它上面的这个组件102的眼睛点掉。
这里只是在设计器里使用的，如果打包之后，用火山加载，这个组件102还是会显示出来。
我们在设计界面的时候，如果用到了这种多层覆盖的方法
那么就可以使用这种方法，让一个组件先不显示，我们来设置它下面的组件

或者是在右面属性这个里面可以有一个显示属性。如果我们把它设置为假，那么我们选中的组件就不会显示出来。设计的时候不显示以及使用火山加载时候也不显示。
这里我们选择上面那个把眼睛点掉的方法。

按照上面的方法，我们再放置两个基础元素。并且把他们的背景以及坐标设置好。
这两个基础元素的ID分别为103和104。他们的名称分别为布局_定位功能，布局_应用列表
这样子我们就得到四个选项卡了。
由于我们这四个组件的背景颜色和窗口是一样子的。我们不容易区分。所以，您可以在每一个布局上放置一个形状文本或者其他可以标识用的组件，这里就不演示了
保存修改，打包项目。下面我们用火山项目来加载他们。

使用火山加载调试之后，我们点这个设置按钮，让右边隐藏的布局弹出来。这个时候发现按钮移动了，右边的布局没有出来，这个颜色还是窗口的颜色，我们设置的布局颜色是白色。
出现这个的原因是因为我们在窗口区域上放置了四个基础元素。他们在我们原有的布局层次上面，他们覆盖着，下面的布局弹出来您也看不到。

来这里看一下层次图，发现新来的四个在原来的上面。这样子导致我们下面的布局弹出来，但是不会显示。

解决的方法是我们让这一个组件置顶就可以了。这样子无论有多少个组件覆盖，他永远是在最上面。

做好之后，我们重新打包项目。然后用火山加载。
可以看到，这次显示正常了。

我们的火山项目里新建四个基础元素的变量，命名如下。这里按钮应用列表，这里命名出错，应该是应用中心。我们前面没有用的这个按钮，所以没有注意。

然后我们来获取设计器里面的组件句柄。
这里我们可以通过ID获取，也可以通过名称获取两种方法。
如果是ID的话，我们给他定义的ID是 101，102一直到104。

下面我们需要让这四个基础元素的布局和四个按钮组成选项卡功能。
首先我们返回设计器，在这里面，我们统一给这四个按钮。用名称的方式来命名。
我们以前有的是用ID或者是uid的方式来命令，这里我们为了方便统一来。比如应用中心，这里我们就给他命名为按钮_应用中心，其他的类似。

在火山里面更新这部分代码。并且给他们注册按钮点击的功能。

按钮点击事件里面把我们原来的通知信息给删掉，我们现在要在这里面写新的内容。

首先思考一下，我们要点击用户中心的时候，要弹出用户中心的基础元素布局。点击会员权益的时候，要弹出会员权益的基础元素布局。
要实现这个功能，我们有两种方法。最简单的我们可以在点击按钮用户中心后，让其余三个基础元素的可视变为假，让他们不显示。这样子就只剩下我们的用户中心基础元素的显示。
这里，我每一个布局上都放置一个形状文本，用于标识。
到这里我们在左边点击按钮，右边的布局按道理说应该跟着变化。写到这里会出现一个问题，我们在左边点击按钮之后，右边的布局不会马上变。而是在鼠标点击之后再变化，下面看GIF

出现这个问题的原因是窗口没有马上绘制。
我们可以使用窗口重绘指定区域，让我们的布局立刻刷新，完整代码如下

调试运行一下

三、本文到这里结束