29.Labview界面设计 --- (下篇)自定义控件库、界面布局与外观设计

摘要： 题主在上一篇文章中向大家讲解了前面板逻辑框架及结构的搭建和控件的类型介绍，那么本章主要围绕前面板的控件布局以及控件的自定义类型和背景等外观优化项中来讲解。

本文程序及更多福利资源请关注微信公众号：“软件领航站”

---

本篇文章讲解界面设计的下篇内容，上篇内容链接大家可以直接点击链接查看：
28.Labview界面设计(上篇) — 软件登陆界面设计与控件美化

1.自定义控件外观(自定义控件)

本节第一部分教大家安装一种可以直接用的自定义控件库，第二部分教大家如何自己设计控件并保存调用。

1.1 自定义外观库

这个就相当于Labview支持的一种工具包，可直接安装在Labview中，使用很方便，安装后直接在前面板单击右键即可使用，如下图所示：
这是布尔类型的控件类型：

这是一部分其他自定义类型的控件：

其中大概有几百种控件可以供大家选择使用，大家有需求的可以看下面安装步骤，那么如何安装呢？

1. 先在网盘保存题主分享的文件，保存下载方式如下：

直接使用夸克App或微信扫描下面二维码保存该文件夹：

2. 打开文件夹可以看到如下几个文件，前八个是自定义控件库，倒数第二个是VIPM安装包，最后一个是说明文件。

3. 直接右键一个自定义控件库文件(前八个中的一个)，打开安装包。(这里需要注意，这些安装包是在Labview自带的VIPM中安装的，一般安装了Labview的都会有，如果没有的话在网盘文件夹中打开VIPM的安装包安装即可。)
   

4. 在弹出的界面中按图片中选择对应自己的Labview版本并点击“install”。

5. 等待进度条加载完成后，单击同意。

6. 单击Finish就完成安装了，其他几个以同样方式安装，然后在Labview前面板就可以打开使用啦。

7. 前面板调用这些控件的方式如下GIF所示：
   
   大家根据自己的需求自行安装即可啦~

1.2 手动自定义控件外观

这一部分就是如何自己设计自定义的控件了，自由度比较高。这里介绍一个布尔量的例子，大家可以直接按照例子做就知道如何设计了。
首先在前面板随便建立一个布尔控件，然后右键点击后选择 “制作自定义类型”。

可以看到后面板控件左上角出现了一个黑色小箭头，这个时候就表明该控件是自定义设计的，然后对控件点击“打开自定义类型”。

这时会弹出一个没有后面板的VI，将这个VI保存在一个文件夹中并命名，因为设计完后续我们可以在任何VI随时调用该.Ctl控件，将控件设置为严格自定义类型，这样能保证当我们更改这个控件时任何使用了这个控件的VI都会更新这个控件。

我们把想要设计的外观图片从下面方式导入，题主导入了一个绿色箭头的图标：

导入之后，右键我们想要设计的控件，点击剪贴板导入：

此时我们就可以看到我们的控件变为了下面这种样子：

我们把这个控件保存后，在其他VI中就可以调用啦，调用方式如下，后面板点击鼠标右键，点击“选择VI”，将我们的控件选中就好了，控件就会出现在前面板上。

自定义控件在路径下是这样的，可以看到他的后缀并不是vi，而是ctl。

2. 前面板控件布局方式(控件排布)

2.1 模块化控制布局方式

按照模块化布局前面板的方式适合模块化控制的程序界面，比如一个界面控制了万用表、示波器、电流源等的多个模块，那么在同一个面板中，就可以将这几个不同仪器的操作控件按照各自的模块来布局。
下面讲个特定的例子如下图所示：

第一个例子是一个虚拟示波器系统，该界面讲示波器系统分为了两个不同的模块，左侧为显示模块，右侧为操作模块， 将操作模块按照显示和操作模块分类的是比较常见的，一是显示占比比较大，有利于用户及时查看数据，二是操作按钮置于右侧便于操作，同时类似于示波器的操作界面排布，比较美观。

第二个排布的例子就是使用选项卡控件，同时在该界面中，将时域频域波形信号显示在上方，并在下方显示数据及输入操作，这种模块式的也有利于用户进行操作。

2.2 数据采集布局方式

相较于模块化布局的方式，本文还建议一种数据采集常用的数据管理程序界面，这种往往依赖于很少的执行操作按钮和选项，更多的是对数据的显示和处理，前面板主要提供一个树状分支控件和列表控件。
题主做了一个较为简单的数据采集系统界面，大家可以作为参考，一般数据采集的显示区域为下方且占据空间较大，左侧为树状图区域，便于用户选取想要查看的数据区域，上方为操作区域，点击运行后后面板执行自动采集逻辑。

3. 前面板外观优化项(背景设计)

这里主要讲一些其他的技巧。

3.1 前面板背景设计

背景设计一方面可以使用软件提供的修饰控件，另一种就是粘贴图片。

1. 修饰控件
   修饰控件就是直线，修饰盒子这些，直线一般用于分割显示模块，平面盒子一般置于控件下面用于修饰。
   

这里需要讲一点：
①如果平面盒子覆盖住了控件，可以选中盒子并点击“移至后面”，就可以显示被覆盖的控件了。
②如果修饰盒子一直跑，大家可以选中后点击“锁定”来固定该界面。

2. 自定义背景图
   这个比较简单，我们直接复制一张图片在前面板粘贴就好，粘贴完成后如上节设计的界面，直接拖动下方的蓝色小方块即可调整图片位置，该图片和上面平面和一样，也可以锁定和移至前面。

3.2 前面板窗口整理

包括前面板运行时是否可关闭啊，是否可停止运行啊等。
直接在前面板 “文件 — VI属性” 中打开即可，下拉窗口外观。

单击自定义。

然后点击进入后就可以进行相关设计啦~

那么本节界面设计相关的文章就到这里了，大家觉得有用的话可以看看题主其他主页文章，都能帮到大家哈。本人所有文章均为免费，且为原创，禁止抄袭。

本文程序及更多福利资源请关注微信公众号：“软件领航站”

---