Axure新手养成计划(连载26)

Axure书籍 小楼一夜听春语 12232℃ 0评论

第4章       动态面板

苏苏:楼哥,这个叫动态面板的东西是什么?

小楼:这个呀!是个容器。

苏苏:也是用来装味精的么?

小楼:这个是用来装药的……

苏苏:别闹!

小楼:嘿嘿!这个容器和变量不一样。变量是数据的容器,而动态面板是元件的容器。当然,容器只是它的一个特性,它还有多状态、循环、可改变尺寸……

苏苏:感觉好复杂!到底要怎么使用呢?

小楼:复杂是因为你不了解。其实只要我们知道它的原理,用起来就变得很简单。

1.    动态面板的组成

不管是教学视频,还是这本书,我都很喜欢使用比喻。比如把母版的自定义触发事件比喻成配电箱,把全局变量比喻成公交卡。

那么,我们马上接触到的一个比较特殊的元件“动态面板”,我会把它比作什么呢?

不是特别容易比喻,仅从结构上来讲动态面板就像一个幻灯机,它拥有一个以上的状态,这些状态就像是幻灯片,包含着不同的内容。

动态面板默认会显示排列在第一位的状态中的内容,我们能够在元件管理以及状态管理中去改变状态的次序。另外,动态面板的尺寸决定了显示的内容,默认情况下如果状态中内容超出了动态面板的尺寸,则不能够完整显示。就像幻灯片的内容大小超出了的镜头显像尺寸的话就不能够完全显示了。不过,我们也可以通过在动态面板上点击右键打开菜单,选择“自动调整为内容尺寸”,让动态面板能够自动的改变大小,以便让内容完整显示。

1.1.  状态管理

动态面板拖入到主编辑区后,直接生成或预览查看,你会发现页面中什么都没有。也就是说动态面板其实默认是一个透明的元件,那么如何让它显示内容呢?

双击动态面板,就可以打开“动态面板状态管理”的界面,在这个界面中我们能够看到在状态列表中,显示了一个默认的“State1”。双击这个“State1”的名称,动态面板状态管理的界面消失,主编辑区变成了动态面板中”State1”的编辑区。和普通的页面一样,我们可以向编辑区中拖放任何元件来实现我们想要的内容。不过,大家一定也注意到,编辑区中比一般页面的编辑区多了一个矩形的蓝色虚线框。这个蓝色虚线框与动态面板的尺寸一致,蓝色虚线框内的内容才可以被动态面板显示出来;超出虚线框部分的内容,在默认情况下在页面中是看不见的。(图143)

143

(图143)

如图143所示,蓝色虚线框大小与页面中动态面板大小一致;图片元件在红框中的部分是在蓝色虚线框内,所以在页面上只能看见图片的这一部分。

以上是对动态面板状态的内容编辑,下面我们看一下“动态面板状态管理”界面中还有哪些功能。

还是双击页面中的动态面板,打开“动态面板状态管理”的界面。界面中有几个功能按钮,从左到右依次为新建\重复\上移\下移\编辑状态\编辑全部状态\移除状态。(图144)

新建:点击“+”图标,即可新建一个状态,这个状态内容是空白的。

重复:选中一个已有状态,点击“重复”图标,即可新建一个状态并把选中状态中的内容全部复制给新建的状态。

上移/下移:选中状态,点击“上移”或“下移”可以调整状态的次序,这个次序影响自动循环切换状态时的显示次序。

编辑状态:选中一个状态,点击“编辑状态”图标,则打开状态的编辑界面。一般我们都是通过双击状态名称来完成这个操作。

编辑全部状态:自动打开所有状态的编辑界面,并自动切换到第一个状态的编辑界面。

移除状态:删除选中的状态。

最后,在这个界面中也能够给动态面板添加名称。

144

(图144)

1.2.  状态样式

除了上一节提到的对动态面板状态的管理,我们还可以在每个状态的编辑界面中,去为每个状态添加样式。

当我们打开一个状态的编辑界面,软件中下部分的“页面设置”区域变成了“状态样式”。(图145)

145

(图145)

      在这个编辑区域中,我们能够为动态面板当前的状态添加背景颜色和背景图片。

值得注意的是,动态面板添加的背景图片,当动态面板改变尺寸时,会跟随改变尺寸。当图片的宽高比例与动态面板宽高比例不一致时,可以在“重复”(状态样式中的重复)中设置“填充”或者“适应”的显示规则。显示规则说明参见第二章8.1节中的相关内容。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载26)

喜欢 (23)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 楼哥动态面板不是可以加好多层吗,那在预览的时候就只能看见第一层,其他层都看不见,这个功能主要是要干嘛的呀
    tiana2016-03-29 22:02 回复