mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
feat: implement BoxShadowDrawable
This commit is contained in:
Igor Randjelovic
committed by
Nathan Walker
Nathan Walker
parent
a822f2affb
commit
9a7d3ecb34
@@ -0,0 +1,154 @@
|
||||
package org.nativescript.widgets;
|
||||
|
||||
import android.graphics.BlurMaskFilter;
|
||||
import android.graphics.Color;
|
||||
import android.graphics.drawable.Drawable;
|
||||
import android.graphics.drawable.LayerDrawable;
|
||||
import android.graphics.drawable.ShapeDrawable;
|
||||
import android.graphics.drawable.shapes.RectShape;
|
||||
import android.graphics.drawable.shapes.RoundRectShape;
|
||||
import android.os.Build;
|
||||
import android.util.Log;
|
||||
|
||||
import androidx.annotation.RequiresApi;
|
||||
|
||||
import org.json.JSONException;
|
||||
import org.json.JSONObject;
|
||||
|
||||
import java.util.Arrays;
|
||||
|
||||
@RequiresApi(api = Build.VERSION_CODES.M)
|
||||
public class BoxShadowDrawable extends LayerDrawable {
|
||||
// Static parameters
|
||||
protected final static int DEFAULT_BACKGROUND_COLOR = Color.WHITE;
|
||||
protected final static String TAG = "BoxShadowDrawable";
|
||||
|
||||
// BoxShadow Parameters
|
||||
protected int offsetX = 0;
|
||||
protected int offsetY = 0;
|
||||
protected int blurRadius = 0;
|
||||
protected int spreadRadius = 0;
|
||||
protected int shadowColor = Color.BLACK;
|
||||
|
||||
// Layers
|
||||
protected final ShapeDrawable shadowLayer;
|
||||
protected final ShapeDrawable overlayLayer;
|
||||
protected final Drawable wrappedLayer;
|
||||
|
||||
protected float[] currentCornerRadii;
|
||||
|
||||
public BoxShadowDrawable(Drawable wrappedDrawable, String value) {
|
||||
super(new Drawable[]{});
|
||||
|
||||
Log.d(TAG, "Constructing BoxShadowDrawable!");
|
||||
|
||||
this.shadowLayer = new ShapeDrawable(new RectShape());
|
||||
this.overlayLayer = this.createOverlayLayer();
|
||||
this.wrappedLayer = wrappedDrawable;
|
||||
|
||||
// add our layers
|
||||
this.addLayer(shadowLayer);
|
||||
this.addLayer(overlayLayer);
|
||||
this.addLayer(wrappedLayer);
|
||||
|
||||
this.setValue(value);
|
||||
}
|
||||
|
||||
// to allow applying any bg changes on original Drawable
|
||||
public Drawable getWrappedDrawable() {
|
||||
return this.wrappedLayer;
|
||||
}
|
||||
|
||||
public void setValue(String value) {
|
||||
try {
|
||||
JSONObject config = new JSONObject(value);
|
||||
offsetX = config.getInt("offsetX");
|
||||
offsetY = config.getInt("offsetY");
|
||||
blurRadius = config.getInt("blurRadius");
|
||||
spreadRadius = config.getInt("spreadRadius");
|
||||
shadowColor = config.getInt("shadowColor");
|
||||
|
||||
float[] outerRadius;
|
||||
|
||||
// if we are wrapping a BorderDrawable - we can get the radii from it
|
||||
if(wrappedLayer instanceof BorderDrawable) {
|
||||
BorderDrawable b = (BorderDrawable) wrappedLayer;
|
||||
outerRadius = new float[]{
|
||||
b.getBorderTopLeftRadius(),
|
||||
b.getBorderTopLeftRadius(),
|
||||
|
||||
b.getBorderTopRightRadius(),
|
||||
b.getBorderTopRightRadius(),
|
||||
|
||||
b.getBorderBottomRightRadius(),
|
||||
b.getBorderBottomRightRadius(),
|
||||
|
||||
b.getBorderBottomLeftRadius(),
|
||||
b.getBorderBottomLeftRadius(),
|
||||
};
|
||||
} else {
|
||||
int cornerRadius = 0;
|
||||
try {
|
||||
cornerRadius = config.getInt("cornerRadius");
|
||||
} catch (JSONException ignore) {}
|
||||
|
||||
outerRadius = new float[8];
|
||||
Arrays.fill(outerRadius, cornerRadius);
|
||||
}
|
||||
|
||||
if(!Arrays.equals(outerRadius, currentCornerRadii)) {
|
||||
Log.d(TAG, "Update layer shape");
|
||||
shadowLayer.setShape(new RoundRectShape(outerRadius, null, null));
|
||||
overlayLayer.setShape(new RoundRectShape(outerRadius, null, null));
|
||||
|
||||
// update current
|
||||
currentCornerRadii = outerRadius;
|
||||
}
|
||||
|
||||
// apply new shadow parameters
|
||||
this.applyShadow();
|
||||
} catch (JSONException exception) {
|
||||
Log.d(TAG, "Caught JSONException...");
|
||||
exception.printStackTrace();
|
||||
}
|
||||
}
|
||||
|
||||
private void applyShadow() {
|
||||
Log.d(TAG, "applyShadow: " + this);
|
||||
|
||||
// apply boxShadow
|
||||
shadowLayer.getPaint().setColor(shadowColor);
|
||||
shadowLayer.getPaint().setMaskFilter(new BlurMaskFilter(
|
||||
Float.MIN_VALUE + blurRadius,
|
||||
BlurMaskFilter.Blur.NORMAL
|
||||
));
|
||||
shadowLayer.getPaint().setAntiAlias(true);
|
||||
|
||||
// apply insets that mimic offsets/spread to the shadowLayer
|
||||
int inset = -spreadRadius;
|
||||
Log.d(TAG, "Insets:"
|
||||
+ "\n l: " + (inset + offsetX)
|
||||
+ "\n t: " + (inset + offsetY)
|
||||
+ "\n r: " + (inset - offsetX)
|
||||
+ "\n b: " + (inset - offsetY)
|
||||
);
|
||||
this.setLayerInset(0,
|
||||
inset + offsetX,
|
||||
inset + offsetY,
|
||||
inset - offsetX,
|
||||
inset - offsetY
|
||||
);
|
||||
}
|
||||
|
||||
private ShapeDrawable createOverlayLayer() {
|
||||
ShapeDrawable shapeDrawable = new ShapeDrawable(new RectShape());
|
||||
shapeDrawable.getPaint().setColor(DEFAULT_BACKGROUND_COLOR);
|
||||
|
||||
return shapeDrawable;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return "BoxShadowDrawable { oX:" + offsetX + " oY:" + offsetY + " br:" + blurRadius + " sr:" + spreadRadius + " c:" + shadowColor + " }";
|
||||
}
|
||||
}
|
||||
@@ -1,109 +1,33 @@
|
||||
/**
|
||||
*
|
||||
*/
|
||||
package org.nativescript.widgets;
|
||||
|
||||
/**
|
||||
* @author triniwiz
|
||||
*/
|
||||
|
||||
import android.graphics.Color;
|
||||
import android.graphics.drawable.ColorDrawable;
|
||||
import android.graphics.drawable.Drawable;
|
||||
import android.graphics.drawable.LayerDrawable;
|
||||
import android.graphics.drawable.ShapeDrawable;
|
||||
import android.graphics.drawable.shapes.RoundRectShape;
|
||||
import android.util.Log;
|
||||
import android.view.View;
|
||||
import android.view.ViewGroup;
|
||||
|
||||
import org.json.JSONException;
|
||||
import org.json.JSONObject;
|
||||
|
||||
public class Utils {
|
||||
public static void drawBoxShadow(View view, String value) {
|
||||
try {
|
||||
JSONObject config = new JSONObject(value);
|
||||
int shadowColor = config.getInt("shadowColor");
|
||||
int cornerRadius = config.getInt("cornerRadius");
|
||||
int spreadRadius = config.getInt("spreadRadius");
|
||||
int blurRadius = config.getInt("blurRadius");
|
||||
int configOffsetX = config.getInt("offsetX");
|
||||
int configOffsetY = config.getInt("offsetY");
|
||||
int scale = config.getInt("scale");
|
||||
if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.M) {
|
||||
return;
|
||||
}
|
||||
Log.d("BoxShadowDrawable", "drawBoxShadow");
|
||||
|
||||
Drawable wrap = view.getBackground();
|
||||
if(wrap == null) {
|
||||
wrap = new ColorDrawable(Color.TRANSPARENT);
|
||||
} else if(wrap instanceof BoxShadowDrawable) {
|
||||
wrap = ((BoxShadowDrawable) view.getBackground()).getWrappedDrawable();
|
||||
Log.d("BoxShadowDrawable", "already a BoxShadowDrawable, getting wrapped drawable:" + wrap.getClass().getName());
|
||||
}
|
||||
|
||||
float cornerRadiusValue = cornerRadius * scale;
|
||||
// replace background
|
||||
Log.d("BoxShadowDrawable", "replacing background with new BoxShadowDrawable...");
|
||||
view.setBackground(new BoxShadowDrawable(wrap, value));
|
||||
|
||||
float shadowSpread = spreadRadius * scale;
|
||||
|
||||
// Set shadow layer
|
||||
float[] outerRadius = {cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue};
|
||||
|
||||
// Default background for transparent/semi-transparent background so it doesn't see through the shadow
|
||||
int defaultBackgroundColor = Color.WHITE;
|
||||
RoundRectShape backgroundRectShape = new RoundRectShape(outerRadius, null, null);
|
||||
ShapeDrawable backgroundDrawable = new ShapeDrawable(backgroundRectShape);
|
||||
backgroundDrawable.getPaint().setColor(defaultBackgroundColor);
|
||||
|
||||
// shadow layer setup
|
||||
RoundRectShape shadowRectShape = new RoundRectShape(outerRadius, null, null);
|
||||
ShapeDrawable shadowShapeDrawable = new ShapeDrawable(shadowRectShape);
|
||||
shadowShapeDrawable.getPaint().setShadowLayer(shadowSpread, 0, 0, shadowColor);
|
||||
shadowShapeDrawable.getPaint().setAntiAlias(true);
|
||||
|
||||
// set shadow direction
|
||||
Drawable[] drawableArray = new Drawable[3];
|
||||
drawableArray[0] = shadowShapeDrawable;
|
||||
drawableArray[1] = backgroundDrawable;
|
||||
drawableArray[2] = view.getBackground();
|
||||
LayerDrawable drawable = new LayerDrawable(drawableArray);
|
||||
|
||||
// workaround to show shadow offset (similar to ios's offsets)
|
||||
int shadowInsetsLeft;
|
||||
int shadowInsetsTop;
|
||||
int shadowInsetsRight;
|
||||
int shadowInsetsBottom;
|
||||
|
||||
float offsetX = configOffsetX - spreadRadius;
|
||||
// ignore the following line, this is similar to the adjustedShadowOffset on ios.
|
||||
// it is just used to experiment the amount of insets that need to be applied based
|
||||
// on the offset provided. Need to use some real calculation to gain parity (ask Osei)
|
||||
float insetScaleFactor = 4f / 5f;
|
||||
|
||||
if (configOffsetX == 0) {
|
||||
shadowInsetsLeft = 0;
|
||||
shadowInsetsRight = 0;
|
||||
} else if (configOffsetX > 0) {
|
||||
shadowInsetsLeft = (int) (shadowSpread * insetScaleFactor);
|
||||
shadowInsetsRight = (int) ((offsetX < 0 ? 0 : offsetX) * scale * insetScaleFactor);
|
||||
} else {
|
||||
shadowInsetsLeft = (int) ((offsetX < 0 ? 0 : offsetX) * scale * insetScaleFactor);
|
||||
shadowInsetsRight = (int) (shadowSpread * insetScaleFactor);
|
||||
}
|
||||
float offsetY = configOffsetY - spreadRadius;
|
||||
if (configOffsetY == 0) {
|
||||
shadowInsetsTop = 0;
|
||||
shadowInsetsBottom = 0;
|
||||
} else if (configOffsetY >= 0) {
|
||||
shadowInsetsTop = (int) (shadowSpread * insetScaleFactor);
|
||||
shadowInsetsBottom = (int) ((offsetY < 0 ? 0 : offsetY) * scale * insetScaleFactor);
|
||||
} else {
|
||||
shadowInsetsTop = (int) ((offsetY < 0 ? 0 : offsetY) * scale * insetScaleFactor);
|
||||
shadowInsetsBottom = (int) (shadowSpread * insetScaleFactor);
|
||||
}
|
||||
|
||||
// TODO: this isn't really a shadow offset per se, but just having the some layer
|
||||
// drawable layer have an inset to mimic an offset (feels very hacky ugh)
|
||||
drawable.setLayerInset(0, shadowInsetsLeft, shadowInsetsTop, shadowInsetsRight, shadowInsetsBottom);
|
||||
|
||||
// this is what it shadows look like without offsets - uncomment the following line,
|
||||
// and comment out line above to see what the shadow without any inset modification looks like
|
||||
// on android
|
||||
// drawable.setLayerInset(0, shadowSpread, shadowSpread, shadowSpread, shadowSpread);
|
||||
|
||||
// make sure parent doesn't clip the shadows
|
||||
int count = 0;
|
||||
View nativeView = view;
|
||||
while (view.getParent() != null && view.getParent() instanceof ViewGroup) {
|
||||
int count = 0;
|
||||
while (view.getParent() != null && view.getParent() instanceof ViewGroup) {
|
||||
count++;
|
||||
ViewGroup parent = (ViewGroup) view.getParent();
|
||||
parent.setClipChildren(false);
|
||||
@@ -112,11 +36,20 @@ public class Utils {
|
||||
if (count == 1) {
|
||||
break;
|
||||
}
|
||||
nativeView = parent;
|
||||
}
|
||||
}
|
||||
|
||||
nativeView.setBackground(drawable);
|
||||
} catch (JSONException ignore) {
|
||||
public static void clearBoxShadow(View view) {
|
||||
if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.M) {
|
||||
return;
|
||||
}
|
||||
Log.d("BoxShadowDrawable", "clearBoxShadow.");
|
||||
|
||||
Drawable bg = view.getBackground();
|
||||
if(bg instanceof BoxShadowDrawable) {
|
||||
Drawable original = ((BoxShadowDrawable) view.getBackground()).getWrappedDrawable();
|
||||
Log.d("BoxShadowDrawable", "BoxShadowDrawable found, resetting to original: " + original.getClass().getName());
|
||||
view.setBackground(original);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user