Flex手机项目 - 页面视图切换,及切换时过渡效果
ViewNavigator类负责管理移动应用程序的每一个视图容器,其内部是一种基于栈的历史机制,由于在任何给定时间只在内存中保留一个视图,所以可以节省应用程序所使用的内存。
在手机移动项目开发时,主应用文件页面<s:ViewNavigatorApplication>的firstView设置了主页视图。
1,如果想要切换视图,可以使用navigator实现:
(1)navigator.pushView(View2, myObj); 这个将程序导航到一个新视图
第一个参数为新视图类,第二个事传递的数据(可选,新视图里使用data获取)
(2)navigator.popView(); 返回到前一个视图
(3)navigator.popToFirstView(); 返回到第一个视图
(4)navigator.replaceView(View2); 将导航堆栈的顶部视图替换为新视图。替换堆栈上当前视图的视图成为当前视图。
2,视图过渡效果可以使用如下四个视图过渡类:
(1)SlideViewTransiton:默认效果,新视图滑入,现有视图滑出
(2)FlipViewTransition:新视图显示出时现有视图翻出屏幕
(3)CrossFadeViewTransition:新视图显示出时现有视图淡出屏幕
(4)ZoomViewTransition:新视图显示时现有视图缩小至消失,或新视图在现有视图上放大
示例如下:
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图"> <fx:Script> <![CDATA[ import spark.transitions.ZoomViewTransition; protected function btnclickHandler(event:MouseEvent):void { var zoom:ZoomViewTransition = new ZoomViewTransition(); zoom.duration = 250; navigator.pushView(View2, null, null, zoom); } ]]> </fx:Script> <s:Button label="去视图2" click="btnclickHandler(event)"/> </s:View>注意:
(1)每一种视图过渡都有许多属性定义动画效果,包括direction,duration和mode。
(2)除了上述的例子,对每一个视图切换单独设置效果。还可以给navigator设置统一的切换效果,代码如下:
navigator.defaultPushTransition = slide; navigator.defaultPopTransition = zoom;