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

【问题标题】：How to have two ImageViews appear side by side in Titanium如何在 Titanium 中并排显示两个 ImageView
【发布时间】：2015-03-07 17:27:25
【问题描述】：

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

我的合金代码如下所示：

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

仅显示 image1。两个图像都可以，如果我注释掉其中一个 row.add() 调用，剩余的图像看起来很好。我试图让这两个图像并排出现，每个图像占据 50% 的宽度。

【问题讨论】：

尝试将imageView 的宽度减小到49% 或48%，或者删除布局形式row 并将left : '0dp' 赋予image1 和right : '0dp' 到image2.

标签： javascript ios titanium titanium-alloy appcelerator-mobile

【解决方案1】：

以下内容对我来说很好，尝试从您的代码中去除任何差异：

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

【讨论】：

谢谢 Fokke 我会试试看的。
太棒了！这样可行。我认为问题出在我定义封闭视图的方式上，但完全按照您的代码工作。谢谢。
很好的例子。谢谢。

【解决方案2】：

您似乎在左边缘插入两张图片（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
});

【讨论】：

谢谢罗宾。我试过了，但我仍然只看到一张图片。
你看到的图片大小合适吗（尤其是宽度合适）？为了调试，请忽略两张图片的 image 属性并给它们一个边框。将您看不到的图片的边框宽度设置为比另一张图片更大的值。因此，您可以查看两个视图是否相互重叠。为了达到同样的效果，您还可以使您看到的图像透明。
水平布局模式肯定有一些我不理解的基础知识。如果我将行视图的布局更改为合成它一切正常（已做出您建议的更改）！
请尝试从您的 Alloy XML 视图中删除 layout=vertical。这只是一个猜测，我明天会更深入地挖掘。
很难想出一个解决方案，因为你的代码看起来很好。为什么你需要布局而不使用复合布局？

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：