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?

Midhun MP Midhun MP · Accepted Answer · 2015-03-08T13:09:32

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.

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

1 Answers