[TIMOB-24313] TiAPI: Add "scalingMode" property to Ti.UI.ImageView

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2021-08-24T09:57:57.000+0000
Affected Version/s	n/a
Fix Version/s	Release 10.1.0
Components	Android, iOS
Labels	android, imageview, ios, scaling
Reporter	Flavio De Stefano
Assignee	Joshua Quick
Created	2017-01-16T13:52:29.000+0000
Updated	2021-09-20T21:14:59.000+0000

Description

*Summary:* Add ability to control how Ti.UI.ImageView scales its image. In particular, developers want the ability to crop the image. *Proposed Solution:* Add a new "scalingMode" property to Ti.UI.ImageView supporting the following constants... * Ti.Media.IMAGE_SCALING_AUTO // Legacy behavior. * Ti.Media.IMAGE_SCALING_NONE // No scaling. Show image as-is. * Ti.Media.IMAGE_SCALING_FILL // Stretches image disproportionally. * Ti.Media.IMAGE_SCALING_ASCPECT_FILL // Crops proportionally. * Ti.Media.IMAGE_SCALING_ASCPECT_FIT // Letterbox/Pillarbox proportionally. The above property name and scaling constants match the names used by our Ti.Media.VideoPlayer for consistency. https://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media.VideoPlayer-property-scalingMode *Future:* In the future, we could add properties "horizontalAlignment" and "verticalAlignment" to control where the image should be aligned to within the image view container. For now, we should only support center alignment since that would satisfy most developers.

Attachments

File	Date	Size
ImageScalingChangeTest.js	2021-05-01T00:27:23.000+0000	2238

Comments

Hans Knöchel 2017-01-16

Hey [~kopiro], thanks for the proposal! Can you add a view more infos and example code before we move it to TIMOB? Thx!
Flavio De Stefano 2017-01-16

Yup, sure!
Hans Knöchel 2017-01-16

[~kopiro] How could the developer control where to "cut" the image. For example, if I want to let the right part overflow and only show the left side.
Flavio De Stefano 2017-01-16

Now, he couldn't, but to do that we have to complicate things a little bit. How do you suggest to proceed?
Hans Knöchel 2017-01-16

We take it as it if for now! But for 6.2.0, 6.1.0 is already pretty full.
Hans Knöchel 2017-08-11

There are actually many content-modes we could expose, see [the Apple docs](https://developer.apple.com/documentation/uikit/uiviewcontentmode?language=objc) for more infos. I'd say we move it out of 6.2.0 and take full care of it in the 7.0.0 timeframe, so have a solid solution instead of a rushed integration. Thanks!
Joshua Quick 2017-08-11

FYI: Here are the equivalent Android ImageView scale modes... https://developer.android.com/reference/android/widget/ImageView.ScaleType.html Titanium's Android ImageView is currently always using a Matrix scale mode to rotate photos to their upright position, but this photo/image rotation can be handled via an Android "Drawable" wrapper instead. (I have a working, but unfinished, solution that already handles this at the Drawable level.)
Andrea Jonus 2019-06-18

Is this feature still planned? It would be really useful to have a common API to handle all the different scale modes. In the meantime, I'm still using a custom SDK with the PR by @kopiro
Michael Gangolf 2020-11-22

Hopefully we can get this in the main SDK: https://github.com/appcelerator/titanium_mobile/pull/12285 Going with scaleType to make it more flexibel and use the following constants: var scaleTypes = [ Ti.Media.IMAGE_SCALING_DEFAULT, Ti.Media.IMAGE_SCALING_CENTER, Ti.Media.IMAGE_SCALING_CENTER_CROP, Ti.Media.IMAGE_SCALING_CENTER_INSIDE ] someone else need to make the iOS part ;-)
Brenton House 2020-11-22

Thank you [~michael]!!
Joshua Quick 2021-04-28

[~michael], the below PR I've written is intended to replace yours (if you don't mind). It adds iOS support, handles Android EXIF orientation/mirroring, and matches the same scaling property/constant naming convention used by Ti.Media.VideoPlayer. PR (master): https://github.com/appcelerator/titanium_mobile/pull/12753

Michael Gangolf 2021-09-18

[~jquick] the default value is wrong in my tests with 10.1.0.RC

    var win = Ti.UI.createWindow({
    	title: "image",
    	backgroundColor: '#fff'
    });
    
    var img = Ti.UI.createImageView({
      image:"https://picsum.photos/200",
      width: Ti.UI.FILL,
      height: 30,
      // scalingMode: Ti.Media.IMAGE_SCALING_FILL
    })
    win.add(img);
    
    win.open();

10.0.2.GA: image will be streched 10.1.0.RC: image will stay small with correct aspect ratio 10.1.0.RC with scalingMode: Ti.Media.IMAGE_SCALING_FILL: looks like 10.0.2.GA

Joshua Quick 2021-09-20

[~michael], thanks for reporting this. I've written this up via a separate ticket: [TIMOB-28537]

JSON Source