Skip to content

Commit 5df3ced

Browse files
author
Tsvetan Raikov
committed
Added tintColor property in {N} ImageView
1 parent aed87e6 commit 5df3ced

File tree

5 files changed

+54
-6
lines changed

5 files changed

+54
-6
lines changed

‎tns-core-modules/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "tns-core-modules",
33
"description": "Telerik NativeScript Core Modules",
4-
"version": "2.2.1",
4+
"version": "2.3.0",
55
"homepage":"https://www.nativescript.org",
66
"repository": {
77
"type": "git",
@@ -24,12 +24,12 @@
2424
"license": "Apache-2.0",
2525
"typings": "tns-core-modules.d.ts",
2626
"dependencies": {
27-
"tns-core-modules-widgets": "2.2.0"
27+
"tns-core-modules-widgets": "next"
2828
},
2929
"nativescript": {
3030
"platforms": {
31-
"ios": "2.2.0",
32-
"android": "2.2.0"
31+
"ios": "2.1.1",
32+
"android": "2.1.1"
3333
}
3434
}
3535
}

‎tns-core-modules/ui/image/image-common.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import definition = require("ui/image");
66
import enums = require("ui/enums");
77
import platform = require("platform");
88
import utils = require("utils/utils");
9-
9+
import color = require("color");
1010
import * as types from "utils/types";
1111

1212
var SRC = "src";
@@ -54,6 +54,13 @@ export class Image extends view.View implements definition.Image {
5454
this._setValue(Image.imageSourceProperty, value);
5555
}
5656

57+
get tintColor(): color.Color {
58+
return null;
59+
}
60+
61+
set tintColor(value: color.Color) {
62+
}
63+
5764
get src(): any {
5865
return this._getValue(Image.srcProperty);
5966
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import style = require("ui/styling/style");
66
import view = require("ui/core/view");
77
import background = require("ui/styling/background");
88
import utils = require("utils/utils");
9+
import color = require("color");
910

1011
global.moduleMerge(imageCommon, exports);
1112

@@ -56,11 +57,21 @@ function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeD
5657

5758
export class Image extends imageCommon.Image {
5859
private _android: org.nativescript.widgets.ImageView;
60+
private _tintColor: color.Color = null;
5961

6062
get android(): org.nativescript.widgets.ImageView {
6163
return this._android;
6264
}
6365

66+
get tintColor(): color.Color {
67+
return this._tintColor;
68+
}
69+
70+
set tintColor(value: color.Color) {
71+
this._tintColor = value;
72+
this._android.setColorFilter(value.android);
73+
}
74+
6475
public _createUI() {
6576
this._android = new org.nativescript.widgets.ImageView(this._context);
6677
}

‎tns-core-modules/ui/image/image.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ declare module "ui/image" {
55
import dependencyObservable = require("ui/core/dependency-observable");
66
import imageSource = require("image-source");
77
import view = require("ui/core/view");
8+
import color = require("color");
89

910
/**
1011
* Represents a class that provides functionality for loading and streching image(s).
@@ -51,5 +52,10 @@ declare module "ui/image" {
5152
* - **async** - will try to load in the background, may appear with short delay, good for large images.
5253
*/
5354
loadMode: string; // "sync" | "async";
55+
56+
/**
57+
* Gets or sets a color that is used to tint the image pixels using a single color.
58+
*/
59+
tintColor: color.Color;
5460
}
5561
}

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import imageCommon = require("./image-common");
22
import dependencyObservable = require("ui/core/dependency-observable");
33
import proxy = require("ui/core/proxy");
44
import enums = require("ui/enums");
5+
import color = require("color");
6+
import utilsModule = require("utils/utils");
57
import * as trace from "trace";
68
import * as utils from "utils/utils";
79

@@ -39,7 +41,8 @@ function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeD
3941
export class Image extends imageCommon.Image {
4042
private _ios: UIImageView;
4143
private _imageSourceAffectsLayout: boolean = true;
42-
44+
private _templateImageWasCreated: boolean = false;
45+
4346
constructor() {
4447
super();
4548

@@ -54,7 +57,28 @@ export class Image extends imageCommon.Image {
5457
return this._ios;
5558
}
5659

60+
get tintColor(): color.Color {
61+
if (this._ios.tintColor) {
62+
return utilsModule.ios.getColor(this._ios.tintColor);
63+
}
64+
return null;
65+
}
66+
67+
set tintColor(value: color.Color) {
68+
if (value !== null && this._ios.image && !this._templateImageWasCreated) {
69+
this._ios.image = this._ios.image.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAlwaysTemplate);
70+
this._templateImageWasCreated = true;
71+
}
72+
this._ios.tintColor = value.ios;
73+
}
74+
5775
public _setNativeImage(nativeImage: any) {
76+
if (this._ios.tintColor && nativeImage) {
77+
nativeImage = nativeImage.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAlwaysTemplate);
78+
this._templateImageWasCreated = true;
79+
} else {
80+
this._templateImageWasCreated = false;
81+
}
5882
this.ios.image = nativeImage;
5983

6084
if (this._imageSourceAffectsLayout) {

0 commit comments

Comments
 (0)