Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom paging control for scrollableViews for Titanium Appcelerator
// I was unhappy about there was close to no control over the "pageControl"
// in scrollableViews, so I hacked my own
// -----
// Configuration
var pageColor = "#c99ed5";
PagingControl = function(scrollableView){
var container = Titanium.UI.createView({
height: 60
});
// Keep a global reference of the available pages
var numberOfPages = scrollableView.getViews().length;
var pages = []; // without this, the current page won't work on future references of the module
// Go through each of the current pages available in the scrollableView
for (var i = 0; i < numberOfPages; i++) {
var page = Titanium.UI.createView({
borderRadius: 4,
width: 8,
height: 8,
left: 15 * i,
backgroundColor: pageColor,
opacity: 0.5
});
// Store a reference to this view
pages.push(page);
// Add it to the container
container.add(page);
}
// Mark the initial selected page
pages[scrollableView.getCurrentPage()].setOpacity(1);
// Callbacks
onScroll = function(event){
// Go through each and reset it's opacity
for (var i = 0; i < numberOfPages; i++) {
pages[i].setOpacity(0.5);
}
// Bump the opacity of the new current page
pages[event.currentPage].setOpacity(1);
};
// Attach the scroll event to this scrollableView, so we know when to update things
scrollableView.addEventListener("scroll", onScroll);
return container;
};
module.exports = PagingControl;
@aaronksaunders

This comment has been minimized.

Copy link

@aaronksaunders aaronksaunders commented Apr 19, 2012

not really clear what this is accomplishing... but the code looks good

@raulriera

This comment has been minimized.

Copy link
Owner Author

@raulriera raulriera commented Apr 19, 2012

Pretty much my own control for the ScrollableView (so I can color the little dots at the bottom, set a transparent background color, etc)

@aaronksaunders

This comment has been minimized.

Copy link

@aaronksaunders aaronksaunders commented Apr 19, 2012

AH... I like

@wgx731

This comment has been minimized.

Copy link

@wgx731 wgx731 commented May 19, 2012

Is this for iphone only?

@wgx731

This comment has been minimized.

Copy link

@wgx731 wgx731 commented May 19, 2012

Make sure the paging control switch back to default page when scrollableView refreshes. Check my code @ https://gist.github.com/2729533. Please advise me as well. Thx

@raulriera

This comment has been minimized.

Copy link
Owner Author

@raulriera raulriera commented May 19, 2012

just tested it on iOS... on the iPad is working fine...

@raulriera

This comment has been minimized.

Copy link
Owner Author

@raulriera raulriera commented Jun 11, 2012

This fixes a problem with how commonJS caches things

@johncarmichael

This comment has been minimized.

Copy link

@johncarmichael johncarmichael commented Aug 7, 2013

How do you add this to a scroll view?

@philsmithsonuk

This comment has been minimized.

Copy link

@philsmithsonuk philsmithsonuk commented Oct 2, 2013

@raulriera Brilliant, thanks! :)

@nehalok

This comment has been minimized.

Copy link

@nehalok nehalok commented Nov 26, 2015

@raulriera
How do i scroll to particular view on click of button?
scrollableView.scrolltoView(index);

does not work in case we use this customised paging control.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.