Question

[Flex 4.6 - Air mobile application - Android target]

当我在手机屏幕上移动手指时，我想在2个视图之间移动（根据当前视图向右或向左移动）;例如，使用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>

这是主应用程序文件，它只是将输入模式设置为Gesture。它确实指定了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＆＃39;例如，您的接触点在屏幕上的位置，以及移动速度。因此，不幸的是，在iOS（或我推测的Google+移动设备）上滑动的幻灯片转换看起来像你在屏幕上移动现有容器是不可能的。

我还没有看到有人为Air实施这样的手势，但我不会说它根本不可能。如果有人见过实施，请拍！ ;）

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

3 个答案: