局部纵向和横向滚动-股票

2016-04-29 本文已影响314人 darling323

局部纵向和横向滚动-股票

素材清单

detail1.png

detail2.png

detail3.png

涉及的技能

动态面板的叠加嵌套
交互事件：OnSwipeLeft，OnSwipeRight。

案例效果

本例模拟iOS 的股票app，上部的股票列表可以上下拖动，下部的详细信息可以左右拖动换屏显示不同类型信息。

效果.gif

移动链接如下：
局部纵向和横向滚动

简明步骤

主界面布局。
添加股票名称中的热区，让详细信息随着股票名称变化。
股票列表的上下拖拽。
详细信息的动态交互。

具体步骤及说明

1. 主界面布局。

1.新建一个项目，命名为“局部纵向和横向滚动”。

2.添加动态面板dpStock作为股票列表的显示，参数如下：

| 名称 | 类型 | 坐标 | 尺寸 |
| ------------ | ------------- | ------------ |
| dpStock | Dynamic Panel | 0，0 | 414，400 |

3.添加动态面板dpDetail作为股票明细信息的显示，参数如下：

| 名称 | 类型 | 坐标 | 尺寸 |
| ------------ | ------------- | ------------ |
| dpDetail | Dynamic Panel | 0，400 | 414，296 |

4.添加动态面板dpFooter作为底部提示信息的显示，参数如下：

| 名称 | 类型 | 坐标 | 尺寸 |
| ------------ | ------------- | ------------ |
| dpFooter | Dynamic Panel | 0，696 | 414，40 |

5.在dpStock的 state1中添加动态面板dpStockList作为股票列表的上下滚动容器，高度比dpStock的高度400略大，能够有上下滚动的空间即可，这里设置为500，参数如下：

| 名称 | 类型 | 坐标 | 尺寸 |
| ------------ | ------------- | ------------ |
| dpStockList | Dynamic Panel | 0，0 | 414，500 |

6.参考素材截图.png中的上部分股票列表，在dpStockList中制作股票列表模拟界面。这里面用一个黑色矩形作为背景，坐标和尺寸为（0，0，414，500）。文本标签文字设置为白色，字号18，显示股票代码和价格点数，红色和绿色圆角矩形作为涨跌幅。

screen1.PNG

7.在dpDetail的 state1中添加详细信息的第一屏，可以继续参考上图。这里可以直接使用截屏的图片资源detail1.png，拖到动态面板中去，坐标和尺寸为（0，40，414，256）。上面还是40高度的空白，使用 label 控件，坐标和尺寸为（0，0，414，40），字体18号居中，背景为黑色，并命名为lbCompany，显示他们的股票名。

8.在dpDetail中添加 state2和 state3，由于没有功能性的控件需求，我们也直接使用截图代替，分别在两个 state 中拖入2个图片资源detail2.png和detail3.png，坐标和尺寸都为（0，0，414，296）。

9.在dpFooter中添加黑色背景和3个圆形小按钮，模拟 PageControl控件，仍然参考screen1.png。3个圆形小按钮可以用矩形或者按钮控件制作。拖入矩形后，右键选择select shape，选择eclipse，然后分别设置这三个圆形的坐标和尺寸为（170，13，10，10），（201，13，10，10），（232，13，10，10），可以用上下左右微调位置，用align和distribute工具调整相对位置。

布局基本结束。widget manager 的截图如下：

widget.png

2. 添加股票名称中的热区，让详细信息随着股票名称变化。

1.在dpStock的 state1里面，DOW J 和 AAPL 两个股票指数位置，我们拖拽2个HotSpot热区控件，让这两个股票可以接受点击的交互操作。为了简单起见，我们只做这两个股票的响应。在这两个热区控件上添加交互用例，添加OnClick事件，实现显示公司名的lbCompany根据我们点击的股票名变化。

2.选中DOW J的热区，在交互窗口添加OnClick事件，在用例编辑器中选择Set Text，在右侧窗口中找到前述显示公司名的标签lbCompany打钩，右下角的 value为DOW J，确定，如下图：

case1.png

3.选中AAPL的热区，同上方法添加用例如图：

case2.png

4.预览，点击这两个带热区的股票，下面详细信息中的公司名会跟随变化。

3. 股票列表的上下拖拽。

1.添加 dpStockList 的拖动交互。在dpStock的 state1里面，选择dpStockList添加OnDrag 事件，选择Move和dpStockList，在 y 轴方向拖动，如下图：

case3.png

2.添加 OnDragStop 事件来避免拖动出界。结果如下图：

case4.png

case5.png

当 this.y 大于0时，是向下拖动到顶的情况，这时应该将股票列表的坐标初始化到（0，0），这里还加入了500ms 的线性动画延时效果。
当 this.y 小于0时，是向上拖动到底的情况，这时我们应该将股票列表恢复到底部，y 坐标应该是400（dpStock 的高）-500（dpStockList 的高）。