LabVIEW程序界面的布局.doc

俗话说:“人靠衣装，佛靠金装”,应用程序的界面是提供应使用者的第一印象,直接影响到应用程序的顾客体验因此,有效、合理的界面可觉得程序增色不少LａbVIEＷ提供了丰富的界面控件供开发者选择,有经验的程序员往往可以运用这些控件做出令人夸奖的界面效果在《LａbVＩEＷ Deｖeｌopmｅnｔ Guiｄelｉneｓ》(下载)和《Tｈe　LabＶIEW Style bｏｏk》(简介)书中均有专门的章节来论述LａbＶIEW程序界面设计规范和措施本文重要从应用应用开发的角度描述某些通用的界面设计的措施1.１ 　 　控件的分类和排列在LaｂVIＥW中，控件一般被笼统地分为控制型控件(Conｔｒol）和显示型控件（Inｄicator)而对某一种具体的应用而言,更需要把Cｏｎtｒoｌ和Ｉｎdicatｏr进行细分,使得具有同样功能的控件排放在一起，甚至构成若干个Grｏup组LａbＶIEＷ提供了一系列工具供程序员排列和分布控件的位置以及调节控件的大小，如图 1所示图(a)是排列对齐工具,其中的图标可以很清晰地懂得各个按钮的作用使用Ctｒl+Shift＋A可以反复上一次的排列方式图（b)是位置分布工具，可以迅速地分布各个控件之间的位置。

图(c)是大小调节工具，可以迅速地调节多种不同控件的大小（注意：部分控件的大小是不容许被调节的)图(d)是组合和叠放顺序工具，Group表达把目前选择的控件组合起来形成一种整体；Uｎgroup与Groｕｐ相反,表达分散已经整合起来的各个控件；Lock表达锁定目前选择的控件,此时控件将无法被编辑（涉及移动控件的位置,调节控件的大小等）；Unlｏｃk是解锁指令；Move Ｆｏrwａｒd、Move Ｂackｗard、Move ｔo　Fｒonｔ和Mｏｖｅ　ｔｏ Baｃk表达修改目前选择控件的排放顺序 1　控件排列和分布工具图 2是某个测试界面的控件摆放实例,尽管这些控件都是Iｎdicａtor控件，但是仍然根据显示功能和内容的不同将控件进行了分类如果将其中的信息不通过任何分类而直接摆放在一起，则没有较好的条理性和层次性 2 控件摆放实例在实际应用中，需要一方面将Control和Inｄicator分开摆放;然后在Contｒｏｌ和Inｄicａtor内部对控件按照功能进行分类，不同的类别之间以明显的标志进行辨别;最后要合理安排控件的位置和分布，保证整个界面匀称和整洁１.2 　　　 颜色的使用颜色在程序中的应用有多种功能，除了可以保证界面的丰富和完善之外，还可以重点辨别不同控件的功能，强调某些控件的作用和位置。

LabVIＥＷ提供了老式的取色工具和着色工具，如图 3所示取色工具是获取LabVＩＥＷ开发环境中某个点的颜色值(涉及前景色和背景色),并将获取的颜色设立为目前的颜色着色工具是将目前的颜色值(涉及前景色和背景色）设立到某个控件上3取色工具和着色工具【小技巧】(1） 　在使用着色工具时,按住Cｔrl键可以将工具临时切换成取色工具,释放Ｃtrl键后将返回着色工具2) 在使用着色工具时，使用“空格”键可以迅速地在前景色和背景色之间切换在着色工具中，右上角的“T”表达透明色,可以使用鼠标单击该图标设定目前的颜色为透明色，如图　4所示此外，LabVIEW还提供了一系列预定义的原则颜色供程序员选择，其中Ｓysｔem的第一种颜色是Wiｎｄows的原则界面颜色 4　着色工具面板ＬaｂVＩEW容许设立一种VI窗口的透明色,在VI Prｏpeｒty对话框中选择Wiｎｄoｗs Appearａnｃe页,单击Cuｓtｏmize…按钮将弹出如图　５所示的对话框勾选“Ｗｉｎｄows rｕnｓ ｔransparently”选项，并设立透明度（0％~100%） ５ Cuｓtｏmize Windｏws Aｐpｅaraｎcｅ对话框１.3　 LaｂVIＥＷ控件在LａbＶIEW中有3种不同外观的控件可供选择，分别是：Mｏderｎ、Sysｔｅm和Cｌassic。

其中Ｍodｅrn控件是NI专门为ＬａbVIEW设计的具有３D效果的控件，它可以保证在不同的操作系统下显示始终是同样的;而System是采用系统控件，它的外观与操作系统有关，不同的操作系统下控件的显示外观有所不同大多数的程序员似乎更乐意选择System控件,理由是它可以让程序看起来不那么ＬabVＩEW化但是LａｂVＩEW并不容许程序员任意自定义System控件的外观,这同步也限制了Ｓyｓteｍ控件的使用LabＶIEW容许程序员在既有控件的基本上重新定义控件的外观（Type Dｅｆ.和Ｓtricｔ Ｔype Def．技术）图 ６是使用控件自定义措施重新设计的Tanｋ控件，程序员可以修改控件的多种显示体现方式，但是却不能修改控件的功能（可以使用XControｌ技术) 6 Ｔanｋ控件1.4 　 插入图片和装饰程序中必要的图片不仅可以给顾客直观的视觉感受,还可以描述程序的作用（固然,不能使用过量的图片)最简朴的插入图片的方式是：将准备好的图片直接拖入到VI的前面板中或者使用Ctrl ＋Ｃ/V粘贴到前面板中固然，还可以使用Ｐicｔure控件将图片动态地载入到Picture控件中此外，ＬａbVIEW还提供了一种自定义程序背景图的方式。

新建一种ＶI，在ＶI的垂直滚动条或水平滚动条上右击将弹出如图 7所示的快捷菜单 ７ VＩ前面板快捷菜单选择Properｔiｅs，将弹出如图 8所示的Ｐａne Properｔiｅs对话框在左下方的Bacｋgrouｎd区域中内置了部分的图片供程序员选择，也可以使用Bｒowｓe…按钮导入外部自定义的图片注意】如果需要导入不规则的图片，可以将图片的部分背景色设立为透明并保存为pｎg的格式 8　Pａne Ｐrｏｐertieｓ对话框在Cｏntrols>>Mｏdern>>Decorａtiｏｎs和Cｏntrｏlｓ>＞Ｓysｔeｍ中有某些装饰用控件,如图 9所示,程序员可以使用这些装饰控件为应用程序增色图 10就是采用Sｙsｔem控件中的Sｙstem Rｅcessed Framｅ和System Ｌaｂel控件设计的控件组合　９　装饰控件选板　10 装饰控件实例1．5 界面分隔和自定义窗口大小控件的显示效果与监视器是密切有关的，因此在程序设计时需要考虑目的监视器的颜色、辨别率等因素,并明确运营该应用程序所需要的最低硬件规定在诸多的论坛中常常会看到问题:如何才干保证应用程序的界面在更高的辨别率上运营时不会变形?这事实上是一种界面设计问题,而思考如何解决它却是应当从程序设计时就开始,而不是等到程序设计完毕后再探讨解决方案。

LabVIEW中并没有提供一种有效的方式或工具来解决这个问题,但是我个人觉得这与LaｂＶＩEW无关，更应当把它归纳为通用的程序设计问题，解决它需要比较良好的界面设计、布局和分派作为前提事实上,程序往往会规定一种最低的运营辨别率,在此辨别率以上的显示屏上程序界面应当可以对的地被显示出来而在LabＶＩＥW中，控件往往在高辨别率的显示屏上被拉大或者留有部分的空白，这使得整个界面完全扭曲了程序员最初的设计为了可以更加清晰问题的本质和谋求解决问题的方案,有必要对ＬａbVIEＷ的前面板界面进行确认和分析如图　１1所示，一种ＶI的窗口由几种部分构成:整个红色的区域称为一种窗口（Windows)，而蓝色的区域称为一种面板（Ｐanel)从图中可以看出，窗口中的标题栏、菜单栏和工具栏并不属于面板 1１ VI窗口区域定义ＬabVIEＷ容许程序员将面板(Panel）划分为若干个独立的窗格(Pａｎe）使用Controls>＞Modeｒｎ>>Cｏnｔainｅrs选板中的Horizontaｌ Sｐlｉtｔｅr Bar和Verｔical　Spｌitteｒ Ｂａr可以将ＶI的面板进行任意的划分,如图　1２所示　12 Ｃoｎtainerｓ选板划分之后的VI前面板如图 1３所示，可以看出图中的Panel（蓝色区域）已经被划分为了５个窗格Pane,每一种绿色区域都被称为一种Ｐanｅ。

当Pａnｅｌ上只有一种Pane时，Paｎeｌ与Pａne会重叠因此,窗口(Ｗindｏws）涉及整个界面，而1个窗口只有１个面板(Pａnel），该面板可以被划分为若干个独立的窗格（Panｅ）每个Pane都涉及其特有的属性和滚动条，而Panｅ之间使用Sｐliｔｔer进行分隔 １3　划分之后的ＶI窗口定义在Ｓplitteｒ上右击可以设立Ｓplitter的有关属性，如图 1４所示Locked属性可以设立Splitter与否被锁定,被锁定的Splitter的位置将无法被移动与控件类似,LabＶIＥW提供了3种Splitter样式:Ｍodern、Systeｍ和Classic程序员可以使用着色工具设立Ｍodern和Claｓsｉc Ｓpｌitter的颜色,使用手型工具调节Spｌitter的位置以及使用选择工具调节Sｐlｉtｔer的大小14 Ｓplｉttｅｒ右键快捷菜单目前再回头看本小节开头提到的辨别率问题，从常识上判断,当程序从低辨别率界面向高辨别率界面转移时,可以有如下的解决方案：1、 界面上的控件变大；2、　界面控件的位置重新分布,以平衡空白位；3、　界面控件的相对位置不动,留出合适的空白位在实际操作中,上述的3种方式似乎很难实现以满足界面大小变化带来的自适应问题。

例如第3种方式看似简朴,却同样存在着疑问:应当在哪里留出空白位,是既有控件的左边？右边？上边？还是下边？打开某些原则的Windowｓ界面程序，不难看出，往往程序中结合使用了上面的３种方式部分的控件位置和大小不变，留出合适的空白位给其他的控件,如Listbｏx、Grapｈ、Ｔree等因此此类控件显示的信息较多,并且外观单一,变化它们的大小对整个界面的布局不会产生影响因此,在程序开始设计的初级阶段就有必要设计界面的大体控件布局和分布,以明确界面在不同辨别率下的调节方式如果界面控件过多,则可以通过其他的方式进行规避（例如对话框等)，保证界面的大小调节不会影响到控件布局的变化应用(下载）】本节将以一种原则的Ｗiｎdｏｗs测试界面为例阐明界面设计的方式和环节一方面,需要根据程序的功能划分ＶI的Ｐaｎｅl，并决定将其分为多少个Paｎe图　１5将界面分为了8个Pａne，依次为：工具栏、协助栏、测试信息栏、波形采集栏、状态栏（登陆人员栏、阐明栏、测试内容栏和测试时间栏）　15 划分Paｎeｌ另一方面，在状态栏的四个区域中分别加入一种Striｎｇ型Ｉｎdicａtor,并且勾选Indiｃator的右键快捷菜单选项:Fｉt Conｔｒoｌ to Pane,也就是说当Ｐane变化的时候Strｉng的大小也随之发生变化以保证Sｔｒing控件可以填充整个Ｐane，如图 16所示。

16　在状态栏中加入Inｄicatｏr控件单击窗口的最大化按钮，可以看出整个状态栏的高度变大而最右侧子状态栏的宽度变大，如图 17所示 １7 最大化之后的状态栏事实上,当窗口(或者Ｐaｎe）大小发生变化时往往不但愿状态栏的高度发生变化,而只需要变化其中某一种Pａne的长度就可以了单击“还原”按钮，使窗口回到图 16所示的状态在底部的蓝色Splｉtｔer上右击，选择快捷菜单中的Splｉｔteｒ Stick Bottｏm选项，如图　18所示该选项表达在Splittｅｒ变化时始终保持底部的相对位置不变 1８ Ｓｐlitｔer右键快捷菜单再次最大化窗口,此时状态栏的高度将保持不变，而最右侧的子状态栏的宽度将变大，如图　19所示 １９ 最大化之后的状态栏如果但愿在。