2015-03-03 271 views
0

我正在設計一個視圖,使用Android Appcelerator for Android/ios.I需要設計一個時間選擇器(水平)。我設計了水平視圖並在其中輸入了值。 enter image description hereAndroid/ios:Titanium Appcelerator水平滾動

但不知道如何挑選完美的箭頭下的值。以及最後一個數字如何居中(箭頭下方)。 請指導..

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); 
+0

你已經有一些代碼? – 2015-03-03 14:08:18

+0

你可以看看分頁滾動。 http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.ScrollableView – 2015-03-03 14:09:51

+0

您現有工作的代碼將有所幫助。 – Martin 2015-03-03 19:16:51

回答

1

我修改你的代碼滾動結束時記錄中間的數字:

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(); 

你需要聽雙方scrollenddragend因爲scrollend會如果dragend正在減速,則僅會觸發。然後用scrollView的偏移量加上它的總寬度的一半和圓的寬度,可以計算出中間數字。

但是就像Robin說的那樣,你最好使用ScrollableView並且使用hitRectclipViews來播放不僅僅顯示選定的頁面(數字),而且還顯示它的一些右側和左側。

+0

聽衆不工作.. scrollAlbums.addEventListener('scrollend',pick); scrollAlbums.addEventListener('dragend',pick); – GaneshKumar 2015-03-04 15:51:38

+0

你是怎麼意思它不起作用的?我在這裏測試了確切的粘貼代碼,它對我來說工作得很好。 – 2015-03-05 07:50:14

+0

我試着完全沒有編輯任何東西的代碼,但scrollAlbums不聽任何東西,也沒有在控制檯中打印任何東西。所以只有困惑.. – GaneshKumar 2015-03-05 14:59:20