Android/ios: Titanium Appcelerator horizontal scrolling

Question

I am designing a view using Titanium Appcelerator for Android/ios.I need to design a time picker (horizontal). I have designed the view that is horizontal and entered values in it.

But Dont know how to pick values that are perfectly under the arrow. And how the last number will come to center(under the arrow). Please guide..

CODE:

var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'});
var scrollAlbums = Ti.UI.createScrollView({
   bottom: 10,
   contentHeight: Ti.UI.SIZE, 
   contentWidth: Ti.UI.SIZE, 
   height: 95,
   layout: 'horizontal',
   showHorizontalScrollIndicator: false,
   showVerticalScrollIndicator: true, 
   scrollType: 'horizontal',
    horizontalWrap: false,
   width: Ti.UI.FILL 
});
var data=[];
var circle=[];
for(var i=0;i<20;i++){
    circle[i] = Titanium.UI.createLabel({
        text:i,
        height:50,
        width:50,   
        borderRadius:25,
        backgroundColor:'#336699'});
    scrollAlbums.add(circle[i]);
}
win1.add(scrollAlbums);

Answer 1

I modified your code to log the middle number when scrolling ends:

var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'});
var scrollAlbums = Ti.UI.createScrollView({
   bottom: 10,
   contentHeight: Ti.UI.SIZE, 
   contentWidth: Ti.UI.SIZE, 
   height: 95,
   layout: 'horizontal',
   showHorizontalScrollIndicator: false,
   showVerticalScrollIndicator: true, 
   scrollType: 'horizontal',
    horizontalWrap: false,
   width: Ti.UI.FILL 
});
var circleWidth = 50;
function pick(e) {
  if (e.type === 'dragend' && e.decelerate) {
    return;
  }
  console.info('Number: ' + Math.round((e.source.contentOffset.x + (e.source.size.width / 2)) / circleWidth));
}
scrollAlbums.addEventListener('scrollend', pick);
scrollAlbums.addEventListener('dragend', pick);
var data=[];
var circle=[];
for(var i=0;i<20;i++){
    circle[i] = Titanium.UI.createLabel({
        text:i,
        height:circleWidth,
        width:circleWidth,   
        borderRadius:circleWidth/2,
        backgroundColor:'#336699'});
    scrollAlbums.add(circle[i]);
}
win1.add(scrollAlbums);
win1.open();

You need to listen to both scrollend and dragend because scrollend will only fire if dragend was decelerating. Then with the offset of the scrollView plus half of its total width and the width of the circles you can calculate the middle number.

But like Robin says, you better use ScrollableView and play with hitRect and clipViews to show not just the selected page (number) but also a few right and left of it.