如何将图像网格添加到 Titanium 中的 ScrollView

Question

我正在尝试将两个图像的行添加到 Titanium 中的 ScrollView。我遇到了一个问题，因为只显示了一行。

我的 Alloy 代码如下所示：

<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>

我的控制器代码如下所示：

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

如果我将行视图直接添加到 $.savedContents 视图（按照上面代码中注释掉的行），我会正确地看到所有行（每行两张图片）。如果我通过 createScrollView 执行此操作，我只会得到一行图像。我需要使用 scrollView 使图像可滚动。

有人知道我做错了什么吗？

Answer 1

默认情况下，布局属性具有值 composite。因此 scrollView 具有复合布局，因此您需要为该视图 (row) 指定定位属性或 "pins"（顶部、底部、左侧、右侧和中心）。在您的代码中，您只指定了宽度和高度，因此所有视图都将在父视图 (ScrollView) 中居中。

根据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.

如何将图像网格添加到 Titanium 中的 ScrollView

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

javascript

appcelerator-mobile

ios

titanium-alloy