ImageView scaling in ListView

Question

I'm developing an app using the Appcelerator platform and I've run into an issue.

I have a listview with a custom template where I'm populating an ImageView with remote images (lots of different sizes). I'd like them to scale to 100% width and auto height ( Ti.UI.Fill and Ti.UI.SIZE for width and height).

This works if I don't set a height for the image's container, but I'd like all of my ListItems to have the same height and mask any overflow from too tall images.

When I set a fixed height it tries to fit the image in the container, so there's borders on the left/right or top/bottom, depending on the aspect ratio of the image (seems to ignore Ti.UI.Fill).

There's a trick with using a ScrollView as a container and disabling scrolling on that to achieve what I want, but adding a ScrollView inside a Listview crashes the app.

Would this be achievable?

EDIT: Adding some sample code.

This is my Template declaration:

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

This is where I'm populating a listitem with data:

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

And the relevant styles:

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

score 1 · Accepted Answer · answered Jul 07 '15 at 14:43

Okay, so I didn't find out how to do this with Titanium automatically.

Luckily I had control over the remote data and was able to include the image's original widths and heights with the data.

So, if you set fixed values for the ImageView, it doesn't try to fit it itself anymore and uses those. Then it was a matter of calculating new dimensions for the image based on the device's width and assigning those ( plus a few conditionals for cases where the height would end up lower than the container).

If this was web development setting width: 100%; height: auto; plus oveflow: hidden; for the container would've done the trick.

Himanshu Justa · Answer 2 · 2015-07-06T03:51:07.037

0

Can you please put some code of you xml and js, would be easier to give you a response if some code is available to check.

Also I think you must be using the bind Id to show those images in the template you have created. If yes then along with passing the image to the element, you can pass the height and width you would want to set. for each image you get from the remote, it will be something like this if your template has an Image view and that is what you are setting.

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

replace bindId in above code with whatever bindId you are using and data is the object which you must be passing to the list view.

edited Jul 06 '15 at 03:51

answered Jul 06 '15 at 03:43

Himanshu Justa

1
2

Yup, that's how I'm doing it, except setting the image's height and width in a .tss file. The thing is, when I also set a fixed height for the ListItem or View the ImageView is in, Titanium ignores my width/height and still tries to fit the image in the container (so it doesn't completely fill it from top and bottom, or left and right, depending on the aspect ratio of the image). – Tanel Jul 06 '15 at 09:56
If you are setting the height and width in the tss then move it in the controller when you are passing the data. Just check if this works, sometimes the template element doesn't take the value you specify in the tss, you would need to send that as the part of the object which you assign to the bindid – Himanshu Justa Jul 06 '15 at 15:43
I've done it both ways, checked again just now just in case. Still the same thing. – Tanel Jul 06 '15 at 16:17

ImageView scaling in ListView

2 Answers2