apache-flex - Flex移动手势事件: how to slide between 2 views like Google+ Mobile?

标签 apache-flex view air gesture

[Flex 4.6 - Air 移动应用程序 - Android 目标]

当我在手机屏幕上移动手指时,我想在两个 View 之间移动(根据当前 View 向右或向左);例如,使用 Google+ 移动应用程序,在个人资料部分,您只需在屏幕上移动手指即可更改 View ,并且在更改完整 View 之前必须检查偏移量和移动速度。

非常感谢!

安东尼

最佳答案

这是一个简单的应用程序来做到这一点:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.GestureViewChangeView1" applicationDPI="160"
                             initialize="view1_initializeHandler(event)"  >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            protected function view1_initializeHandler(event:FlexEvent):void
            {
                Multitouch.inputMode = MultitouchInputMode.GESTURE;
            }


        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
</s:ViewNavigatorApplication>

这是主应用程序文件,它只是将输入模式设置为手势。它确实指定了第一个View,GestureViewChangeView1:

<?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="GestureViewChange1" gestureSwipe="swipeHandler(event)"
    >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            public function swipeHandler(event:TransformGestureEvent):void
            {
                switch(event.offsetX)
                {
                    case 1:
                    {
                        // swiped right
                        break;
                    }
                    case -1:
                    {
                        // swiped left
                        this.navigator.pushView(GestureViewChangeView2);
                        break;
                    }
                }
                switch(event.offsetY)
                {
                    case 1:
                    {
                        // swiped down
                        break;
                    }
                    case -1:
                    {
                        // swiped up
                        break;
                    }
                }
            }           


        ]]>
    </fx:Script>

    <s:Label text="View 1" />

</s:View>

该 View 仅显示一个简单的标签并监听 View 标签上的gestureSwipe 事件。作为响应,它将新 View 推送到导航器上,GestureViewChangeView2:

<?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="GestureViewChangeView2" gestureSwipe="swipeHandler(event)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            public function swipeHandler(event:TransformGestureEvent):void
            {
                switch(event.offsetX)
                {
                    case 1:
                    {
                        // swiped right
                        this.navigator.popView();
                        break;
                    }
                    case -1:
                    {
                        // swiped left
                        this.navigator.pushView(GestureViewChangeView3);
                        break;
                    }
                }
                switch(event.offsetY)
                {
                    case 1:
                    {
                        // swiped down
                        break;
                    }
                    case -1:
                    {
                        // swiped up
                        break;
                    }
                }
            }           


        ]]>
    </fx:Script>

    <s:Label text="View 2" />   

</s:View>

此 View 与前一个 View 几乎相同。它改变了标签。向右滑动它会返回,向左滑动它会添加 GestureViewChangeView3:

<?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="GestureViewChangeView3" gestureSwipe="swipeHandler(event)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            public function swipeHandler(event:TransformGestureEvent):void
            {
                switch(event.offsetX)
                {
                    case 1:
                    {
                        // swiped right
                        this.navigator.popView();
                        break;
                    }
                    case -1:
                    {
                        // swiped left
                        break;
                    }
                }
                switch(event.offsetY)
                {
                    case 1:
                    {
                        // swiped down
                        break;
                    }
                    case -1:
                    {
                        // swiped up
                        break;
                    }
                }
            }           


        ]]>
    </fx:Script>

    <s:Label text="View 3" />

</s:View>

此 View 监听向右滑动以返回。

关于apache-flex - Flex移动手势事件: how to slide between 2 views like Google+ Mobile?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9841250/

相关文章:

apache-flex - 导出发布版本 - 通过 Intellij Idea 的 Flex

python - Django 中的 ViewDoesNotExist

java - Android View 添加 child

android - 在 ViewPager 中膨胀布局

android - AIR to ANDROID 2.1 - 问题 - 什么 air/flex sdk?

Android SDK 与 Adob​​e AIR : Pros and cons?

java - 适用于 Flex、Java、mongoDb 的云?

java - 保护 Flex-BlazeDS 应用程序的最佳方法是什么?

android - 跨平台移动应用程序 SDK : Write Once Deploy Everywhere

javascript - 数据绑定(bind)的主要例子