如何在 Titanium 中并排显示两个 ImageView

Question

我无法让两个 ImageView 在 Titanium iOS 应用程序中并排显示。

我的 Alloy 代码如下所示：

<Alloy> 
 <Window class='container' statusBarStyle='Ti.UI.iPhone.StatusBar.LIGHT_CONTENT'>
  <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>

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

row = Ti.UI.createView({
 width:'100%',
 height:150,
 layout:'horizontal'
}); 

image1 = Ti.UI.createImageView({
 image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[0]["image1"],
 width:'50%',
 height:150,
 left:0,
 top:0
}); 

image2 = Ti.UI.createImageView({
 image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[1]["image1"],
 width:'50%',
 height:150,
 left:0,
 top:0
});

row.add(image1);
row.add(image2); 
$.savedContents.add(row);

$.saved.open();

只有图片 1 出现。两张图片都可以，如果我注释掉 row.add() 调用中的任何一个，剩下的图片看起来很好。我试图让两张图片并排显示，每张占据宽度的 50%。

Answer 1

您似乎是在左边缘插入两张图片（两个 left 属性都设置为 0）。尝试将 image2 的 left=0 更改为 right=0 并删除 left属性。 ìmage2` 的代码现在应该如下所示：

image2 = Ti.UI.createImageView({
    image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[1]["image1"],
    width:'50%',
    height:150,
    right:0, //Changed this one to right
    top:0
});

Answer 2

如果从 row 视图中删除 width:'100%' 会怎么样？视图默认为 Ti.UI.FILL，因此您不需要将 width 设置为 100%，也许这样做会造成麻烦？

Answer 3

当我在我的系统上尝试上面的代码时，它有效。
我只从 .xml 文件
中删除了 require 和 widget 语句并使用
right:0 或 left : "50%"

Answer 4

以下对我来说工作正常，请尝试从您的代码中删除任何差异：

<Alloy>
  <Window backgroundColor="white">
    <View layout="vertical" top="20">
      <View layout="horizontal" height="150">
        <View width="50%" left="0" backgroundColor="red" />
        <View width="50%" left="0" backgroundColor="green" />
      </View>
      <View layout="horizontal" height="150">
        <View width="50%" left="0" backgroundColor="blue" />
        <View width="50%" left="0" backgroundColor="yellow" />
      </View>
    </View>
  </Window>
</Alloy>

如何在 Titanium 中并排显示两个 ImageView

How to have two ImageViews appear side by side in Titanium

javascript

titanium

appcelerator-mobile

ios

titanium-alloy