彩票走势图

GUI Design Studio创建状态切换按钮的3种方法

原创|其它|编辑:郝浩|2012-12-26 14:58:10.000|阅读 1832 次

概述:有很多种方法可以创建Normal状态和Pressed 状态的切换按钮,本文主要介绍在原型设计工具GUI Design Studio中创建切换按钮的3种方法。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

有很多种方法可以创建Normal状态和Pressed 状态的切换按钮,本文主要介绍在原型设计工具GUI Design Studio中创建切换按钮的3种方法。

方法一

本示例将使用"Replace Window"导航类型来创建一个状态切换按钮。 (该示例支持GUI Design Studio 的所有版)

1、使用Button元素创建两个按钮。第一个按钮作为代表元素。根据自己的喜好,添加文本和图标到该按钮中。我们假设第一个按钮作为正常状态下的按钮,第二个按钮作为按下状态的按钮。

GUI Design Studio创建状态切换按钮的3种方法

2、使用 "Make Connection" 工具,添加导航链接到按钮中。从正常状态下的文本链接到按钮状态的矩形链接。双击箭头,将导航类型设置为 "Replace Window"。

GUI Design Studio创建状态切换按钮的3种方法

 3、创建按下状态的文本与正常状态下矩形的链接。双击箭头,将导航类型设置为 "Replace Window"。

GUI Design Studio创建状态切换按钮的3种方法

4、建立正常状态下的矩形与按下状态下的矩形之间的链接。双击箭头,将导航类型设置为 "Replace Window"。

GUI Design Studio创建状态切换按钮的3种方法

5、建立按下状态下矩形与正常状态下矩形之间的链接。双击箭头,将导航类型设置为 "Replace Window"。

GUI Design Studio创建状态切换按钮的3种方法

方法二

本示例也使用"Replace Window" 导航类型,但是更简便一些。本示例仅支持GUI Design Studio 4.2版本或更高级版本。

1、使用Button元素创建两个按钮。第一个按钮作为代表元素。根据自己的喜好,添加文本和图标到该按钮中。我们假设第一个按钮作为正常状态下的按钮,第二个按钮作为按下状态的按钮。

GUI Design Studio创建状态切换按钮的3种方法

2、建立正常状态下的矩形与按下状态下的矩形之间的链接。双击箭头,将导航类型设置为 "Replace Window"。

GUI Design Studio创建状态切换按钮的3种方法

3、建立按下状态下矩形与正常状态下矩形之间的链接。双击箭头,将导航类型设置为 "Replace Window"。

GUI Design Studio创建状态切换按钮的3种方法

方法三

本示例使用 "Toggle Overlay"导航类型创建切换按钮,这是创建切换按钮最简单的方法。由于在本示例中使用了事件冒泡(event bubbling),所以仅支持GUI Design Studio 4.2版本或更高级版本。

1、使用Button元素创建两个按钮。第一个按钮作为代表元素。根据自己的喜好,添加文本和图标到该按钮中。我们假设第一个按钮作为正常状态下的按钮,第二个按钮作为按下状态的按钮。

GUI Design Studio创建状态切换按钮的3种方法

2、建立正常状态下的矩形与按下状态下的矩形之间的链接。双击箭头,将导航类型设置为 "Replace Window"。

GUI Design Studio创建状态切换按钮的3种方法

 


标签:原型设计

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP