Merge pull request #2606 from NativeScript/raikov/tint-color

Added tintColor property in {N} ImageView

tns-core-modules/ui/image/image.android.ts

@@ -108,6 +108,17 @@ export class ImageStyler implements style.Styler {
         background.ad.onBackgroundOrBorderPropertyChanged(v);
     }
 
+    // tint color
+    private static setColorProperty(view: view.View, newValue: any) {
+        var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
+        imageView.setColorFilter(newValue);
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: number) {
+        var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
+        imageView.clearColorFilter();
+    }
+
     public static registerHandlers() {
         // Use the same handler for all background/border properties
         // Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
@@ -119,6 +130,10 @@ export class ImageStyler implements style.Styler {
         style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
             ImageStyler.setBorderWidthProperty,
             ImageStyler.resetBorderWidthProperty), "Image");
+
+        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
+            ImageStyler.setColorProperty,
+            ImageStyler.resetColorProperty), "Image");
     }
 }
 

tns-core-modules/ui/image/image.ios.ts

@@ -2,6 +2,8 @@ import imageCommon = require("./image-common");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
 import enums = require("ui/enums");
+import style = require("ui/styling/style");
+import view = require("ui/core/view");
 import * as trace from "trace";
 import * as utils from "utils/utils";
 
@@ -39,6 +41,7 @@ function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeD
 export class Image extends imageCommon.Image {
     private _ios: UIImageView;
     private _imageSourceAffectsLayout: boolean = true;
+    private _templateImageWasCreated: boolean = false;
 
     constructor() {
         super();
@@ -54,7 +57,21 @@ export class Image extends imageCommon.Image {
         return this._ios;
     }
 
+    public _setTintColor(value: any) {
+       if (value !== null && this._ios.image && !this._templateImageWasCreated) {
+             this._ios.image = this._ios.image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
+             this._templateImageWasCreated = true;
+         }
+         this._ios.tintColor = value;
+    }
+
     public _setNativeImage(nativeImage: any) {
+        if (this.style.color && nativeImage) {
+            nativeImage = nativeImage.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
+            this._templateImageWasCreated = true;
+        } else {
+            this._templateImageWasCreated = false;
+        }
         this.ios.image = nativeImage;
 
         if (this._imageSourceAffectsLayout) {
@@ -135,3 +152,24 @@ export class Image extends imageCommon.Image {
         return { width: scaleW, height: scaleH };
     }
 } 
+
+export class ImageStyler implements style.Styler {
+    //Text color methods
+    private static setColorProperty(view: view.View, newValue: any) {
+        var image = <Image>view;
+        image._setTintColor(newValue);
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var image = <Image>view.ios;
+        image._setTintColor(null);
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
+            ImageStyler.setColorProperty,
+            ImageStyler.resetColorProperty), "Image");
+    }
+}
+
+ImageStyler.registerHandlers();