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

Android: Improve horizontal ScrollView scrolling that is set up with a RefreshControl

    Details

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

      Description

      Summary:
      When a horizontal ScrollView has been assigned a RefreshControl, it is difficult to scroll it horizontally. While scrolling it horizontally, if you slightly drag your finger up/down, the RefreshControl will then cancel horizontal scrolling and then steal/intercept all touch events.

      Steps to Reproduce:

      1. Build and run the below code on Android.
      2. Start dragging the ScrollView horizontally.
      3. As you drag it horizontally, drag down without lifting your finger from the screen.
      4. Notice that the RefreshControl progress circle is being pulled down by your finger.
      5. As you drag down, attempt to drag horizontally without lifting your finger from the screen.
      6. Notice that you can no longer scroll the ScrollView horizontally anymore.

      var window = Ti.UI.createWindow(
      {
      	fullscreen: true,
      	layout: "vertical",
      	backgroundColor: "white",
      });
      var refreshControl = Ti.UI.createRefreshControl(
      {
      	title: Ti.UI.createAttributedString({ text: "Refreshing" }),
      	tintColor: "red",
      });
      refreshControl.addEventListener("refreshstart", function(e) {
      	Ti.API.info("@@@ 'refreshstart' event received.");
      	setTimeout(function() {
      		if (!scrollView.refreshCount) {
      			scrollView.refreshCount = 1;
      		}
      		else {
      			scrollView.refreshCount++;
      		}
      		scrollView.add(Ti.UI.createLabel(
      		{
      			text: "Refresh " + scrollView.refreshCount.toString(),
      			textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
      			color: "white",
      			backgroundColor: "gray",
      			left: "5dp",
      		}));
      		refreshControl.endRefreshing();
      	}, 2000);
      });
      var scrollView = Ti.UI.createScrollView(
      {
      	refreshControl: refreshControl,
      	layout: "horizontal",
      	scrollType: "horizontal",
      	showVerticalScrollIndicator: false,
      	showHorizontalScrollIndicator: true,
      	width: Ti.UI.FILL,
      	height: "90%",
      });
      scrollView.add(Ti.UI.createLabel(
      {
      	text: "Pull\nDown\nto\nRefresh",
      	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
      	color: "white",
      	backgroundColor: "black",
      	height: Ti.UI.FILL,
      }));
      for (var index = 1; index <= 10; index++) {
      	scrollView.add(Ti.UI.createLabel(
      	{
      		text: "Label " + index.toString(),
      		textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
      		color: "white",
      		backgroundColor: "gray",
      		left: "5dp",
      	}));
      }
      window.add(scrollView);
      window.add(Ti.UI.createLabel(
      {
      	text: "Horizontal ScrollView",
      	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
      	color: "white",
      	backgroundColor: "blue",
      	width: Ti.UI.FILL,
      	height: Ti.UI.FILL,
      }));
      window.open();
      

      Expected Result:
      Once you start scrolling horizontally, you should not be able to pull down the RefreshControl progress circle. It should only allow horizontally scrolling. And if you start dragging vertically, it should only pull down the RefreshControl and not allow horizontal scrolling of the ScrollView. It should only be one or the other since it's too difficult for a person to drag perfectly horizontally or vertically.

      Cause:
      This happens because Google's Java HorizontalScrollView class does not support nested scrolling. Google's SwipeRefreshLayout ignores a requestDisallowInterceptTouchEvent() method calls from child views that do not support nested scrolling, which causes it to intercept all touch events once you drag vertically.
      SwipeRefreshLayout.java#L735

      Note:
      This is not an issue with a vertical ScrollView using a RefreshControl. This is only an issue with a horizontal ScrollView.

        Attachments

          Activity

            People

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

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                  Git Source Code