[TIMOB-25939] Android: Improve horizontal ScrollView scrolling that is set up with a RefreshControl
| GitHub Issue | n/a |
|---|---|
| Type | Improvement |
| Priority | Low |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2018-04-18T00:25:37.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 7.3.0 |
| Components | Android |
| Labels | ScrollView, android, refreshcontrol |
| Reporter | Joshua Quick |
| Assignee | Joshua Quick |
| Created | 2018-04-05T21:53:34.000+0000 |
| Updated | 2018-06-21T21:35:14.000+0000 |
Description
*Summary:*
When a horizontal Start dragging the
Notice that the
Notice that you can no longer scroll the
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:*
Build and run the below code on Android.
Start dragging the ScrollView horizontally.
As you drag it horizontally, drag down without lifting your finger from the screen.
Notice that the RefreshControl progress circle is being pulled down by your finger.
As you drag down, attempt to drag horizontally without lifting your finger from the screen.
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();
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](https://github.com/aosp-mirror/platform_frameworks_support/blob/master/core-ui/src/main/java/android/support/v4/widget/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.
PR (master): https://github.com/appcelerator/titanium_mobile/pull/9985
FR Passed. PR merged.
Verified the fix in SDK 7.3.0.v20180618182516. Closing.