android: add gradient background for view node
This commit is contained in:
王劲鹏
osborn
parent
f9ffb42367
commit
5728b852cd
@ -23,6 +23,7 @@ import android.animation.ObjectAnimator;
|
||||
import android.content.Context;
|
||||
import android.graphics.Color;
|
||||
import android.graphics.drawable.ColorDrawable;
|
||||
import android.graphics.drawable.GradientDrawable;
|
||||
import android.view.View;
|
||||
import android.view.ViewGroup;
|
||||
import android.view.animation.AccelerateDecelerateInterpolator;
|
||||
@ -35,19 +36,6 @@ import android.widget.LinearLayout;
|
||||
|
||||
import androidx.annotation.NonNull;
|
||||
import androidx.interpolator.view.animation.FastOutSlowInInterpolator;
|
||||
import androidx.interpolator.view.animation.LinearOutSlowInInterpolator;
|
||||
|
||||
import pub.doric.Doric;
|
||||
import pub.doric.DoricContext;
|
||||
import pub.doric.DoricRegistry;
|
||||
import pub.doric.async.AsyncResult;
|
||||
import pub.doric.extension.bridge.DoricMethod;
|
||||
import pub.doric.extension.bridge.DoricPromise;
|
||||
import pub.doric.utils.DoricContextHolder;
|
||||
import pub.doric.utils.DoricConstant;
|
||||
import pub.doric.utils.DoricLog;
|
||||
import pub.doric.utils.DoricMetaInfo;
|
||||
import pub.doric.utils.DoricUtils;
|
||||
|
||||
import com.github.pengfeizhou.jscore.JSArray;
|
||||
import com.github.pengfeizhou.jscore.JSDecoder;
|
||||
@ -60,6 +48,17 @@ import org.json.JSONObject;
|
||||
|
||||
import java.util.LinkedList;
|
||||
|
||||
import pub.doric.DoricContext;
|
||||
import pub.doric.DoricRegistry;
|
||||
import pub.doric.async.AsyncResult;
|
||||
import pub.doric.extension.bridge.DoricMethod;
|
||||
import pub.doric.extension.bridge.DoricPromise;
|
||||
import pub.doric.utils.DoricConstant;
|
||||
import pub.doric.utils.DoricContextHolder;
|
||||
import pub.doric.utils.DoricLog;
|
||||
import pub.doric.utils.DoricMetaInfo;
|
||||
import pub.doric.utils.DoricUtils;
|
||||
|
||||
/**
|
||||
* @Description: Render
|
||||
* @Author: pengfei.zhou
|
||||
@ -190,6 +189,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
|
||||
break;
|
||||
case "backgroundColor":
|
||||
if (isAnimating()) {
|
||||
if (prop.isNumber()) {
|
||||
ObjectAnimator animator = ObjectAnimator.ofInt(
|
||||
this,
|
||||
name,
|
||||
@ -197,8 +197,50 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
|
||||
prop.asNumber().toInt());
|
||||
animator.setEvaluator(new ArgbEvaluator());
|
||||
addAnimator(animator);
|
||||
}
|
||||
} else {
|
||||
if (prop.isNumber()) {
|
||||
setBackgroundColor(prop.asNumber().toInt());
|
||||
} else if (prop.isObject()) {
|
||||
JSValue start = prop.asObject().getProperty("start");
|
||||
JSValue end = prop.asObject().getProperty("end");
|
||||
JSValue orientation = prop.asObject().getProperty("orientation");
|
||||
|
||||
GradientDrawable gradientDrawable = new GradientDrawable();
|
||||
gradientDrawable.setShape(GradientDrawable.RECTANGLE);
|
||||
gradientDrawable.setColors(new int[]{start.asNumber().toInt(), end.asNumber().toInt()});
|
||||
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
|
||||
|
||||
switch (orientation.asNumber().toInt()) {
|
||||
case 0:
|
||||
gradientDrawable.setOrientation(GradientDrawable.Orientation.TOP_BOTTOM);
|
||||
break;
|
||||
case 1:
|
||||
gradientDrawable.setOrientation(GradientDrawable.Orientation.TR_BL);
|
||||
break;
|
||||
case 2:
|
||||
gradientDrawable.setOrientation(GradientDrawable.Orientation.RIGHT_LEFT);
|
||||
break;
|
||||
case 3:
|
||||
gradientDrawable.setOrientation(GradientDrawable.Orientation.BR_TL);
|
||||
break;
|
||||
case 4:
|
||||
gradientDrawable.setOrientation(GradientDrawable.Orientation.BOTTOM_TOP);
|
||||
break;
|
||||
case 5:
|
||||
gradientDrawable.setOrientation(GradientDrawable.Orientation.BL_TR);
|
||||
break;
|
||||
case 6:
|
||||
gradientDrawable.setOrientation(GradientDrawable.Orientation.LEFT_RIGHT);
|
||||
break;
|
||||
case 7:
|
||||
gradientDrawable.setOrientation(GradientDrawable.Orientation.TL_BR);
|
||||
break;
|
||||
}
|
||||
|
||||
gradientDrawable.setSize(view.getMeasuredWidth(), view.getMeasuredHeight());
|
||||
view.setBackground(gradientDrawable);
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "onClick":
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, Gravity } from "doric";
|
||||
import { Group, Panel, Text, text, Color, Stack, vlayout, hlayout, scroller, layoutConfig, Gravity, GradientColor, GradientOrientation } from "doric";
|
||||
import { colors } from "./utils";
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@ function label(str: string) {
|
||||
|
||||
@Entry
|
||||
class EffectsDemo extends Panel {
|
||||
|
||||
build(rootView: Group) {
|
||||
scroller(
|
||||
vlayout(
|
||||
@ -422,6 +423,187 @@ class EffectsDemo extends Panel {
|
||||
],
|
||||
{ space: 20 }
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
vlayout(
|
||||
[
|
||||
label("Gradient TOP_BOTTOM"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: {
|
||||
start: colors[0],
|
||||
end: Color.WHITE,
|
||||
orientation: GradientOrientation.TOP_BOTTOM
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Gradient TR_BL"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: {
|
||||
start: colors[0],
|
||||
end: Color.WHITE,
|
||||
orientation: GradientOrientation.TR_BL
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Gradient RIGHT_LEFT"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: {
|
||||
start: colors[0],
|
||||
end: Color.WHITE,
|
||||
orientation: GradientOrientation.RIGHT_LEFT
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Gradient BR_TL"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: {
|
||||
start: colors[0],
|
||||
end: Color.WHITE,
|
||||
orientation: GradientOrientation.BR_TL
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Gradient BOTTOM_TOP"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: {
|
||||
start: colors[0],
|
||||
end: Color.WHITE,
|
||||
orientation: GradientOrientation.BOTTOM_TOP
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Gradient BL_TR"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: {
|
||||
start: colors[0],
|
||||
end: Color.WHITE,
|
||||
orientation: GradientOrientation.BL_TR
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Gradient LEFT_RIGHT"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: {
|
||||
start: colors[0],
|
||||
end: Color.WHITE,
|
||||
orientation: GradientOrientation.LEFT_RIGHT
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Gradient TL_BR"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: {
|
||||
start: colors[0],
|
||||
end: Color.WHITE,
|
||||
orientation: GradientOrientation.TL_BR
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
],
|
||||
{ space: 20 }
|
||||
),
|
||||
],
|
||||
{
|
||||
space: 20
|
||||
|
||||
2
doric-web/dist/index.js.map
vendored
2
doric-web/dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user