Quantcast
Channel: Appcelerator Developer Center Q&A Tag Feed (android)
Viewing all articles
Browse latest Browse all 7655

Can't scroll ScrollView when a View inside it triggers an event in Android

$
0
0

I'm working with Titanium SDK 3.1.1 and the logic in my app is like this:

I have a ScrollView that resembles a TableView which contains Views that work as sections, each section contains draggable Views, each of this horizontally draggable Views has a touchstart, touchmove and touchend event to drag them. The problem is that if I set the ScrollView's property canCancelEvents to false, I can't scroll the ScrollView. This problem doesn't happen in iOS, only in Android.

I tried to set the canCancelEvents property to true for Android, but while the scroll works, while I'm dragging one of the views inside the ScrollView, if by any chance I drag it vertically (the draggable views don't drag vertically, only horizontally) then the ScrollView's scroll event takes control of the event and the drag is interrupted.

This is my code:

// 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
    }));

Viewing all articles
Browse latest Browse all 7655

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>