The following is the first in a series of Tuesday blog posts covering basic topics in Titanium and JavaScript development.
A common need in Titanium Mobile applications is to have a scrollable view of dynamic elements in a user interface. There are several ways to accomplish this, but a ScrollView is an easy way to get it done. In the following example, we’ll be adding user interface components to a scrollable area within an application.
The first order of business is to create a ScrollView. The ScrollView component is created and positioned just as any normal view, but it’s children can be outside the current viewable area. A ScrollView component is created like so:
var scroller = Ti.UI.createScrollView({ top:60, contentHeight:'auto' });
The contentHeight property indicates how high the scrollable area of the view is, not the height of the view its self. Setting this property to “auto” will dynamically size the scrollable area to contain any children added to it. In the case of dynamic content (like orders or messages in a chat), this is the behavior we want.
It’s often the case that we’d like to have the children of the scroll view arranged in a linear fashion. To accomplish this, we can use a container view inside the ScrollView with a vertical layout. This will stack any children added to the view one on top of the other:
var container = Ti.UI.createView({ layout:'vertical', height:'auto', top:0 }); scroller.add(container);
Setting height to “auto” for the container view will size the container to fit the children added to it. Now any child elements we want to include in the scrollable area can be added to the container, which will continue to grow taller with each new child added. At the bottom of this post is a complete app.js example which demonstrates this behavior for both Android and iPhone. Paste it into a new Titanium project to see it in action.
Hope that helps!
We’re taking requests!
Do you have a sample or code snippet you’d like to see on the dev blog? Let us know and we’ll whip one up for next week – as always, you can reach the Appcelerator dev relations team at community@appcelerator.com with suggestions for future tutorials. We’re here to help!
Should look like…
Nice tips; it’d be great to see some screenshots of how it looks.. helps newbies visualize what you’re on about.
@Matt ask and ye shall receive…
It would be great for snippet posts to have screenshots on both iOS & android, instills confidence and speaks to all the developers/newbies :)
Updated just for you Ket :)
Hi Kevin
Thanks for the article – I guess we all appreciate your work a lot.
I played around with the ScrollView during the weekend and bumped into the following:
If you add labels to them which are scaled in width (leaving height to ‘auto’) the total height won’t get calculated correctly.
There is an example at: https://gist.github.com/1809636
I tried to reset the height of the containing label by .setHeight – but it just kept getting messier from there. Maybe an insight on that subject?
Cheers, Thomas
Hi! thanks for the article, if I wanted to add an eventListener to the dynamicContent, how can i achieve that?
@Thomas tough to see what you were actually trying to do there. The following works fine:
https://gist.github.com/1870118
Maybe post a less contrived, more true to life example in the Q&A to look at?
@Jonh you can use addEventListener on any of the objects you add to the view hierarchy.
This has been really helpful and I appreciate you sharing.
Do you have an example of drag and drop reordering of the views? Would you add listeners to each view that detected if there was another view on it and push the views up or down accordingly or something else?
Just trying to get an idea of how I can do a drag and drop reorder or sorting. Any advice is greatly appreciated.
Thanks in advance.
I would also be very interested to know if drag and drop reordering or sorting can be done.
So I am baffled. I copied the code directly into a sample project and I get this error.
invalid method
(createScrollView) passed to UIModule at app.’s (line 7)
I get this using the code above or whenever I try using any scroll view. I am confused and have been trying to fix this for days. Any ideas?
@Jeff the only thing I can think of is that the build scripts are not packaging in the ScrollView UI component. I would try cleaning the project in Titanium Studio to force the build scripts to re-evaluate the dependencies of your code.
Have run this code but I keep getting the following error and the scrolling doesn’t work:
[WARN] [object TiUIView] has an auto height value of 0, meaning this view may not be visible.
Any ideas why this is happening please ?
Thanks.