Мероприятие Flex Mobile Gesture: как скользить между двумя представлениями, такими как Google+ Mobile? - PullRequest
Новая
       14

Мероприятие Flex Mobile Gesture: как скользить между двумя представлениями, такими как Google+ Mobile?

2 голосов
/ 23 марта 2012

[Flex 4.6 - Мобильное приложение Air - Android target]

Я хотел бы перемещаться (вправо или влево в соответствии с текущим видом) между двумя видами, когда я перемещаю палец по экрану мобильного телефона; Например, в мобильном приложении Google+ в разделе «Профиль» вы можете менять вид, просто перемещая палец по экрану, и перед изменением полного вида необходимо проверить смещение и скорость перемещения.

Большое спасибо!

Anthony

Ответы [ 3 ]

4 голосов
/ 23 марта 2012

Вот простое приложение, чтобы сделать это: 

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

В этом представлении просто отображается простая метка и прослушивается событие gestSwipe в теге представления. В ответ на это он выдвигает новый взгляд на навигатор, 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>

Этот вид прослушивает пролистывание вправо, чтобы вернуться назад.

1 голос
/ 30 ноября 2012

Я нашел отличный пример этой функции (включая скорость и смещение) на следующем сайте: Просмотр пейджинга с индикатором страницы . Кроме того, вы можете рассмотреть возможность принятия некоторых ответов. У вас сейчас 0% приемлемости, так что я просто надеюсь помочь кому-то, как я, у которого был такой же вопрос.

0 голосов
/ 27 марта 2012

То, что вам нужно, невозможно из коробки с Flex. В отличие от iOS / Android, обработчик жестов смахивания дает вам только -1, соответственно 1 значение, как видно из примера Flextras, ни положение вашей точки касания на экране, ни скорость перемещения. Так что, к сожалению, слайд-переход при пролистывании, как на iOS (или, как я полагаю, в Google+), который выглядит так, как будто вы перемещаете существующие контейнеры на экране, невозможен.

Я еще не видел, чтобы кто-то реализовал такой жест для Air, но я бы не сказал, что это вообще невозможно. Если кто-то видел реализацию, стреляйте! ;)

...