[英]Android/ios: Titanium Appcelerator horizontal scrolling
I am designing a view using Titanium Appcelerator for Android/ios.I need to design a time picker (horizontal). 我正在使用适用于Android / ios的Titanium Appcelerator设计视图。我需要设计一个时间选择器(水平)。 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);
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. 您需要同时收听scrollend
和dragend
因为scrollend
仅在dragend
减速时才会触发。 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. 然后,使用scrollView的偏移量加上其总宽度的一半和圆圈的宽度,可以计算出中间的数字。
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. 但是,就像罗宾所说的那样,您最好使用ScrollableView并与hitRect
和clipViews
一起播放,以hitRect
显示所选页面(编号),还显示其中的一些左右页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.