Skip to content

Commit b55c16c

Browse files
hamorphishamorphis
committed
Merge pull request #1156 from NativeScript/issue-754
Resolved Issue #754: The backgroundColor of a Label is not animatable…
2 parents df9f997 + b702840 commit b55c16c

File tree

8 files changed

+160
-54
lines changed

8 files changed

+160
-54
lines changed

‎apps/tests/ui/label/label-tests-native.android.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import labelModule = require("ui/label");
22
import enums = require("ui/enums");
3+
import colorModule = require("color");
4+
import background = require("ui/styling/background");
35

46
export function getNativeTextAlignment(label: labelModule.Label): string {
57
var gravity = label.android.getGravity();
@@ -17,4 +19,14 @@ export function getNativeTextAlignment(label: labelModule.Label): string {
1719
}
1820

1921
return "unexpected value";
22+
}
23+
24+
export function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color {
25+
var bkg = <any>label.android.getBackground();
26+
if (bkg instanceof background.ad.BorderDrawable) {
27+
return (<background.ad.BorderDrawable>bkg).background.color;
28+
}
29+
else {
30+
return new colorModule.Color(bkg.backgroundColor)
31+
}
2032
}

‎apps/tests/ui/label/label-tests-native.d.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
//@private
22
import labelModule = require("ui/label");
3+
import colorModule = require("color");
34

4-
export declare function getNativeTextAlignment(label: labelModule.Label): string;
5+
export declare function getNativeTextAlignment(label: labelModule.Label): string;
6+
7+
export declare function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color;

‎apps/tests/ui/label/label-tests-native.ios.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import labelModule = require("ui/label");
22
import enums = require("ui/enums");
3+
import colorModule = require("color");
4+
import utilsModule = require("utils/utils");
35

46
export function getNativeTextAlignment(label: labelModule.Label): string {
57
switch (label.ios.textAlignment) {
@@ -16,4 +18,13 @@ export function getNativeTextAlignment(label: labelModule.Label): string {
1618
return "unexpected value";
1719
break;
1820
}
19-
}
21+
}
22+
23+
export function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color {
24+
var layer = (<UILabel>label.ios).layer;
25+
if (!layer || !layer.backgroundColor) {
26+
return undefined;
27+
}
28+
var uiColor = UIColor.colorWithCGColor(layer.backgroundColor);
29+
return utilsModule.ios.getColor(uiColor);
30+
}

‎apps/tests/ui/label/label-tests.ts

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import TKUnit = require("../../TKUnit");
22
import testModule = require("../../ui-test");
3+
import styling = require("ui/styling");
34

45
// <snippet module="ui/label" title="Label">
56
// # Label
@@ -88,6 +89,29 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
8889
TKUnit.assertEqual(actualNative, expectedValue, "Native text not equal");
8990
}
9091

92+
public test_Set_BackgroundColor_TNS() {
93+
var label = this.testView;
94+
var expectedValue = new colorModule.Color("Red");
95+
label.backgroundColor = expectedValue;
96+
97+
var actual = label.style._getValue(styling.properties.backgroundColorProperty);
98+
TKUnit.assertEqual(actual, expectedValue, "BackgroundColor not equal");
99+
}
100+
101+
public test_Set_BackgroundColor_Native() {
102+
var testLabel = this.testView;
103+
var expectedValue = new colorModule.Color("Red");
104+
105+
testLabel.backgroundColor = expectedValue;
106+
107+
if (testLabel.android) {
108+
this.waitUntilTestElementIsLoaded();
109+
}
110+
var actualNative = labelTestsNative.getNativeBackgroundColor(testLabel);
111+
112+
TKUnit.assertEqual(actualNative, expectedValue);
113+
}
114+
91115
public test_measuredWidth_is_not_clipped() {
92116
var label = this.testView;
93117
label.horizontalAlignment = "left";
@@ -238,7 +262,9 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
238262
expColor = new colorModule.Color(color);
239263
TKUnit.assertEqual(normalColor.hex, expColor.hex);
240264

241-
actualBackgroundColor = utils.ios.getColor(testLabel.ios.backgroundColor);
265+
var cgColor = (<UILabel>testLabel.ios).layer.backgroundColor;
266+
var uiColor = UIColor.colorWithCGColor(cgColor);
267+
actualBackgroundColor = utils.ios.getColor(uiColor);
242268
expBackgroundColor = new colorModule.Color(backgroundColor);
243269
TKUnit.assertEqual(actualBackgroundColor.hex, expBackgroundColor.hex);
244270
}

‎apps/tests/ui/style/style-tests.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -495,7 +495,7 @@ var changeIdOrClassTestCss =
495495
"#myButton { background-color: #444444 } " +
496496
"#myButtonTwo { background-color: #555555 } ";
497497

498-
export function test_styles_are_updated_when_cssCalss_is_set() {
498+
export function test_styles_are_updated_when_cssClass_is_set() {
499499
var testStack = new stackModule.StackLayout();
500500
var btn = new buttonModule.Button();
501501
var btn2 = new buttonModule.Button();
@@ -515,7 +515,7 @@ export function test_styles_are_updated_when_cssCalss_is_set() {
515515
helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
516516
}
517517

518-
export function test_styles_are_updated_when_cssCalss_is_changed() {
518+
export function test_styles_are_updated_when_cssClass_is_changed() {
519519
var testStack = new stackModule.StackLayout();
520520
var btn = new buttonModule.Button();
521521
btn.className = "button-class";
@@ -536,7 +536,7 @@ export function test_styles_are_updated_when_cssCalss_is_changed() {
536536
helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
537537
}
538538

539-
export function test_styles_are_updated_when_cssCalss_is_cleared() {
539+
export function test_styles_are_updated_when_cssClass_is_cleared() {
540540
var testStack = new stackModule.StackLayout();
541541
var btn = new buttonModule.Button();
542542
btn.className = "button-class";

‎apps/tests/ui/view/view-tests.ios.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ export function checkNativeBorderColor(v: view.View): boolean {
1616
}
1717

1818
export function checkNativeBackgroundColor(v: view.View): boolean {
19+
if (v.ios instanceof UILabel) {
20+
var cgColor1 = (<UILabel>v.ios).layer.backgroundColor;
21+
var cgColor2 = (<UIColor>v.backgroundColor.ios).CGColor;
22+
return v.backgroundColor && CGColorEqualToColor(cgColor1, cgColor2);
23+
}
24+
1925
return v.backgroundColor && (<UIView>v.ios).backgroundColor.isEqual(v.backgroundColor.ios);
2026
}
2127

‎ui/styling/background.ios.ts

Lines changed: 54 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,60 +7,66 @@ global.moduleMerge(common, exports);
77
export module ios {
88
export function createBackgroundUIColor(view: viewModule.View): UIColor {
99
if(!view._nativeView){
10-
return null;
10+
return undefined;
1111
}
1212

1313
var background = <common.Background> view.style._getValue(style.backgroundInternalProperty);
14+
15+
if (!background || background.isEmpty()) {
16+
return undefined;
17+
}
18+
19+
if (!background.image) {
20+
return background.color.ios;
21+
}
22+
23+
// We have an image for a background
1424
var frame = (<UIView>view._nativeView).frame;
1525
var boundsWidth = frame.size.width;
1626
var boundsHeight = frame.size.height;
17-
var result: UIColor;
18-
19-
if (background && !background.isEmpty() && boundsWidth > 0 && boundsHeight) {
20-
if (!background.image) {
21-
result = background.color.ios;
22-
}
23-
else {
24-
var img = <UIImage>background.image.ios;
25-
var params = background.getDrawParams(boundsWidth, boundsHeight);
26-
27-
if (params.sizeX > 0 && params.sizeY > 0) {
28-
var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
29-
UIGraphicsBeginImageContext(resizeRect.size);
30-
img.drawInRect(resizeRect);
31-
img = UIGraphicsGetImageFromCurrentImageContext();
32-
UIGraphicsEndImageContext();
33-
}
34-
35-
UIGraphicsBeginImageContextWithOptions(frame.size, false, 0.0);
36-
var context = UIGraphicsGetCurrentContext();
37-
38-
if (background.color && background.color.ios) {
39-
CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
40-
CGContextFillRect(context, CGRectMake(0, 0, boundsWidth, boundsHeight));
41-
}
42-
43-
if (!params.repeatX && !params.repeatY) {
44-
img.drawAtPoint(CGPointMake(params.posX, params.posY));
45-
}
46-
else {
47-
var w = params.repeatX ? boundsWidth : img.size.width;
48-
var h = params.repeatY ? boundsHeight : img.size.height;
49-
50-
CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
51-
52-
params.posX = params.repeatX ? 0 : params.posX;
53-
params.posY = params.repeatY ? 0 : params.posY;
54-
55-
var patternRect = CGRectMake(params.posX, params.posY, w, h);
56-
57-
img.drawAsPatternInRect(patternRect);
58-
}
59-
var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
60-
UIGraphicsEndImageContext();
61-
result = UIColor.alloc().initWithPatternImage(bkgImage);
62-
}
63-
return result;
27+
28+
if (!boundsWidth || !boundsHeight) {
29+
return undefined;
30+
}
31+
32+
var img = <UIImage>background.image.ios;
33+
var params = background.getDrawParams(boundsWidth, boundsHeight);
34+
35+
if (params.sizeX > 0 && params.sizeY > 0) {
36+
var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
37+
UIGraphicsBeginImageContext(resizeRect.size);
38+
img.drawInRect(resizeRect);
39+
img = UIGraphicsGetImageFromCurrentImageContext();
40+
UIGraphicsEndImageContext();
41+
}
42+
43+
UIGraphicsBeginImageContextWithOptions(frame.size, false, 0.0);
44+
var context = UIGraphicsGetCurrentContext();
45+
46+
if (background.color && background.color.ios) {
47+
CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
48+
CGContextFillRect(context, CGRectMake(0, 0, boundsWidth, boundsHeight));
49+
}
50+
51+
if (!params.repeatX && !params.repeatY) {
52+
img.drawAtPoint(CGPointMake(params.posX, params.posY));
53+
}
54+
else {
55+
var w = params.repeatX ? boundsWidth : img.size.width;
56+
var h = params.repeatY ? boundsHeight : img.size.height;
57+
58+
CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
59+
60+
params.posX = params.repeatX ? 0 : params.posX;
61+
params.posY = params.repeatY ? 0 : params.posY;
62+
63+
var patternRect = CGRectMake(params.posX, params.posY, w, h);
64+
65+
img.drawAsPatternInRect(patternRect);
6466
}
67+
var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
68+
UIGraphicsEndImageContext();
69+
70+
return UIColor.alloc().initWithPatternImage(bkgImage);
6571
}
6672
}

‎ui/styling/stylers.ios.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,47 @@ export class ButtonStyler implements definition.stylers.Styler {
318318
}
319319
}
320320

321+
export class LabelStyler implements definition.stylers.Styler {
322+
//Background methods
323+
private static setBackgroundInternalProperty(view: view.View, newValue: any) {
324+
var uiLabel: UILabel = <UILabel>view._nativeView;
325+
if (uiLabel && uiLabel.layer) {
326+
var uiColor = <UIColor>background.ios.createBackgroundUIColor(view);
327+
var cgColor = uiColor ? uiColor.CGColor : null;
328+
uiLabel.layer.backgroundColor = cgColor;
329+
}
330+
}
331+
332+
private static resetBackgroundInternalProperty(view: view.View, nativeValue: any) {
333+
var uiLabel: UILabel = <UILabel>view._nativeView;
334+
if (uiLabel && uiLabel.layer) {
335+
var uiColor = <UIColor>nativeValue;
336+
var cgColor = uiColor ? uiColor.CGColor : null;
337+
uiLabel.layer.backgroundColor = cgColor;
338+
}
339+
}
340+
341+
private static getNativeBackgroundInternalValue(view: view.View): any {
342+
var uiLabel: UILabel = <UILabel>view._nativeView;
343+
if (uiLabel && uiLabel.layer) {
344+
var cgColor = uiLabel.layer.backgroundColor;
345+
if (cgColor) {
346+
return UIColor.colorWithCGColor(cgColor);
347+
348+
}
349+
}
350+
351+
return undefined;
352+
}
353+
354+
public static registerHandlers() {
355+
style.registerHandler(style.backgroundInternalProperty, new stylersCommon.StylePropertyChangedHandler(
356+
LabelStyler.setBackgroundInternalProperty,
357+
LabelStyler.resetBackgroundInternalProperty,
358+
LabelStyler.getNativeBackgroundInternalValue), "Label");
359+
}
360+
}
361+
321362
export class TextBaseStyler implements definition.stylers.Styler {
322363
// font
323364
private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) {
@@ -1100,6 +1141,7 @@ export function _registerDefaultStylers() {
11001141
DefaultStyler.registerHandlers();
11011142
TextBaseStyler.registerHandlers();
11021143
ButtonStyler.registerHandlers();
1144+
LabelStyler.registerHandlers();
11031145
TextViewStyler.registerHandlers();
11041146
SegmentedBarStyler.registerHandlers();
11051147
SearchBarStyler.registerHandlers();

0 commit comments

Comments
 (0)