Skip to content

Instantly share code, notes, and snippets.

@raulriera
Created April 19, 2012 02:13
Show Gist options
  • Save raulriera/2417902 to your computer and use it in GitHub Desktop.
Save raulriera/2417902 to your computer and use it in GitHub Desktop.
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
Copy link

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

@raulriera
Copy link
Author

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
Copy link

AH... I like

@wgx731
Copy link

wgx731 commented May 19, 2012

Is this for iphone only?

@wgx731
Copy link

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
Copy link
Author

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

@raulriera
Copy link
Author

This fixes a problem with how commonJS caches things

@johncarmichael
Copy link

How do you add this to a scroll view?

@philsmithsonuk
Copy link

@raulriera Brilliant, thanks! :)

@nehalok
Copy link

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