ScrollableView in ScrollVIew is not working

You must Login before you can answer or comment on any questions.

I found that the if scrollableView(horizontal) is added inside the scrollView (Vertical), all of the scroll event will be captured by the scrollView. Could i disable the scroll event of scrollView when i scrolling the scrollableView? 

var topScrollContainerGroup=Titanium.UI.createScrollableView({
                            top:'0dp',
                            height : scrollHeight+'dp',
                            backgroundColor:'#FFF',
                            contentHeight: 'auto',
                            contentWidth: 'auto',
                            showVerticalScrollIndicator:false,
                            showHorizontalScrollIndicator:true,
                            zIndex:100,
                            showPagingControl:true
    }); 
       topScrollContainerGroup.addView(imageView1);
    topScrollContainerGroup.addView(imageView2);
    topScrollContainerGroup.addView(imageView3);
 
    var globalScrollContainer=Titanium.UI.createScrollView({
        top:'50dp',
        contentHeight: 'auto',
        contentWidth: 'auto',
        showVerticalScrollIndicator:false,
        showHorizontalScrollIndicator:false,
        backgroundColor:'#dceffe',
        scrollType: 'vertical',
        layout: 'vertical',
        zIndex:1,
    })
 
    globalScrollContainer.add(topScrollContainerGroup);
    globalScrollContainer.add(otherView1);
    globalScrollContainer.add(otherView2);

2 Answers

Hi Dennis,

Try this code in this last view is scrollview 

var win = Titanium.UI.currentWindow;
 
var view1 = Ti.UI.createView({
    backgroundColor : 'red'
});
var l1 = Ti.UI.createLabel({
    text : 'View 1',
    color : '#fff',
    width : 'auto',
    height : 'auto'
});
view1.add(l1);
 
var view2 = Ti.UI.createView({
    backgroundColor : 'blue'
});
var l2 = Ti.UI.createLabel({
    text : 'Click Me (View 2 - see log)',
    color : '#fff',
    width : 'auto',
    height : 'auto'
});
view2.add(l2);
 
var view3 = Ti.UI.createView({
    backgroundColor : 'green'
});
var l3 = Ti.UI.createLabel({
    text : 'View 3',
    color : '#fff',
    width : 'auto',
    height : 'auto'
});
view3.add(l3);
 
var view4 = Ti.UI.createView({
    backgroundColor : 'black'
});
var l4 = Ti.UI.createLabel({
    text : 'View 4',
    color : '#fff',
    width : 'auto',
    height : 'auto'
});
view4.add(l4);
 
var view5 = Ti.UI.createView({
    backgroundColor : 'black'
});
var l5 = Ti.UI.createLabel({
    text : 'View 5',
    color : '#fff',
    width : 'auto',
    height : 'auto'
});
view5.add(l5);
 
var scrollView = Titanium.UI.createScrollableView({
    views : [view1, view2, view3, view4],
    showPagingControl : true,
    pagingControlHeight : 30,
    maxZoomScale : 2.0,
    currentPage : 1
});
 
var topScrollContainerGroup = Titanium.UI.createScrollableView({
    top : '0dp',
    backgroundColor : '#FFF',
    contentHeight : 'auto',
    contentWidth : 'auto',
    showVerticalScrollIndicator : false,
    showHorizontalScrollIndicator : true,
    zIndex : 100,
    showPagingControl : true
});
topScrollContainerGroup.addView(view1);
topScrollContainerGroup.addView(view3);
topScrollContainerGroup.addView(view4);
 
var globalScrollContainer = Titanium.UI.createScrollView({
    top : '50dp',
    contentHeight : 'auto',
    contentWidth : 'auto',
    showVerticalScrollIndicator : false,
    showHorizontalScrollIndicator : false,
    backgroundColor : '#dceffe',
    scrollType : 'vertical',
    layout : 'vertical',
    zIndex : 1,
})
 
globalScrollContainer.add(topScrollContainerGroup);
globalScrollContainer.add(view2);
globalScrollContainer.add(view5);
 
win.add(globalScrollContainer);

— answered 10 months ago by Nitin Chavda
answer permalink
4 Comments

  • Sorry last view is scrollableView not scrollview.

    — commented 10 months ago by Nitin Chavda

  • Hi Nitin,

    My problem is the scrollableView can not capture the horizontal finger movement correctly, since all the movement is captured by the super view(ScrollView). To make the scrollableView detect my movement, my finger movement must move in exactly horizontal (i.e. Y= not change, X = change).

    When i try to only add the scrollableView to a simple view. it's work. However , it's doesn't work in scrollView.

    — commented 10 months ago by dennis wong

  • Hi Dennis,

    Have you tried above code because it works for me in emulator.

    — commented 10 months ago by Nitin Chavda

  • Show 1 more comment

I get it by disabling the parent scrollview scroll when the scrobableView is being scrolling. Once finished i activated it again.

Hope it helps.

var topScrollContainerGroup=Titanium.UI.createScrollableView({ top:'0dp', height : scrollHeight+'dp', backgroundColor:'#FFF', contentHeight: 'auto', contentWidth: 'auto', showVerticalScrollIndicator:false, showHorizontalScrollIndicator:true, zIndex:100, showPagingControl:true }); topScrollContainerGroup.addView(imageView1); topScrollContainerGroup.addView(imageView2); topScrollContainerGroup.addView(imageView3);

var globalScrollContainer=Titanium.UI.createScrollView({
    top:'50dp',
    contentHeight: 'auto',
    contentWidth: 'auto',
    showVerticalScrollIndicator:false,
    showHorizontalScrollIndicator:false,
    backgroundColor:'#dceffe',
    scrollType: 'vertical',
    layout: 'vertical',
    zIndex:1,
})

globalScrollContainer.add(topScrollContainerGroup);
globalScrollContainer.add(otherView1);
globalScrollContainer.add(otherView2);nerGroup);
globalScrollContainer.add(otherView1);
globalScrollContainer.add(otherView2);

//DISABLE GLOBALSCROLLCONTAINER SCROLL

topScrollContainerGroup.addEvenrListener('scroll',function(e){ globalScrollContainer.scrollingEnabled = false; });

//ENABLE GLOBALSCROLLCONTAINER SCROLL topScrollContainerGroup.addEvenrListener('scrollEnd',function(e){ globalScrollContainer.scrollingEnabled = true; });

Your Answer

Think you can help? Login to answer this question!