ListView 中的 ImageView 缩放答案

【问题标题】：ImageView scaling in ListViewListView 中的 ImageView 缩放
【发布时间】：2015-09-22 15:21:42
【问题描述】：

我正在使用 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
},

【问题讨论】：

标签： android titanium appcelerator titanium-android

【解决方案1】：

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

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

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

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

【讨论】：

是的，我就是这样做的，除了在 .tss 文件中设置图像的高度和宽度。问题是，当我还为 ListItem 或 View 中的 ImageView 设置固定高度时，Titanium 会忽略我的宽度/高度并仍然尝试将图像放入容器中（因此它不会从顶部和底部完全填充它，或左右，取决于图像的纵横比）。
如果您在 tss 中设置高度和宽度，则在传递数据时将其移动到控制器中。只需检查这是否有效，有时模板元素不会采用您在 tss 中指定的值，您需要将其作为分配给 bindid 的对象的一部分发送
两种方法都做过，刚才又检查了一遍，以防万一。还是一样的。

【解决方案2】：

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

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

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

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

【讨论】：