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.content.Context;
|
||||||
import android.graphics.Color;
|
import android.graphics.Color;
|
||||||
import android.graphics.drawable.ColorDrawable;
|
import android.graphics.drawable.ColorDrawable;
|
||||||
|
import android.graphics.drawable.GradientDrawable;
|
||||||
import android.view.View;
|
import android.view.View;
|
||||||
import android.view.ViewGroup;
|
import android.view.ViewGroup;
|
||||||
import android.view.animation.AccelerateDecelerateInterpolator;
|
import android.view.animation.AccelerateDecelerateInterpolator;
|
||||||
@ -35,19 +36,6 @@ import android.widget.LinearLayout;
|
|||||||
|
|
||||||
import androidx.annotation.NonNull;
|
import androidx.annotation.NonNull;
|
||||||
import androidx.interpolator.view.animation.FastOutSlowInInterpolator;
|
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.JSArray;
|
||||||
import com.github.pengfeizhou.jscore.JSDecoder;
|
import com.github.pengfeizhou.jscore.JSDecoder;
|
||||||
@ -60,6 +48,17 @@ import org.json.JSONObject;
|
|||||||
|
|
||||||
import java.util.LinkedList;
|
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
|
* @Description: Render
|
||||||
* @Author: pengfei.zhou
|
* @Author: pengfei.zhou
|
||||||
@ -190,15 +189,58 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
|
|||||||
break;
|
break;
|
||||||
case "backgroundColor":
|
case "backgroundColor":
|
||||||
if (isAnimating()) {
|
if (isAnimating()) {
|
||||||
ObjectAnimator animator = ObjectAnimator.ofInt(
|
if (prop.isNumber()) {
|
||||||
this,
|
ObjectAnimator animator = ObjectAnimator.ofInt(
|
||||||
name,
|
this,
|
||||||
getBackgroundColor(),
|
name,
|
||||||
prop.asNumber().toInt());
|
getBackgroundColor(),
|
||||||
animator.setEvaluator(new ArgbEvaluator());
|
prop.asNumber().toInt());
|
||||||
addAnimator(animator);
|
animator.setEvaluator(new ArgbEvaluator());
|
||||||
|
addAnimator(animator);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
setBackgroundColor(prop.asNumber().toInt());
|
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;
|
break;
|
||||||
case "onClick":
|
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";
|
import { colors } from "./utils";
|
||||||
|
|
||||||
|
|
||||||
@ -28,6 +28,7 @@ function label(str: string) {
|
|||||||
|
|
||||||
@Entry
|
@Entry
|
||||||
class EffectsDemo extends Panel {
|
class EffectsDemo extends Panel {
|
||||||
|
|
||||||
build(rootView: Group) {
|
build(rootView: Group) {
|
||||||
scroller(
|
scroller(
|
||||||
vlayout(
|
vlayout(
|
||||||
@ -422,6 +423,187 @@ class EffectsDemo extends Panel {
|
|||||||
],
|
],
|
||||||
{ space: 20 }
|
{ 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
|
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