How to add a grid of images to a ScrollView in Titanium

Question

I am trying to add rows of two images to a ScrollView in Titanium. I am having a problem in that only one row gets shown.

My Alloy code looks like this:

 <Alloy> <Window class='container' statusBarStyle='Ti.UI.iPhone.StatusBar.LIGHT_CONTENT'> // Make ios status bar correct color <View height='20' top='0' left='0' backgroundColor='#01B6AC'></View> <View id = 'savedContents' layout='vertical' top='20'> </View> <Require type='view' src='bottomBar' id='bottomBar'/> <Widget id="fa" src="com.mattmcfarland.fontawesome"/> </Window> </Alloy> 

My Controller code looks like this:

 var scrollView = Ti.UI.createScrollView({ contentWidth: 'auto', contentHeight: 'height', showVerticalScrollIndicator: false, showHorizontalScrollIndicator: false, width: '100%', height: 400, top: 0 }); for (i=0; i < venueDetails.length; i++) { row = Ti.UI.createView({ width:'100%', height:150, layout:'composite' }); image1 = Ti.UI.createImageView({ image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[i]["image1"], width:'50%', height:150, left:0, top:0 }); row.add(image1); if (i+1 < venueDetails.length) { image2 = Ti.UI.createImageView({ image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[i+1]["image1"], width:'50%', height:150, left:'50%', top:0 }); row.add(image2); } //$.savedContents.add(row); scrollView.add(row); } $.savedContents.add(scrollView); 

If I add the row views directly to the $.savedContents view (as per the commented out line in the code above) I see all of the rows correctly (two images per row). If I do this via a createScrollView I only get one row of images. I need to use the scrollView to make the images scrollable.

Anyone know what I am doing wrong?

Answer 1

By default the layout property has a value composite . So the scrollView has the composite layout, so you need to specify the positioning properties or "pins" (top, bottom, left, right and center) for that view ( row ). In your code you only specified the width and height, so all views will be centered in the parent view (ScrollView).

According to Titanium.UI.View-property-layout Reference :

composite (or absolute). Default layout. A child view is positioned based on its positioning properties or "pins" (top, bottom, left, right and center). If no positioning properties are specified, the child is centered.