GUIDesignStudio教程.doc

如何制作界面图在实际开发中，我们常常会用很多工具，绘制界面图用于描述我们的产品的某个功能对应的界面，将来会是什么样子可以使用的工具很多（visio、smartdraw等），也有用excel画框图，来标明程序的各个区域的其实使用guidesignstudio，可以很容易的话界面图不仅轻松，而且十分的真实，既获得一个很好的效果，也能减少沟通上的一些不便不仅可以向非开发人员展示，也可以向开发人员展示你的设计1. 新建设计CtrlfH0*0".CtrUO2嘛回5S：直里零/C诚©£1診J,a廿IH国£»r.5«r(-豪矍..S«7tAllCtrDSCtrL+^Shift+SBsllr^LklIlsAF』・.I^ta.ar^l^tDociUifiDLtia'fel«ti..Mef>L».Et«rrtjitciL...Of"阿町砧…CIqI*7>$jiiSXFrint..ClrL*TPrintfrwihrlslStltf..JiIqsEtKtfitFr^j^atsPv-iKn£4£...BxitxJ血何byIrMigswiehelwi.出砒designs,AnndlJiewgik.皿很lia）加占淞Iqii彷*gn妙drawingMpeiHleiTipalhgtdndlpRJnt*idimda白I包特.etoGUIDesignStudioRunnoM]piottMv口皀・WhsA-jftjVurt'4dtsiyi-Rd总帥s刑[th曲w^lhihegtvit4*n〕t$加in«访如youc-armt罪urxt確刖edi'andtiheic-sriTofc.jm«nthtkonbuttons4aruivigtfEbehAHen铤营內或ing巧.SfltbnigStnliivdT#冲ib#T“鼻詡hornlh»蚀％8召躋Imbai曲hrwHtdtheheAluetdiWliltilM侍Yw测?au詰5Mg4ve嗨ol[辽加io哼ndclw««toshowdihideIhem45youwnk.Thenspenlhes-ample-piDfeds亦ssehawttwyhawebftempj：to簟i.berandleadb-eH*manualtolednaixdtW(K4打开guidesignstudio，其默认会打开welcome工程。

由于我们只是做一个界面效果图，所以不会用到工程那一块的功能我们就直接使用File菜单下的new菜单项（CTRL+N）新建一个设计2. 添加界面控件凶刿輛晅捷瞽I和讦驾有遍圈罢新I卸恢也m釦冒惓一败古或嗣谨68超叨zi口口rm口srmmSJC&nlrolltrsDe-siget毎idiFruitsutdlD'ivid.4iF3Indi?!&-<.oreundEQiQfs;Hi£(£_>.Tte电苦andTobises昔通按齟滚动条设计舸僭冻尺和追農OptiMttetieclbOK範「日tJioboKRibiwtoffice?0071X1^T命土赫签面板T«plUlj.KdltEdWFqiT^olbu-su4Mmus工具条和蓋里牡b钱框图ffiikdow&ajsddialogsf・Q「.'〔；込迪罔嗇以占;•』層］"FwbHn-e*4m:戸产怔/i-MSE稻严：…匚滋丽叫可爾Jd右边的面板叫设计器面板，它由多个页签构成分别对应的功能是：工程面板、元素面板、图标面板、注释面板、故事板、备注面板而我们要用的是第二个面板"元素面板"在这个面板上分为上下两部分，上部分是一个分类列表，下部分为各个分类下的元素。

当你选择一个分类后，下面的面板就会显示该分类的元素要将元素添加到设计文档中，有两种方法1）用鼠标双击要加入的元素；2）用鼠标单选要加入的元素，不要放鼠标左键，将对应的元素拖拉到文档中屏磁主元耋标志线整个设计文档中间有一个红色线条围成的矩形，这个区域代表屏幕区域在这个区域里的元素，在模拟器运行中将显示在屏幕中，对于不在这个区域的元素将不会显示那么其他区域到底放什么呢，主要是放置在作为事件等动作，触发后被切换进入屏幕区的元素我们拖拉一个窗体作为整个设计的开始，你会发现这个窗体边缘有淡淡的绿色这个绿色表示是整个设计的主元素，默认的情况studio认为第一个就是主元素当然你也可以使用F10或使用右键菜单来指明主元素（此时淡绿色会变为深绿色）主元素是模拟器作为显示的起始元素，也是当该设计作为其他设计文档的组件时候，展现的起始元素如下图所示：EpazaEvenlyMakeSaneSizeLaysar•2J=j；ElunjdA^pliScreenCsht&s5l..FltScraortCaitvastoELhwAnIsSetRepresentalireELflm-ftntHOCLs-*yRe-fre-sfiLaLiAidBitmapa…AidleoTi....AidConYpcnentS*cr«tn».AidFroptriiti...AlHEn<*r好了我们模拟一个制作一个登录界面。

双击拖出的主窗体，则会弹出属性编辑器（所有的设计元素，双击后都会弹出属性窗体,当然你也可以选择点右键菜单来完成该工作），我们输入“xxxx协同办公系统”，其它属性不用修改依此类推，我们放入标签和文本输入窗，来完成用户名和密码最后加入一个按钮,将它的文本改成登录效果如下：3. 添加图标登录按钮看上去比较平淡，一般的程序在按钮旁都有图标的所以我们也想加入图标这里我们直接使用studio自带的图标我们选择设计面板的第三个页签（lcons）,这个页签主要是上中下三部分构成，上部分是分类列表，中间是过滤条件（可以通过文件大小和颜色深度来过滤），下部分则是图标列表我们选择toolbar类别在里面拖一个人物图标出来二JWld£EtS0jCjBl2□0EKGX&©10.An口“裁DtptT*llvacMc_|DaetUi4itH」血SCElltr«0U5L□£Toal^w-s0®区3*.在图标列表上方有个工具条，分别是“新建图标、编辑图标、刷新列表、和删除图标”也就是说我们在这里可以维护这个图标库，可以通过studio提供的工具，自己来加入图标和修改现有的图标4. 重用已有程序的界面元素其实我们很多的设计都不是白手起家,一般的情况都是修改原有的界面或基于原有的界面做改进。

那么从新使用studio,一个一个元素的拖拉和摆放还原原先的界面的话，工作量是惊人的，细节调整工是巨大的有没有什么好的方法重用原有的界面呢？答案是有！最好的方式就是截图在这里有三种方法使用屏幕截图，第一种：使用截图软件先将图截好，然后通过design菜单下的addBitmap菜单命令，完成图片的插入第二种方法：将截后的图片放在工程目录下，然后直接拖动出来第三种：现截现用，就是截完图后，使用工程面板下的pasteimgfromclipboard命令，存放在工程目录下，然后拖动到设计中我这里演示的是拷贝的左边背景图，其它界面是类似的，只要先前规划好界面大小即可5. 导出图片当我们的界面设计好后，要放入设计文档中，此时我们可以将我们先前制作的gui文档,导出成图片，然后就可以插入到设计文档中了打开设计好的gui文档，选择File下的Export菜单项在弹出来的导出窗体，选择导出路径及文件名studio支持导出的格式有：BMP、GIF、JPG、PNG、EMF这些在制作文档方面是够用了总结到此我们就利用guidesignstudio完成了界面图的制作，做界面效果图基本上不用总是麻烦美工了，而且也是十分的快速和具有比较真实的效果。

这些也只是利用到了guidesignstudio的一些皮毛功能。