feat(image): new noRatioEnforce property

Author: farfromrefug

packages/image/platforms/android/java/com/nativescript/image/DraweeView.java

@@ -38,6 +38,7 @@ public class DraweeView extends SimpleDraweeView {
     public int imageWidth = 0;
     public int imageHeight = 0;
     public boolean isUsingOutlineProvider = false;
+    public boolean noRatioEnforce = false;
     private static Paint clipPaint;
 
     private boolean mLegacyVisibilityHandlingEnabled = false;
@@ -166,10 +167,11 @@ protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         int width = MeasureSpec.getSize(widthMeasureSpec);
         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
         int height = MeasureSpec.getSize(heightMeasureSpec);
+
+        boolean finiteWidth = widthMode == android.view.View.MeasureSpec.EXACTLY;
+        boolean finiteHeight = heightMode == android.view.View.MeasureSpec.EXACTLY;
         float aspectRatio = this.getAspectRatio();
-        if (aspectRatio > 0) {
-            boolean finiteWidth = widthMode == android.view.View.MeasureSpec.EXACTLY;
-            boolean finiteHeight = heightMode == android.view.View.MeasureSpec.EXACTLY;
+        if (aspectRatio > 0 && !this.noRatioEnforce) {
             Object scaleType = getHierarchy().getActualImageScaleType();
             if (scaleType instanceof AbstractScaleType) {
                 final float rotation = ((AbstractScaleType)scaleType).getImageRotation();
@@ -195,6 +197,13 @@ protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
                     }
                 }
             }
+        } else {
+            if (!finiteWidth && finiteHeight) {
+                widthMeasureSpec = android.view.View.MeasureSpec.makeMeasureSpec.makeMeasureSpec(0, android.view.View.MeasureSpec.AT_MOST);
+            }
+            else if (!finiteHeight && finiteWidth) {
+                heightMeasureSpec = android.view.View.MeasureSpec.makeMeasureSpec.makeMeasureSpec(0, android.view.View.MeasureSpec.AT_MOST);
+            }
         }
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
     }

src/image/index-common.ts

@@ -186,6 +186,7 @@ export const tintColorProperty = new Property<ImageBase, Color>({ name: 'tintCol
 export const alwaysFadeProperty = new Property<ImageBase, boolean>({ name: 'alwaysFade', valueConverter: booleanConverter, defaultValue: false });
 export const fadeDurationProperty = new Property<ImageBase, number>({ name: 'fadeDuration', valueConverter: (v) => parseFloat(v) });
 export const noCacheProperty = new Property<ImageBase, boolean>({ name: 'noCache', defaultValue: false, valueConverter: booleanConverter });
+export const noRatioEnforceProperty = new Property<ImageBase, boolean>({ name: 'noRatioEnforce', affectsLayout: true, defaultValue: false, valueConverter: booleanConverter });
 export const roundTopLeftRadiusProperty = new Property<ImageBase, CoreTypes.LengthType>({
     name: 'roundTopLeftRadius',
     defaultValue: 0,
@@ -300,6 +301,7 @@ export abstract class ImageBase extends View {
     public loadMode: 'sync' | 'async';
     public alwaysFade: boolean;
     public noCache: boolean;
+    public noRatioEnforce: boolean;
     public tintColor: Color;
     headers: Record<string, string>;
 
@@ -432,6 +434,7 @@ noCacheProperty.register(ImageBase);
 clipToBoundsProperty.register(ImageBase);
 animatedImageViewProperty.register(ImageBase);
 loadModeProperty.register(ImageBase);
+noRatioEnforceProperty.register(ImageBase);
 // roundRadiusProperty.register(ImageBase as any);
 
 // ImageBase.blendingModeProperty.register(ImageBase);

src/image/index.android.ts

@@ -23,6 +23,7 @@ import {
     imageRotationProperty,
     lowerResSrcProperty,
     needRequestImage,
+    noRatioEnforceProperty,
     placeholderImageUriProperty,
     progressBarColorProperty,
     roundAsCircleProperty,
@@ -587,6 +588,10 @@ export class Img extends ImageBase {
         this.nativeViewProtected.setClipToOutline(value?.hasBorderRadius());
     }
 
+    [noRatioEnforceProperty.setNative](value: boolean) {
+        this.nativeViewProtected.noRatioEnforce = value;
+    }
+
     // [ImageBase.blendingModeProperty.setNative](value: string) {
     //     switch (value) {
     //         case 'multiply':
@@ -627,7 +632,7 @@ export class Img extends ImageBase {
                     //     if (identifier >= 0 && isVectorDrawable(this._context, identifier)) {
                     //         drawable = getBitmapFromVectorDrawable(this._context, identifier);
                     //     }
-                    // } else 
+                    // } else
                     if (Utils.isFontIconURI(src)) {
                         const fontIconCode = src.split('//')[1];
                         if (fontIconCode !== undefined) {

src/image/index.ios.ts

@@ -340,7 +340,7 @@ export class Img extends ImageBase {
         // if (Trace.isEnabled()) {
         //     CLog(CLogTypes.info, 'onMeasure', this.src, widthMeasureSpec, heightMeasureSpec, width, height, this.aspectRatio, image && image.imageOrientation);
         // }
-        if (image || this.aspectRatio > 0) {
+        if (image || this.aspectRatio > 0 || !this.noRatioEnforce) {
             const nativeWidth = image ? layout.toDevicePixels(image.size.width) : 0;
             const nativeHeight = image ? layout.toDevicePixels(image.size.height) : 0;
             const imgRatio = nativeWidth / nativeHeight;
@@ -365,6 +365,12 @@ export class Img extends ImageBase {
             if (Trace.isEnabled()) {
                 CLog(CLogTypes.info, 'onMeasure', this.src, this.aspectRatio, finiteWidth, finiteHeight, width, height, nativeWidth, nativeHeight, widthMeasureSpec, heightMeasureSpec);
             }
+        } else {
+            if (!finiteWidth && finiteHeight) {
+                widthMeasureSpec = layout.makeMeasureSpec(0, layout.AT_MOST);
+            } else if (!finiteHeight && finiteWidth) {
+                heightMeasureSpec = layout.makeMeasureSpec(0, layout.AT_MOST);
+            }
         }
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
     }

src/image/typings/android.d.ts

@@ -5,6 +5,7 @@ declare namespace com {
     export namespace nativescript {
         export namespace image {
             class DraweeView extends facebook.drawee.view.SimpleDraweeView {
+                noRatioEnforce: boolean;
                 imageWidth: number;
                 imageHeight: number;
                 setUri(uri: globalAndroid.net.Uri, options: string, listener: facebook.drawee.controller.ControllerListener);
@@ -20,9 +21,7 @@ declare namespace com {
             class BaseDataSubscriber extends facebook.datasource.BaseDataSubscriber<any> {
                 public constructor(listener: BaseDataSubscriberListener);
             }
-            class OkHttpNetworkFetcher extends facebook.imagepipeline.backends.okhttp3.OkHttpNetworkFetcher {
-
-            }
+            class OkHttpNetworkFetcher extends facebook.imagepipeline.backends.okhttp3.OkHttpNetworkFetcher {}
         }
     }
 }