Flex Mobile Gesture 事件：如何在 Google+ Mobile 等 2 个视图之间滑动？

Question

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

当我在手机屏幕上移动手指时，我想在两个视图之间移动（根据当前视图向右或向左）；例如，使用 Google+ 移动应用程序，在配置文件部分，您可以通过在屏幕上移动手指来更改视图，并且在更改完整视图之前必须检查偏移量和移动速度。

非常感谢！

安东尼

Answer 1

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

<?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>

这是主应用程序文件，它只是将输入模式设置为手势。它确实指定了 firstView，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>

这个视图只显示一个简单的标签并监听视图标签上的gestureSwipe事件。作为响应，它将新视图推送到导航器 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>

此视图与前一个视图几乎相同。它改变了标签。向右滑动会返回，向左滑动会添加 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>

此视图听向右滑动即可返回。

Answer 2

我在以下站点上找到了此功能（包括速度和偏移）的一个很好的示例：View Paging with Page Indicator。此外，您可以考虑接受一些答案。你目前的接受率是 0%，真的，我只是希望能帮助像我这样有同样问题的人。

Answer 3

您所追求的东西在 Flex 中是开箱即用的。除了在 iOS/Android 上，滑动手势处理程序只给您 -1 和 1 值，如 Flextras 的示例所示，既不是触摸点在屏幕上的位置，也不是移动速度。 因此，不幸的是，在 iOS（或我认为是 Google+ 移动设备）上滑动时的滑动过渡看起来就像您正在移动屏幕上的现有容器一样，这是不可能的。

我还没有看到有人为 Air 实现了这样的手势，但我不会说这根本不可能。如果有人看到了一个实现，那就开枪吧！ ;)