javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1156 from NativeScript/issue-754

Browse Source 
Resolved Issue #754: The backgroundColor of a Label is not animatable…
This commit is contained in:
Rossen Hristov
2015-11-25 15:33:08 +02:00
parent df9f9978c2 b702840cbf
commit b55c16c8aa
8 changed files with 159 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/tests/ui/label/label-tests-native.android.ts
View File

@@ -1,5 +1,7 @@
import labelModule = require("ui/label");
import enums = require("ui/enums");
import colorModule = require("color");
import background = require("ui/styling/background");
export function getNativeTextAlignment(label: labelModule.Label): string {
var gravity = label.android.getGravity();
@@ -18,3 +20,13 @@ export function getNativeTextAlignment(label: labelModule.Label): string {
return "unexpected value";
}
export function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color {
var bkg = <any>label.android.getBackground();
if (bkg instanceof background.ad.BorderDrawable) {
return (<background.ad.BorderDrawable>bkg).background.color;
}
else {
return new colorModule.Color(bkg.backgroundColor)
}
}

3
apps/tests/ui/label/label-tests-native.d.ts vendored
View File

@@ -1,4 +1,7 @@
//@private
import labelModule = require("ui/label");
import colorModule = require("color");
export declare function getNativeTextAlignment(label: labelModule.Label): string;
export declare function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color;

11
apps/tests/ui/label/label-tests-native.ios.ts
View File

@@ -1,5 +1,7 @@
import labelModule = require("ui/label");
import enums = require("ui/enums");
import colorModule = require("color");
import utilsModule = require("utils/utils");
export function getNativeTextAlignment(label: labelModule.Label): string {
switch (label.ios.textAlignment) {
@@ -17,3 +19,12 @@ export function getNativeTextAlignment(label: labelModule.Label): string {
break;
}
}
export function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color {
var layer = (<UILabel>label.ios).layer;
if (!layer || !layer.backgroundColor) {
return undefined;
}
var uiColor = UIColor.colorWithCGColor(layer.backgroundColor);
return utilsModule.ios.getColor(uiColor);
}

28
apps/tests/ui/label/label-tests.ts
View File

@@ -1,5 +1,6 @@
import TKUnit = require("../../TKUnit");
import testModule = require("../../ui-test");
import styling = require("ui/styling");
// <snippet module="ui/label" title="Label">
// # Label
@@ -88,6 +89,29 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
TKUnit.assertEqual(actualNative, expectedValue, "Native text not equal");
}
public test_Set_BackgroundColor_TNS() {
var label = this.testView;
var expectedValue = new colorModule.Color("Red");
label.backgroundColor = expectedValue;
var actual = label.style._getValue(styling.properties.backgroundColorProperty);
TKUnit.assertEqual(actual, expectedValue, "BackgroundColor not equal");
}
public test_Set_BackgroundColor_Native() {
var testLabel = this.testView;
var expectedValue = new colorModule.Color("Red");
testLabel.backgroundColor = expectedValue;
if (testLabel.android) {
this.waitUntilTestElementIsLoaded();
}
var actualNative = labelTestsNative.getNativeBackgroundColor(testLabel);
TKUnit.assertEqual(actualNative, expectedValue);
}
public test_measuredWidth_is_not_clipped() {
var label = this.testView;
label.horizontalAlignment = "left";
@@ -238,7 +262,9 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
expColor = new colorModule.Color(color);
TKUnit.assertEqual(normalColor.hex, expColor.hex);
actualBackgroundColor = utils.ios.getColor(testLabel.ios.backgroundColor);
var cgColor = (<UILabel>testLabel.ios).layer.backgroundColor;
var uiColor = UIColor.colorWithCGColor(cgColor);
actualBackgroundColor = utils.ios.getColor(uiColor);
expBackgroundColor = new colorModule.Color(backgroundColor);
TKUnit.assertEqual(actualBackgroundColor.hex, expBackgroundColor.hex);
}

6
apps/tests/ui/style/style-tests.ts
View File

@@ -495,7 +495,7 @@ var changeIdOrClassTestCss =
"#myButton { background-color: #444444 } " +
"#myButtonTwo { background-color: #555555 } ";
export function test_styles_are_updated_when_cssCalss_is_set() {
export function test_styles_are_updated_when_cssClass_is_set() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
var btn2 = new buttonModule.Button();
@@ -515,7 +515,7 @@ export function test_styles_are_updated_when_cssCalss_is_set() {
helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
}
export function test_styles_are_updated_when_cssCalss_is_changed() {
export function test_styles_are_updated_when_cssClass_is_changed() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
btn.className = "button-class";
@@ -536,7 +536,7 @@ export function test_styles_are_updated_when_cssCalss_is_changed() {
helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
}
export function test_styles_are_updated_when_cssCalss_is_cleared() {
export function test_styles_are_updated_when_cssClass_is_cleared() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
btn.className = "button-class";

6
apps/tests/ui/view/view-tests.ios.ts
View File

@@ -16,6 +16,12 @@ export function checkNativeBorderColor(v: view.View): boolean {
}
export function checkNativeBackgroundColor(v: view.View): boolean {
if (v.ios instanceof UILabel) {
var cgColor1 = (<UILabel>v.ios).layer.backgroundColor;
var cgColor2 = (<UIColor>v.backgroundColor.ios).CGColor;
return v.backgroundColor && CGColorEqualToColor(cgColor1, cgColor2);
}
return v.backgroundColor && (<UIView>v.ios).backgroundColor.isEqual(v.backgroundColor.ios);
}

100
ui/styling/background.ios.ts
View File

@@ -7,60 +7,66 @@ global.moduleMerge(common, exports);
export module ios {
export function createBackgroundUIColor(view: viewModule.View): UIColor {
if(!view._nativeView){
return null;
return undefined;
}
var background = <common.Background> view.style._getValue(style.backgroundInternalProperty);
if (!background || background.isEmpty()) {
return undefined;
}
if (!background.image) {
return background.color.ios;
}
// We have an image for a background
var frame = (<UIView>view._nativeView).frame;
var boundsWidth = frame.size.width;
var boundsHeight = frame.size.height;
var result: UIColor;
if (background && !background.isEmpty() && boundsWidth > 0 && boundsHeight) {
if (!background.image) {
result = background.color.ios;
}
else {
var img = <UIImage>background.image.ios;
var params = background.getDrawParams(boundsWidth, boundsHeight);
if (params.sizeX > 0 && params.sizeY > 0) {
var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
UIGraphicsBeginImageContext(resizeRect.size);
img.drawInRect(resizeRect);
img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
UIGraphicsBeginImageContextWithOptions(frame.size, false, 0.0);
var context = UIGraphicsGetCurrentContext();
if (background.color && background.color.ios) {
CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
CGContextFillRect(context, CGRectMake(0, 0, boundsWidth, boundsHeight));
}
if (!params.repeatX && !params.repeatY) {
img.drawAtPoint(CGPointMake(params.posX, params.posY));
}
else {
var w = params.repeatX ? boundsWidth : img.size.width;
var h = params.repeatY ? boundsHeight : img.size.height;
CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
params.posX = params.repeatX ? 0 : params.posX;
params.posY = params.repeatY ? 0 : params.posY;
var patternRect = CGRectMake(params.posX, params.posY, w, h);
img.drawAsPatternInRect(patternRect);
}
var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
result = UIColor.alloc().initWithPatternImage(bkgImage);
}
return result;
if (!boundsWidth || !boundsHeight) {
return undefined;
}
var img = <UIImage>background.image.ios;
var params = background.getDrawParams(boundsWidth, boundsHeight);
if (params.sizeX > 0 && params.sizeY > 0) {
var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
UIGraphicsBeginImageContext(resizeRect.size);
img.drawInRect(resizeRect);
img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
UIGraphicsBeginImageContextWithOptions(frame.size, false, 0.0);
var context = UIGraphicsGetCurrentContext();
if (background.color && background.color.ios) {
CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
CGContextFillRect(context, CGRectMake(0, 0, boundsWidth, boundsHeight));
}
if (!params.repeatX && !params.repeatY) {
img.drawAtPoint(CGPointMake(params.posX, params.posY));
}
else {
var w = params.repeatX ? boundsWidth : img.size.width;
var h = params.repeatY ? boundsHeight : img.size.height;
CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
params.posX = params.repeatX ? 0 : params.posX;
params.posY = params.repeatY ? 0 : params.posY;
var patternRect = CGRectMake(params.posX, params.posY, w, h);
img.drawAsPatternInRect(patternRect);
}
var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return UIColor.alloc().initWithPatternImage(bkgImage);
}
}

42
ui/styling/stylers.ios.ts
View File

@@ -318,6 +318,47 @@ export class ButtonStyler implements definition.stylers.Styler {
}
}
export class LabelStyler implements definition.stylers.Styler {
//Background methods
private static setBackgroundInternalProperty(view: view.View, newValue: any) {
var uiLabel: UILabel = <UILabel>view._nativeView;
if (uiLabel && uiLabel.layer) {
var uiColor = <UIColor>background.ios.createBackgroundUIColor(view);
var cgColor = uiColor ? uiColor.CGColor : null;
uiLabel.layer.backgroundColor = cgColor;
}
}
private static resetBackgroundInternalProperty(view: view.View, nativeValue: any) {
var uiLabel: UILabel = <UILabel>view._nativeView;
if (uiLabel && uiLabel.layer) {
var uiColor = <UIColor>nativeValue;
var cgColor = uiColor ? uiColor.CGColor : null;
uiLabel.layer.backgroundColor = cgColor;
}
}
private static getNativeBackgroundInternalValue(view: view.View): any {
var uiLabel: UILabel = <UILabel>view._nativeView;
if (uiLabel && uiLabel.layer) {
var cgColor = uiLabel.layer.backgroundColor;
if (cgColor) {
return UIColor.colorWithCGColor(cgColor);
}
}
return undefined;
}
public static registerHandlers() {
style.registerHandler(style.backgroundInternalProperty, new stylersCommon.StylePropertyChangedHandler(
LabelStyler.setBackgroundInternalProperty,
LabelStyler.resetBackgroundInternalProperty,
LabelStyler.getNativeBackgroundInternalValue), "Label");
}
}
export class TextBaseStyler implements definition.stylers.Styler {
// font
private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) {
@@ -1100,6 +1141,7 @@ export function _registerDefaultStylers() {
DefaultStyler.registerHandlers();
TextBaseStyler.registerHandlers();
ButtonStyler.registerHandlers();
LabelStyler.registerHandlers();
TextViewStyler.registerHandlers();
SegmentedBarStyler.registerHandlers();
SearchBarStyler.registerHandlers();