Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-24411] TiAPI: Enable ScrollView.smoothScrollTo(x,y) method

GitHub Issuen/a
TypeImprovement
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2017-04-20T17:47:44.000+0000
Affected Version/sn/a
Fix Version/sRelease 6.1.0
ComponentsAndroid, iOS
Labelsandroid, animated, merge-6.1.0, scrollTo, scrollview, smoothScrollTo
ReporterCarlos Henrique Zinato
AssigneeHans Knöchel
Created2017-02-17T13:23:06.000+0000
Updated2017-05-15T18:09:51.000+0000

Description

Add support for smoothScrollTo() method on ScrollView component: https://developer.android.com/reference/android/widget/ScrollView.html#smoothScrollTo(int,%20int) It should use *{animated:true}* option for a better cross-platform implementation Don't know how to implement the options this is what I have so far on ScrollViewProxy.java: 
         @Kroll.method
	public void scrollTo(int x, int y, @Kroll.argument(optional=true) KrollDict options) {
		if (!TiApplication.isUIThread()) {
			TiMessenger.sendBlockingMainMessage(getMainHandler().obtainMessage(MSG_SCROLL_TO, x, y), getActivity());

			//TiApplication.getInstance().getMessageQueue().sendBlockingMessage(getMainHandler().obtainMessage(MSG_SCROLL_TO, x, y), getActivity());
			//sendBlockingUiMessage(MSG_SCROLL_TO, getActivity(), x, y);
		} else {
			handleScrollTo(x,y,options);
		}
	}

//...

        @Override
	public boolean handleMessage(Message msg) {
		if (msg.what == MSG_SCROLL_TO) {

//I think the problem is here, since we're creating an empty KrollDict, ignoring the options. But I'm not sure =/

			KrollDict options = new KrollDict();
			handleScrollTo(msg.arg1, msg.arg2, options);
			AsyncResult result = (AsyncResult) msg.obj;
			result.setResult(null); // signal scrolled
			return true;
		} else if (msg.what == MSG_SCROLL_TO_BOTTOM) {
			handleScrollToBottom();
			AsyncResult result = (AsyncResult) msg.obj;
			result.setResult(null); // signal scrolled
			return true;
		}
		return super.handleMessage(msg);
	}

	public void handleScrollTo(int x, int y, KrollDict options) {
		if (TiConvert.toBoolean(options, TiC.PROPERTY_ANIMATED, false)) {
			getScrollView().smoothScrollTo(x, y);
		}else{
			getScrollView().scrollTo(x, y);
		}
	}
I think that every time I call scroll.scrollTo() on JS it calls the handleMessage on scrollViewProxy.java and I don't know of a good way to propagate the options to scrollTo method. Of course, in the TiUIScrollView.java file I have the implementation of the smoothScrollTo() method: 
public void smoothScrollTo(int x, int y)
	{
		View view = getNativeView();
		if (view instanceof TiHorizontalScrollView) {
			TiHorizontalScrollView scrollView = (TiHorizontalScrollView) view;
			scrollView.smoothScrollTo(x, y);
		} else if (view instanceof TiVerticalScrollView) {
			TiVerticalScrollView scrollView = (TiVerticalScrollView) view;
			scrollView.smoothScrollTo(x, y);
		}
		getNativeView().computeScroll();
	}
And it does work and scrolls smoothly =)

Comments

  1. Sharif AbuDarda 2017-02-17

    Thanks for submitting the ticket. Our engineering team will look into it.
  2. Hans Knöchel 2017-02-17

    We should do the same for iOS. Couldn't we just add the animated parameter to the existing scrollTo method, like this: 
       myScrollView.scrollTo({
       x: 0,
       y: 100,
       animated: true // default: false, for backwards compatibility
   });
    iOS would be easy to implement as well.
  3. Michael Gangolf 2017-02-18

    https://github.com/appcelerator/titanium_mobile/pull/8841 Changing parameter to an object and adding animated parameter. Also keeping the normal scrollTo(x,y) for legacy support! Example: 
       var win = Ti.UI.createWindow({
       backgroundColor: 'white',
       title: 'ScrollView Demo'
   });
   
   var scrollView = Ti.UI.createScrollView({
       showVerticalScrollIndicator: true,
       showHorizontalScrollIndicator: true,
       top: 0,
       bottom: 40,
       left: 5,
       right: 5,
       scrollType: "horizontal"
   });
   var view = Ti.UI.createView({
       backgroundGradient: {
           type: 'linear',
           startPoint: {
               x: '0%',
               y: '0%'
           },
           endPoint: {
               x: '100%',
               y: '0%'
           },
           colors: [{
               color: 'red',
               offset: 0.0
           }, {
               color: 'green',
               offset: 0.5
           }, {
               color: 'blue',
               offset: 1.0
           }]
       },
       top: 10,
       left: 10,
       width: 2000,
       height: 400
   });
   var btn1 = Ti.UI.createButton({
       title: "normal",
       bottom: 0,
       left: 0
   });
   var btn2 = Ti.UI.createButton({
       title: "smooth",
       bottom: 0,
       right: 0
   });
   var btn3 = Ti.UI.createButton({
       title: "normal back",
       bottom: 0
   });
   
   btn1.addEventListener("click", function() {
       // legacy
       scrollView.scrollTo(4000, 0);
   });
   btn2.addEventListener("click", function() {
       // new smooth
       scrollView.scrollTo(
           4000,
           0, {
               animated: true
           });
   });
   btn3.addEventListener("click", function() {
       // new normal
       scrollView.scrollTo(
           0,
           0, {
               animated: false
           });
   });
   scrollView.add(view);
   win.add(scrollView);
   win.add(btn1);
   win.add(btn2);
   win.add(btn3);
   win.open();
  4. Hans Knöchel 2017-02-18

    Making a TiAPI ticket so we can have both iOS and Android together (or even Windows if it supports it). iOS PR will come later today.
  5. Michael Gangolf 2017-02-18

    About the documentation: Since it is possible to have two parameters for scrollTo now: * scrollTo(x,y) * scrollTo(dict) what do I need to add? Just a second method with the new parameters?
  6. Hans Knöchel 2017-02-18

    Shit, so when it has 2 params, we would probably need to expose it as a third one for now.
  7. Michael Gangolf 2017-02-18

       scrollTo(x,y,bool)
    or 
       scrollTo(x,y, {animated:true})
    ?
  8. Hans Knöchel 2017-02-18

    scrollTo(x,y, {animated:true})
    is better I guess. Just like the listview animation options.
  9. Michael Gangolf 2017-02-18

    Changed the properties and updated the example. Will do some more testing tomorrow but the example is working already
  10. Hans Knöchel 2017-02-18

    You can use 6.1.0 as the version. iOS is done, but i realized that iOS animates per default, which is different to Android I guess. We should leave a note for that in the docs. I will commit by changes to your branch on Monday, so we have a unified PR.
  11. Carlos Henrique Zinato 2017-02-20

    Thank you guys for your effort on that! ScrollView implementation on Android was a bit tricky for me. Glad you guys found a solution and a nice implementation on iOS as well!
  12. Lokesh Choudhary 2017-04-19

    FR Passed for master branch, waiting for backport to 6.1.0.
  13. Hans Knöchel 2017-05-08

    Backport: https://github.com/appcelerator/titanium_mobile/pull/9034
  14. Lokesh Choudhary 2017-05-09

    FR passed for both master & backport PR's.
  15. Carlos Henrique Zinato 2017-05-11

    Guys, I'm bit confused now, what SDK version should had this smoothScrollTo implemented? 6.1 and ? Thanks
  16. Hans Knöchel 2017-05-11

    It's in 6.1.0. The backport was missing, because it was merged after 6_1_X was branched. Always rely on the Fix-Version of a ticket.
  17. Lokesh Choudhary 2017-05-15

    Verified the fix in 6.1.0.v20170514022959. animated in scrollView works as expected in Android & IOS. Closing. Studio Ver: 4.9.0.201705110256 SDK Ver: 6.1.0.v20170514022959 OS Ver: 10.12.3 Xcode Ver: Xcode 8.3.2 Appc NPM: 4.2.9 Appc CLI: 6.2.1 Ti CLI Ver: 5.0.13 Alloy Ver: 1.9.11 Node Ver: 6.10.1 Java Ver: 1.8.0_101 Devices: ⇨ google Nexus 6 --- Android 6.0.1 ⇨ google Nexus 6P --- Android 7.1.1 IOS Simulator: Iphone 6S IOS 10.3

JSON Source