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

feat(core): box shadow demo (#9182)

Browse Source
This commit is contained in:
William Tjondrosuharto
2021-01-30 07:28:07 +07:00
committed by Nathan Walker
parent d46f9562b4
commit 3bd2d96f29
9 changed files with 620 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/core/ui/styling/background.android.ts
View File

@@ -95,7 +95,7 @@ export namespace ad {
const boxShadow = view.style.boxShadow;
if (boxShadow) {
drawBoxShadow(nativeView, boxShadow);
drawBoxShadow(nativeView, view, boxShadow);
}
// TODO: Can we move BorderWidths as separate native setter?
@@ -226,15 +226,14 @@ function createNativeCSSValueArray(css: string): androidNative.Array<org.natives
return nativeArray;
}
function drawBoxShadow(nativeView: android.view.View, boxShadow: BoxShadow) {
function drawBoxShadow(nativeView: android.view.View, view: View, boxShadow: BoxShadow) {
const color = boxShadow.color;
const shadowOpacity = color.a;
const shadowColor = new Color(shadowOpacity, color.r, color.g, color.b);
// TODO: corner radius here should reflect the view's corner radius
const cornerRadius = 0; // this should be applied to the main view as well (try 20 with a transparent background on the xml to see the effect)
const cornerRadius = view.borderRadius; // this should be applied to the main view as well (try 20 with a transparent background on the xml to see the effect)
const config = {
shadowColor: shadowColor.android,
cornerRadius,
cornerRadius: cornerRadius,
spreadRadius: boxShadow.spreadRadius,
blurRadius: boxShadow.blurRadius,
offsetX: boxShadow.offsetX,

28
packages/core/ui/styling/background.ios.ts
View File

@@ -8,8 +8,6 @@ import { isDataURI, isFileOrResourcePath, layout } from '../../utils';
import { ImageSource } from '../../image-source';
import { CSSValue, parse as cssParse } from '../../css-value';
import { BoxShadow } from './box-shadow';
import { Screen } from '../../platform';
import { StackLayout } from '../layouts/stack-layout';
export * from './background-common';
@@ -92,11 +90,10 @@ export namespace ios {
const boxShadow = view.style.boxShadow;
if (boxShadow) {
// this is required (if not, shadow will get cutoff at parent's dimensions)
// nativeView.clipsToBounds doesn't work
view.setProperty('clipToBounds', false);
drawBoxShadow(nativeView, boxShadow, background);
drawBoxShadow(nativeView, view, boxShadow, background);
}
}
}
@@ -720,40 +717,29 @@ function drawNoRadiusNonUniformBorders(nativeView: NativeView, background: Backg
}
// TODO: use sublayer if its applied to a layout
function drawBoxShadow(nativeView: NativeView, boxShadow: BoxShadow, background: BackgroundDefinition, useSubLayer: boolean = false) {
function drawBoxShadow(nativeView: NativeView, view: View, boxShadow: BoxShadow, background: BackgroundDefinition, useSubLayer: boolean = false) {
const layer: CALayer = nativeView.layer;
layer.masksToBounds = false;
nativeView.clipsToBounds = false;
if (!background.color.a) {
if (!background.color?.a) {
// add white background if view has a transparent background
layer.backgroundColor = UIColor.whiteColor.CGColor;
}
// shadow opacity is handled on the shadow's color instance
layer.shadowOpacity = 1;
layer.shadowRadius = boxShadow.spreadRadius;
layer.shadowRadius = layout.toDeviceIndependentPixels(boxShadow.spreadRadius);
layer.shadowColor = boxShadow.color.ios.CGColor;
// / 2 here since ios's shadow offset is bigger than android
// TODO: this is just for experimenting with the amount of offset,
// need to use some real calculation here to gain parity with android's
// implementation
const adjustedShadowOffset = {
x: boxShadow.offsetX / 2,
y: boxShadow.offsetY / 2,
x: layout.toDeviceIndependentPixels(boxShadow.offsetX),
y: layout.toDeviceIndependentPixels(boxShadow.offsetY),
};
layer.shadowOffset = CGSizeMake(adjustedShadowOffset.x, adjustedShadowOffset.y);
// this should match the view's border radius
const cornerRadius = 0;
// This doesn't handle the offsets properly
// factor in shadowRadius and the offsets so shadow don't spread too far
// layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(CGRectMake(
// nativeView.bounds.origin.x + boxShadow.spreadRadius + adjustedShadowOffset.x,
// nativeView.bounds.origin.y + boxShadow.spreadRadius + adjustedShadowOffset.y,
// nativeView.bounds.size.width - boxShadow.spreadRadius - adjustedShadowOffset.x,
// nativeView.bounds.size.height - boxShadow.spreadRadius - adjustedShadowOffset.y), cornerRadius).CGPath;
const cornerRadius = 0; // layout.toDeviceIndependentPixels(view.style.borderRadius);
// This has the nice glow with box shadow of 0,0
layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(nativeView.bounds, cornerRadius).CGPath;