Swipe back gesture doesn't work on iOS with ScrollableView

Question

I'm using Appcelerator Studio 4.7 with SDK 5.4.0GA.

I want to use swipe back gesture to return to previous view controller, but instead my touch just moves ScrollableView views even though I start my gesture at the left edge of the screen. Swipe back gesture works fine if it's not over ScrollableView.

Everything was fine when I have used Titanium Studio 3.4. It's not possible to use it at the moment, because it's not supported and you can't even log in.

This issue is because of Appcelerator Studio, not because of SDK version. I have tried to use Titanium Studio and Appcelerator Studio with the same SDK version and only Appcelerator Studio had this issue. That was the reason I stuck with Titanium Studio a year ago, but now it's not possible.

Here is the related topic without solution: https://archive.appcelerator.com/topic/581/swipe-right-from-the-edge-to-go-back-to-the-previous-window-doesn-t-work-anymore-in-ios-using-sdk-3-5-1-ga-and-4-0-0-ga/4

EDIT. How to reproduce it in 2 minutes:

1) File->New->Mobile App Project->Default Alloy Project

2) Add new controller named scrollable

scrollable.xml:

<Alloy>
    <Window class="container">
        <ScrollableView>
            <ScrollView>
                <View height="5000" backgroundColor="#DBD6D6">
                    <Label top="20">View1</Label>
                </View>
            </ScrollView>
            <ScrollView>
                <View height="5000" backgroundColor="#FED2FB">
                    <Label top="20">View2</Label>
                </View>
            </ScrollView>
            <ScrollView>
                <View height="5000" backgroundColor="#DCEFD7">
                    <Label top="20">View3</Label>
                </View>
            </ScrollView>
        </ScrollableView>
    </Window>
</Alloy>

index.js:

function doClick(e) {
    var scrollableController = Alloy.createController('scrollable',{
    });

    var view = scrollableController.getView();
    $.index.openWindow(view);
}

$.index.open();

index.xml:

<Alloy>
    <NavigationWindow>
        <Window class="container" id="index">
            <Label id="label" onClick="doClick">Press me</Label>
        </Window>
    </NavigationWindow>
</Alloy>

3) That's all!

Answer 1

First of all, I have tried your code on Appcelerator Studio so I am not sure what used to happened on Titanium Studio in this scenario.

Now, since the Ti.UI.Window swipeToClose property does not exist until Ti SDK 5.2.0.GA, so you can make sure whether it's really Studio error or the SDK feature. I am sure that it's not an issue, but just a mis-understanding.

Coming to your query, there are two ways (as far as I know) to provide the Swipe to Previous Window (let's say SPW) feature along with Scrollable feature, that, leave some padding between the ScrollableView and its parent view, like this:

-Method 1-

<Alloy>
    <Window class="container" backgroundColor="white">
        <ScrollableView backgroundColor="blue" clipViews="false" left="20" right="20">
            <View backgroundColor="red">
                <Label>View1</Label>
            </View>
            <View backgroundColor="green">
                <Label>View2</Label>
            </View>
            <View backgroundColor="cyan">
                <Label>View3</Label>
            </View>
        </ScrollableView>
    </Window>
</Alloy>

These are the changes I did in your code:

• Added left + right padding of 20dp which will enable the SPW feature, but the ScrollableView will be of less width.
• Set clipViews property to show the adjacent views for better UI. If you set this property to true even, then also the SPW feature works.

-Method 2- it works only if you know the exact dimension of ScrollableView by using hitRect property

// replace the line in Method 1 with this one and apply the tss on it
<ScrollableView backgroundColor="blue" id="SC">

scrollable.tss

   "#SC" : {
        // (x,y) is top-left corner of hitRect and height/width will determine its dimension where user can swipe the scrollable view
        // on remaining area, you can perform SPW feature 
        hitRect : {
            x : 100,
            y : 100,
            height : 200,   
            width : 200    
        }
    }

Since you have seen both ways how you can achieve both features, I hope you find it useful.