2:子非鱼系列案例图文教程之【伸缩效果】

何智

在产品设计时，很多情况下需要使用到列表的撑开及收缩效果。。撑开时，下文所有布局均需要根据撑开内容的高度向下移动，而收缩时，下文所有布局需又需要根据收缩内容的高度进行向上移动。
      本案例将分步介绍如何达到上述效果。
      

收缩后效果：

      

伸展后效果：

  【第一步：绘制界面布局】
   在工具栏内选择“动态面板”，拖动到编辑区后设置其布局样式为“垂直居中”。
   

【 第二步：绘制界面布局】
在工具栏内选择“形状-->矩形”，拖动到编辑区后调整好格式。此处我引用了一个矩形，且将第一个矩形背景色设置成红色，当然标题，其它四个进行合并，合并后设置默认为不可见。
   

【第三步：加入伸缩切换按钮】
  在做切换按钮前先准备好两张图片，首先将默认显示的图片拖动到编辑区合适位置，再点击该图片元件为其添加"切换(事件执行和还原)"事件，该事件交互窗 口内点击“设置值”为该图片元件设置切换后的显示图片。
  

  【第四步：加入切换伸缩显示效果】
  伸缩切换按钮，点击“事件”中原切换事件下的“执行”后的下拉框。再次为切换按钮新增新执行“显示/隐藏”事件。如下图所示：
  

   至此，伸缩效果就制作完成了，运行演示效果如下图所示：
  

  

案例源文件： 子非鱼系列案例图文教程之【伸缩效果】.rar (716.87 KB, 下载次数: 31)

2014-7-1 10:39 上传

点击文件名下载附件