Appcelerator Titanium - don't stretch image to ImageView dimentions

1
votes

I have an image of size 1024x1024 and I want to have it a background as an ImageView object. I've set the ImageView height and width to be the size of the device and loaded the image - what happens is that the image shows the entire image squeezed to the given dimensions.

What I would like to see is not the entire image - I want it to scale to show it centered, and the parts of the image that don't fit the screen to not show. What my end result should be just setting the height and the width whatever is disposable will be overflowed and hidden.

How can I set an image not to stretch?

2
appceleratorappcelerator-titaniumappcelerator-alloy

2 Answers

3
votes

What your looking for is a clipped image. This affect is best achieved using a combination of View with clipping turned on and an ImageView.

As an example, we'll use a large image and the code below.

<Alloy>
<Window class="container"  backgroundColor="#000">
    <View clipMode="Titanium.UI.iOS.CLIP_MODE_ENABLED" width="200">
        <ImageView image="/images/Moonset_over_ESO's_Very_Large_Telescope.jpg" height="2336" width="3504"/>
    </View>
</Window>
</Alloy>

Note that we have enabled clipping on the parent View, and are using it to define the actual width we want everything rendered on the Screen. The ImageView is then used with the actual width / height of the image to be rendered. Because we are not setting a top,left,right,bottom properties, the ImageView will render itself centered in the parent view, with its overflow hidden.

This provides the desired effect as shown in the image below.

enter image description here

1
votes

I think you mean the image property of the ImageView and not the backgroundImage. If you use a normal view and set the backgroundImage it will be stretched. From the docs:

Specifying either a width or height property for this view will scale its image(s) with the aspect ratio maintained, up to a maximum size that does not exceed its parent view.

If you want to center the image you could just place it in a View and set the width/height to the max value (or calculate the aspect ratio and set both values corretly) and it will be centered in the surrounding View

XML

<Alloy>

    <Window >
        <ImageView id="img"/>
    </Window>

</Alloy>

JS

$.img.image = "/images/1.jpg";
$.img.width = 200;
$.index.open();

Image original size: 1080x720. Display inside the app: 200px width not stretched and in the middle of the window (Android, Ti 5.1.2, TiShadow on device)