1

我正在使用 Appcelerator 平台开发应用程序，但遇到了问题。

我有一个带有自定义模板的列表视图，我在其中使用远程图像（许多不同大小）填充 ImageView。我希望它们缩放到 100% 宽度和自动高度（宽度和高度为 Ti.UI.Fill 和 Ti.UI.SIZE）。

如果我没有为图像的容器设置高度，则此方法有效，但我希望我的所有 ListItems 具有相同的高度并掩盖太高图像的任何溢出。

当我设置固定高度时，它会尝试将图像放入容器中，因此在左/右或上/下都有边框，具体取决于图像的纵横比（似乎忽略了 Ti.UI.Fill）。

使用 ScrollView 作为容器并禁用滚动以实现我想要的有一个技巧，但是在 Listview 中添加 ScrollView 会使应用程序崩溃。

这能实现吗？

编辑：添加一些示例代码。

这是我的模板声明：

            <Templates>
            <ItemTemplate name="eventsListTemplate">
                <Label bindId="name" id="name" />
                <View id="coverContainer">
                    <ImageView bindId="cover" id="cover" />
                    <View id="overlay"></View>
                </View>
                <Label bindId="startTime" id="startTime" />
                <Label bindId="place" id="place" />
            </ItemTemplate>
        </Templates>

这是我用数据填充列表项的地方：

            var mapped = _.map(events,function(event){
            return {
                name : { text : event.name },
                cover : { image : (event.cover) ? event.cover.source : ''},
                startTime : { text : Alloy.Globals.formatDate(event.startTime) },
                place : { text : (event.place) ? event.place.name : event.owner.name },
                id : event.id
            };
        });

以及相关样式：

"#cover" :{
width: Titanium.UI.FILL,
height : Titanium.UI.SIZE
},
"#coverContainer":{
height: 120
},
4

2 回答 2

1

好的，所以我没有找到如何使用 Titanium 自动执行此操作。

幸运的是，我可以控制远程数据，并且能够将图像的原始宽度和高度包含在数据中。

因此，如果您为 ImageView 设置固定值，它就不会再尝试自己适应并使用这些值。然后是根据设备的宽度计算图像的新尺寸并分配这些尺寸（加上一些条件，用于高度最终低于容器的情况）。

如果这是 Web 开发设置宽度：100%；高度：自动；加溢出：隐藏；因为容器就可以了。

于 2015-07-07T14:43:05.777 回答
0

你能放一些你的xml和js代码吗，如果有一些代码可以检查，会更容易给你回复。

另外我认为您必须使用绑定 ID 在您创建的模板中显示这些图像。如果是，那么除了将图像传递给元素外，您还可以传递要设置的高度和宽度。对于您从遥控器获得的每张图像，如果您的模板有一个图像视图并且这就是您正在设置的内容，它将是这样的。

    var data.bindId = {image : "image from the remote", height: Ti.UI.SIZE, width:Ti.UI.Fill};

用您正在使用的任何 bindId 替换上面代码中的 bindId，并且 data 是您必须传递给列表视图的对象。

于 2015-07-06T03:43:53.507 回答