我正在使用 Titanium SDK 3.1.1,我的应用程序中的逻辑是这样的:
我有一个类似于 TableView 的 ScrollView,其中包含作为部分工作的视图,每个部分都包含可拖动的视图,每个水平可拖动的视图都有一个touchstart
,touchmove
和touchend
事件来拖动它们。问题是如果我将 ScrollView 的属性设置canCancelEvents
为 false,我就无法滚动 ScrollView。这个问题不会在 iOS 中发生,只会在 Android 中发生。
我尝试canCancelEvents
为 Android 将属性设置为 true,但是当滚动工作时,当我拖动 ScrollView 中的一个视图时,如果我有任何机会垂直拖动它(可拖动视图不垂直拖动,仅水平拖动) 然后 ScrollView 的滚动事件控制该事件并中断拖动。这是我的代码:
// This function create a horizontal draggable View
function evaluationItem(item)
{
var self = Ti.UI.createView({
width:Ti.Platform.displayCaps.platformWidth,
height:88 + dpi
});
var backgroundWorkspace = Ti.UI.createView({
top:0 + dpi,
left:0 + dpi,
backgroundColor:"#404040",
width:Ti.Platform.displayCaps.platformWidth,
height:'100%',
zIndex:0
});
var checkEvaluation = Ti.UI.createImageView({
image:imagesPath + "CheckEvaluation.png",
opacity:0,
left:20 + dpi
});
var notYetEvaluation = Ti.UI.createImageView({
image:imagesPath + "NotYetEvaluation.png",
opacity:0,
right:20 + dpi
});
backgroundWorkspace.add(checkEvaluation);
backgroundWorkspace.add(notYetEvaluation);
var foregroundWorkspace = Ti.UI.createView({
top:0 + dpi,
left:0 + dpi,
backgroundColor:"#FFFFFF",
width:Ti.Platform.displayCaps.platformWidth,
height:'100%',
zIndex:1
});
var foregroundWorkspaceDraggable = Ti.UI.createView({
top:0 + dpi,
left:0 + dpi,
backgroundColor:"transparent",
width:Ti.Platform.displayCaps.platformWidth,
height:'100%',
zIndex:2
});
var curX, curY;
var deltaX, deltaY;
var currentPositionX, currentPositionY;
var initialViewX = parseInt(foregroundWorkspace.getLeft()) , initialViewY = parseInt(foregroundWorkspace.getTop());
var limitToTheRight = Ti.Platform.displayCaps.platformWidth/2.5;
var limitToTheLeft = (-1)* Ti.Platform.displayCaps.platformWidth/2.5;
var neutralColor = "#404040";
var positiveColor = "#79b715";
var negativeColor = "#9e9e9e";
// event for touchstart
foregroundWorkspaceDraggable.addEventListener('touchstart', function(e) {
curX = e.x;
curY = e.y;
});
var hoveringOver = 0;
// event for touchmove, this handles the dragging
foregroundWorkspaceDraggable.addEventListener('touchmove', function(e) {
var currentOpacity = currentPositionX / limitToTheRight;
if(currentOpacity < 0)
currentOpacity = 0;
else if(currentOpacity > 1)
currentOpacity = 1;
checkEvaluation.setOpacity(currentOpacity);
var currentOpacityNotYet = currentPositionX / limitToTheLeft;
if(currentOpacityNotYet < 0)
currentOpacityNotYet = 0;
else if(currentOpacityNotYet > 1)
currentOpacityNotYet = 1;
notYetEvaluation.setOpacity(currentOpacityNotYet);
deltaX = e.x - curX;
currentPositionX = initialViewX + deltaX;
if (currentPositionX > limitToTheRight) {
if (hoveringOver != 1) {
hoveringOver = 1;
backgroundWorkspace.animate({
backgroundColor : positiveColor,
duration : 250
});
}
} else if (currentPositionX <= limitToTheLeft) {
if (hoveringOver != -1) {
hoveringOver = -1;
backgroundWorkspace.animate({
backgroundColor : negativeColor,
duration : 250
});
}
} else {
if (hoveringOver != 0) {
hoveringOver = 0;
backgroundWorkspace.animate({
backgroundColor : neutralColor,
duration : 250
});
}
}
foregroundWorkspace.setLeft(currentPositionX);
});
function recallControl()
{
foregroundWorkspace.animate({
left : 0 + dpi,
duration : 500
});
}
// event for touchend, this handles where the view remains in the end
foregroundWorkspaceDraggable.addEventListener("touchend", function(e){
if (currentPositionX > limitToTheRight) {
foregroundWorkspace.animate({
left : Ti.Platform.displayCaps.platformWidth + dpi,
duration : 500
}, function() {
self.animate({
height : 0 + dpi,
duration : 500
});
});
} else if (currentPositionX <= limitToTheLeft) {
foregroundWorkspace.animate({
left : -Ti.Platform.displayCaps.platformWidth + dpi,
duration : 500
});
} else {
// alert('3');
recallControl();
}
});
var foregroundWorkspaceDecorator = Ti.UI.createView({
width:Ti.UI.FILL,
height:1 + dpi,
backgroundColor:"#d8d8d8",
bottom:0 + dpi,
left:0 + dpi
});
foregroundWorkspace.add(foregroundWorkspaceDecorator);
var evaluationIdView = Ti.UI.createView({
width:20 + dpi,
height:'100%',
top:0 + dpi,
left:10 + dpi,
backgroundColor:"transparent"
});
var evaluationIdLabel = Ti.UI.createLabel({
text : item.id + ".",
font : {
fontSize : 20 + dpi,
fontWeight : "bold"
},
color : item.color
});
evaluationIdView.add(evaluationIdLabel);
foregroundWorkspace.add(evaluationIdView);
var evaluationContentLabel = Ti.UI.createLabel({
text : "This is an evaluation,you can drag to the left or to the right and it will evaluate your kid",
left : 40 + dpi,
width : Ti.UI.FILL,
right : 30 + dpi,
font : {
fontSize : 14 + dpi
},
color : "#7a7a7a"
});
foregroundWorkspace.add(evaluationContentLabel);
self.add(backgroundWorkspace);
self.add(foregroundWorkspace);
self.add(foregroundWorkspaceDraggable);
return self;
}
// function that creates the sections for the ScrollView
function evaluationCategory(category)
{
var backgroundColor = "#229ce5";
switch(category.categoryType)
{
case 0: // blue
backgroundColor = "#229ce5";
break;
case 1: // pink
backgroundColor = "#c13a78";
break;
case 2: // orange
backgroundColor = "#f87739";
break;
case 3: // green
backgroundColor = "#79b715";
break;
case 4: // yellow
backgroundColor = "#ffd024";
break;
}
var self = Ti.UI.createView({
height:Ti.UI.SIZE,
layout:"vertical"
});
var titleView = Ti.UI.createView({
width:Ti.UI.FILL,
height:60 + dpi,
backgroundColor:backgroundColor
});
var titleViewLabel = Ti.UI.createLabel({
text : "physical",
font : {
fontSize : 20 + dpi,
fontWeight : "bold"
},
color : "#FFFFFF",
textAlign : "left",
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
left : 10 + dpi
});
titleView.add(titleViewLabel);
self.add(titleView);
var workspace = Ti.UI.createView({
width:Ti.UI.FILL,
height:Ti.UI.SIZE,
layout:"vertical"
});
for (var i = 0; i < 5; i++) {
workspace.add(evaluationItem({
id : i,
color : backgroundColor
}));
}
self.add(workspace);
return self;
}
// my ScrollView
if(osname === 'android'){
cancelEvents = true;
}
var scrollview = Ti.UI.createScrollView({
top : 0,
left : 0,
contentHeight : Ti.UI.SIZE,
scrollType : 'vertical',
layout : 'vertical',
showVerticalScrollIndicator : true,
canCancelEvents:cancelEvents,
});
scrollview.add(evaluationCategory({
categoryType : 0
}));
scrollview.add(evaluationCategory({
categoryType : 1
}));
scrollview.add(evaluationCategory({
categoryType : 2
}));
scrollview.add(evaluationCategory({
categoryType : 3
}));
在 Android 中似乎存在处理这种行为的问题。我怎样才能使 ScrollView 在必须滚动时滚动,但在我拖动其中的一个视图时不滚动?