Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-25792

Android: Scrolling horizontal ScrollView within a vertical ScrollView should disable vertical scrolling

    Details

    • Story Points:
      3
    • Sprint:
      2018 Sprint 06 SDK, 2018 Sprint 07 SDK, 2018 Sprint 08 SDK

      Description

      Summary:
      When scrolling a "horizontal" ScrollView within a "vertical" ScrollView, it will scroll horizontally until you scroll too far up/down, then horizontal scrolling will be canceled by the parent "vertical" ScrollView and it'll only scroll vertically from then on. This is a behavior change that was introduced in Titanium 6.3.0.

      The old behavior would block the parent ScrollView from scrolling vertically while scrolling the child horizontal ScrollView. This behavior should be restored. (This is also the iOS behavior.)

      Steps to Reproduce:

      1. Build/run the below code for Android using Titanium 6.3.0 or higher.
      2. Start dragging one of the horizontal ScrollViews. (It's the box containing labels.)
      3. As you drag it horizontally, drag up or down.
      4. Notice the parent ScrollView will scroll vertically, but you can no longer scroll the child ScrollView horizontally anymore.

      var window = Ti.UI.createWindow({ fullscreen: true });
      var verticalScrollView = Ti.UI.createScrollView(
      {
      	layout: "vertical",
      	scrollType: "vertical",
      	showVerticalScrollIndicator: true,
      	showHorizontalScrollIndicator: false,
      	backgroundColor: "darkgray",
      	width: Ti.UI.FILL,
      	height: Ti.UI.FILL,
      });
      for (var scrollViewIndex = 1; scrollViewIndex <= 20; scrollViewIndex++) {
      	verticalScrollView.add(Ti.UI.createLabel(
      	{
      		text: "Horizontal Scroll View " + scrollViewIndex.toString(),
      		color: "white",
      		top: "10dp",
      	}));
      	var horizontalScrollView = Ti.UI.createScrollView(
      	{
      		layout: "horizontal",
      		scrollType: "horizontal",
      		showVerticalScrollIndicator: false,
      		showHorizontalScrollIndicator: true,
      		backgroundColor: "darkgray",
      		borderWidth: "1dp",
      		borderColor: "black",
      		width: "100%",
      		height: "100dp",
      	});
      	for (var labelIndex = 1; labelIndex <= 20; labelIndex++) {
      		horizontalScrollView.add(Ti.UI.createLabel(
      		{
      			text: " Label " + labelIndex.toString() + " ",
      			color: "white",
      			backgroundColor: "gray",
      			top: "5dp",
      			left: "5dp",
      		}));
      	}
      	verticalScrollView.add(horizontalScrollView);
      }
      window.add(verticalScrollView);
      window.open();
      

      Result:
      Once you drag up or down while scrolling horizontally, the horizontal ScrollView's scrolling is canceled and only the parent vertical ScrollView can be scrolled.

      Expected Result:
      Parent vertical ScrollView should not be scrollable while scrolling a child horizontal ScrollView. This was the old Android behavior. It is also the iOS behavior.

      Cause:
      ScrollViews call the parent view's requestDisallowInterceptTouchEvent() method when scrolling has started. However, Google's SwipeRefreshLayout.requestDisallowInterceptTouchEvent() method ignores the request when made by a child view (in this case a HorizontalScrollView) that does not support nested scrolling. Since it's ignored, the parent ScrollView ends up intercepting and stealing the nested HorizontalScrollView touch events.
      SwipeRefreshLayout.java#L735

      Work-Around:
      You can restore the old behavior by listening to the horizontal ScrollView's "dragstart" and "dragend" events. In the "dragstart" event handler, disable the parent vertical ScrollView. In the "dragend" event handler, re-enable the parent vertical ScrollView.

      horizontalScrollView.addEventListener("dragstart", function(e) {
      	verticalScrollView.scrollingEnabled = false;
      });
      horizontalScrollView.addEventListener("dragend", function(e) {
      	verticalScrollView.scrollingEnabled = true;
      });
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                jquick Joshua Quick
                Reporter:
                jquick Joshua Quick
                Reviewer:
                Gary Mathews
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-6193
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Source Code