ListView 中的 ImageView 缩放

Question

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

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

如果我没有为图像的容器设置高度，这会起作用，但我希望我的所有 ListItem 具有相同的高度，并屏蔽太高图像的任何溢出。

当我设置固定高度时，它会尝试让图像适合容器，因此 left/right 或 top/bottom 上有边框，具体取决于图像的纵横比（似乎忽略了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
},

Answer 1

能不能把你的xml和js的一些代码放上来，如果有代码可以查一下就更容易给你回复了。

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

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

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

Answer 2

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

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

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

如果这是web开发设置宽度：100%；高度：自动；加上溢出：隐藏；因为容器就可以解决问题。

ListView 中的 ImageView 缩放

ImageView scaling in ListView

android

titanium

appcelerator

titanium-android