Search code examples
javascriptandroidiosscrolltitanium

make a view scroll horizontally rather than vertically


I'm struggling to make a scroll view scroll sidewards rather than up and down in titanium. I'll need the solution for both iOS and Android.

var challengesScrollView= Ti.UI.createScrollView({
    top: '60%',
    height: c1Container.height,
    width: '60%',
    backgroundColor: 'yellow',
    zIndex: 9000,
    /* left & right work too */
    contentHeight:'auto',
});

challengesScrollView.add(c1Container);
challengesScrollView.add(c2Container);
challengesScrollView.add(c3Container);
mainContainer.add(challengesScrollView);

UPDATE:

my mainContainer is the following:

var mainContainer= Ti.UI.createView({
    left: '5%',
    right:'5%',
    top: '9%',
    bottom:'15%',
});

and c1Container is:

var c1Container= Ti.UI.createView({
    top:'1%',
    width:'70dp',
    height: '90dp',
    zIndex:20, 
    left:'10dp',
    backgroundColor:'#3b214a',
    borderRadius: 5
});

and it contains the following:

var c1PicView= Ti.UI.createView({
    width: '55dp',
    height: '55dp',
    top: '5%',
    borderRadius: 5,
    //backgroundColor:'pink',
    zIndex:5
});

var c1Pic= Ti.UI.createImageView({
    image:'girl.jpg',
    width: c1PicView.width,
    height: c1PicView.height,
    zIndex:5
});

var cName= 'Mary';
var c1Name=Ti.UI.createLabel({
    color: 'white',
    text: cName,
    font:{fontSize: '14sp'},
    top: '60dp' 
});

c1Container.add(c1PicView);
c1PicView.add(c1Pic);
c1Container.add(c1Name);

c2 is the same as c1 apart from the name

I'm not sure how to position c1Container, c2Container and c3Container etc. so that they will just add on the view sidewards. I can't give actual pixel, left or right positions because the scroll view could have up to 20 mini containers. All help appreciated


Solution

  • simple thing is that you just need to set layout property to horizontal.