Skip to content

Commit 2c8bc8a

Browse files
hamorphishamorphis
committed
Merge pull request NativeScript#1229 from NativeScript/issue-1223
Resolved Issue NativeScript#1223: Android views which have complex backgrounds (i…
2 parents a495e22 + 700818d commit 2c8bc8a

File tree

11 files changed

+169
-10
lines changed

11 files changed

+169
-10
lines changed

‎CrossPlatformModules.csproj

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
<TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts">
8080
<DependentUpon>data-binding.xml</DependentUpon>
8181
</TypeScriptCompile>
82+
<TypeScriptCompile Include="apps\animations\opacity.ts" />
8283
<TypeScriptCompile Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.ts" />
8384
<TypeScriptCompile Include="apps\tests\ui\page\modal-page.ts">
8485
<DependentUpon>modal-page.xml</DependentUpon>
@@ -117,6 +118,12 @@
117118
<Content Include="apps\action-bar-demo\pages\center-view-segmented.xml" />
118119
<Content Include="apps\action-bar-demo\pages\center-view.xml" />
119120
<Content Include="apps\action-bar-demo\pages\data-binding.xml" />
121+
<Content Include="apps\animations\opacity.css" />
122+
<Content Include="apps\animations\opacity.xml">
123+
<SubType>Designer</SubType>
124+
</Content>
125+
<Content Include="apps\animations\bkg.png" />
126+
<Content Include="apps\animations\test-icon.png" />
120127
<Content Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.xml" />
121128
<Content Include="apps\tests\ui\page\modal-page.xml">
122129
<SubType>Designer</SubType>
@@ -2104,7 +2111,7 @@
21042111
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
21052112
</WebProjectProperties>
21062113
</FlavorProperties>
2107-
<UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
2114+
<UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
21082115
</VisualStudio>
21092116
</ProjectExtensions>
2110-
</Project>
2117+
</Project>

‎apps/animations/bkg.png

311 Bytes
Loading

‎apps/animations/main-page.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import animationModule = require("ui/animation");
66
import colorModule = require("color");
77
import model = require("./model");
88
import enums = require("ui/enums");
9+
import frame = require("ui/frame");
910

1011
var vm = new model.ViewModel();
1112

@@ -162,4 +163,8 @@ export function onInterrupted(args: observable.EventData) {
162163
duration: 1000
163164
})
164165
}, 700 * 3);
165-
}
166+
}
167+
168+
export function onOpacity(args: observable.EventData) {
169+
frame.topmost().navigate("./opacity");
170+
}

‎apps/animations/main-page.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<Button text="In" tap="onSlideIn" width="40" marginLeft="5" marginRight="5" />
1919
<Button text="Single" tap="onSingle" width="70" marginLeft="5" marginRight="5" />
2020
<Button text="Cancel" tap="onCancel" width="70" marginLeft="5" marginRight="5" />
21+
<Button text="Opacity" tap="onOpacity" width="70" marginLeft="5" marginRight="5" />
2122
</StackLayout>
2223

2324
<StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">>

‎apps/animations/opacity.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.complex {
2+
width: 45;
3+
height: 45;
4+
margin: 1;
5+
background-image: url('~/bkg.png');
6+
background-repeat:repeat-x;
7+
background-position: 20% 80%;
8+
background-color: lightyellow;
9+
background-size: 25% 50%;
10+
border-radius: 20;
11+
border-width: 4;
12+
border-color: red;
13+
}
14+
15+
.simple {
16+
width: 45;
17+
height: 45;
18+
margin: 1;
19+
border-radius: 20;
20+
background-color: lightgreen;
21+
}
22+
23+
.none {
24+
width: 45;
25+
height: 45;
26+
margin: 1;
27+
}

‎apps/animations/opacity.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import observable = require("data/observable");
2+
import pages = require("ui/page");
3+
import view = require("ui/core/view");
4+
import buttonModule = require("ui/button");
5+
import abs = require("ui/layouts/absolute-layout");
6+
import animationModule = require("ui/animation");
7+
import colorModule = require("color");
8+
import model = require("./model");
9+
import enums = require("ui/enums");
10+
import frame = require("ui/frame");
11+
import slider = require("ui/slider");
12+
import wrapLayout = require("ui/layouts/wrap-layout");
13+
14+
var page: pages.Page;
15+
var opacitySlider: slider.Slider;
16+
var red = new colorModule.Color("red");
17+
var green = new colorModule.Color("green");
18+
var container: wrapLayout.WrapLayout;
19+
20+
export function pageLoaded(args: observable.EventData) {
21+
page = <pages.Page>args.object;
22+
opacitySlider = page.getViewById<slider.Slider>("opacitySlider");
23+
container = page.getViewById<wrapLayout.WrapLayout>("container");
24+
}
25+
26+
export function onSetOpacity(args: observable.EventData) {
27+
var newOpacity = opacitySlider.value / 100;
28+
container._eachChildView((childView: view.View) => {
29+
childView.opacity = newOpacity;
30+
return true;
31+
});
32+
}
33+
34+
var animationSet: animationModule.Animation;
35+
export function onAnimateOpacity(args: observable.EventData) {
36+
var newOpacity = opacitySlider.value / 100;
37+
var animationDefinitions = new Array<animationModule.AnimationDefinition>();
38+
container._eachChildView((childView: view.View) => {
39+
animationDefinitions.push({
40+
target: childView,
41+
opacity: newOpacity,
42+
duration: 5000
43+
});
44+
return true;
45+
});
46+
47+
animationSet = new animationModule.Animation(animationDefinitions);
48+
animationSet.play();
49+
}
50+
51+
export function onReset(args: observable.EventData) {
52+
animationSet.cancel();
53+
}

‎apps/animations/opacity.xml

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="opacityPage">
2+
<StackLayout orientation="vertical">
3+
<StackLayout orientation="vertical">
4+
<Label text="opacity" width="180" />
5+
<Slider id="opacitySlider" minValue="0" maxValue="100" width="180" />
6+
<Button text="Set" tap="onSetOpacity"/>
7+
<Button text="Animate" tap="onAnimateOpacity"/>
8+
<Button text="Reset" tap="onReset"/>
9+
</StackLayout>
10+
<WrapLayout orientation="horizontal" id="container">
11+
12+
<StackLayout class="complex"/>
13+
<Button text="Button" class="complex"/>
14+
<Label text="Label" class="complex"/>
15+
<Image src="~/test-icon.png" class="complex"/>
16+
<TextField text="TextField" class="complex"/>
17+
<TextView text="TextView" class="complex"/>
18+
19+
<StackLayout class="simple"/>
20+
<Button text="Button" class="simple"/>
21+
<Label text="Label" class="simple"/>
22+
<Image src="~/test-icon.png" class="simple"/>
23+
<TextField text="TextField" class="simple"/>
24+
<TextView text="TextView" class="simple"/>
25+
26+
<StackLayout class="none"/>
27+
<Button text="Button" class="none"/>
28+
<Label text="Label" class="none"/>
29+
<Image src="~/test-icon.png" class="none"/>
30+
<TextField text="TextField" class="none"/>
31+
<TextView text="TextView" class="none"/>
32+
33+
</WrapLayout>
34+
</StackLayout>
35+
</Page>

‎apps/animations/test-icon.png

1.27 KB
Loading

‎tsconfig.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"apps/animations/app.ts",
4949
"apps/animations/main-page.ts",
5050
"apps/animations/model.ts",
51+
"apps/animations/opacity.ts",
5152
"apps/connectivity-demo/app.ts",
5253
"apps/connectivity-demo/main-page.ts",
5354
"apps/cuteness.io/app.ts",
@@ -319,9 +320,9 @@
319320
"apps/tests/xml-declaration/mainPage.ts",
320321
"apps/tests/xml-declaration/mymodule/MyControl.ts",
321322
"apps/tests/xml-declaration/mymodulewithxml/MyControl.ts",
322-
"apps/tests/xml-declaration/template-builder-tests/template-view.ts",
323-
"apps/tests/xml-declaration/template-builder-tests/event-in-template.ts",
324323
"apps/tests/xml-declaration/template-builder-tests/event-in-codeless-fragment.ts",
324+
"apps/tests/xml-declaration/template-builder-tests/event-in-template.ts",
325+
"apps/tests/xml-declaration/template-builder-tests/template-view.ts",
325326
"apps/tests/xml-declaration/xml-declaration-tests.ts",
326327
"apps/tests/xml-parser-tests/xml-parser-tests.ts",
327328
"apps/transforms/app.ts",

‎ui/animation/animation.android.ts

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -159,11 +159,18 @@ export class Animation extends common.Animation implements definition.Animation
159159

160160
case common.Properties.opacity:
161161
originalValue1 = nativeView.getAlpha();
162-
nativeArray = java.lang.reflect.Array.newInstance(floatType, 1);
163-
nativeArray[0] = propertyAnimation.value;
164-
propertyUpdateCallbacks.push(checkAnimation(() => { propertyAnimation.target.opacity = propertyAnimation.value }));
165-
propertyResetCallbacks.push(checkAnimation(() => { nativeView.setAlpha(originalValue1); }));
166-
animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "alpha", nativeArray));
162+
nativeArray = java.lang.reflect.Array.newInstance(floatType, 2);
163+
nativeArray[0] = originalValue1;
164+
nativeArray[1] = propertyAnimation.value;
165+
animator = android.animation.ValueAnimator.ofFloat(nativeArray);
166+
animator.addUpdateListener(new android.animation.ValueAnimator.AnimatorUpdateListener({
167+
onAnimationUpdate(animator: android.animation.ValueAnimator) {
168+
propertyAnimation.target.opacity = (<java.lang.Float>animator.getAnimatedValue()).floatValue();
169+
}
170+
}));
171+
propertyUpdateCallbacks.push(checkAnimation(() => { propertyAnimation.target.opacity = propertyAnimation.value; }));
172+
propertyResetCallbacks.push(checkAnimation(() => { propertyAnimation.target.opacity = originalValue1; }));
173+
animators.push(animator);
167174
break;
168175

169176
case common.Properties.backgroundColor:

‎ui/styling/stylers.android.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -341,6 +341,25 @@ export class ImageStyler implements definition.stylers.Styler {
341341
onBackgroundOrBorderPropertyChanged(view);
342342
}
343343

344+
//Opacity methods
345+
private static setOpacityProperty(view: view.View, newValue: any) {
346+
ImageStyler._setOpacity(view, newValue);
347+
}
348+
349+
private static resetOpacityProperty(view: view.View, nativeValue: any) {
350+
ImageStyler._setOpacity(view, 1.0);
351+
}
352+
353+
private static _setOpacity(view: view.View, value: any) {
354+
let opacity = float(value);
355+
let nativeView = <android.view.View>view._nativeView;
356+
nativeView.setAlpha(opacity);
357+
let background = nativeView.getBackground();
358+
if (background) {
359+
background.setAlpha(opacity);
360+
}
361+
}
362+
344363
public static registerHandlers() {
345364
// Use the same handler for all background/border properties
346365
// Note: There is no default value getter - the default value is handled in onBackgroundOrBorderPropertyChanged
@@ -352,6 +371,10 @@ export class ImageStyler implements definition.stylers.Styler {
352371
style.registerHandler(style.borderWidthProperty, new stylersCommon.StylePropertyChangedHandler(
353372
ImageStyler.setBorderWidthProperty,
354373
ImageStyler.resetBorderWidthProperty), "Image");
374+
375+
style.registerHandler(style.opacityProperty, new stylersCommon.StylePropertyChangedHandler(
376+
ImageStyler.setOpacityProperty,
377+
ImageStyler.resetOpacityProperty), "Image");
355378
}
356379
}
357380

0 commit comments

Comments
 (0)