Create a Safari like Scrollable Card View in Titanium
Here’s the end result:
This isn’t too hard – It’s just a ScrollableView. But, the view is
actually thinner than the screen. It has the property
clipViews set to
false, so even though the child views are outside of the bounds of the
ScrollableView, they’re still visible. We use the
hitRect property to
ensure that touches on the views outside of the bounds of the
will still scroll the view. I recently contributed this property to Titanium,
so you’ll have to use a recent CI build of 2.1, if 2.1 hasn’t been released yet.
Let’s have a look at the code.
When touches are received against the view, they are checked against the
hitRect. These coordinates will be local to the
So, we set the hit rectangle to be as wide as the screen, but offset 45px back.
45px is half of the difference between the width of the screen and the width
of the scrollable view:
(320 - 230) / 2.
hitRect, visualized, looks like the larger blue box here:
The inner pink box represents the bounds of the
So, even though some touch events are actually outside of the
they will still scroll the view. This way, those ‘previews’ on the sides of
the screen can be grabbed and scrolled over by the user.
To give credit where it’s due, I learned how to do this from this blog post.
blog comments powered by Disqus