Layout add minWidth minHeight maxWidth maxHeight

This commit is contained in:
pengfei.zhou 2020-04-11 12:20:43 +08:00 committed by osborn
parent 4e537eed47
commit 80811a3bf6
15 changed files with 228 additions and 112 deletions

View File

@ -16,7 +16,6 @@
package pub.doric.shader;
import android.text.TextUtils;
import android.util.Log;
import com.github.pengfeizhou.jscore.JSONBuilder;
import com.github.pengfeizhou.jscore.JSObject;

View File

@ -92,54 +92,7 @@ public abstract class SuperNode<V extends View> extends ViewNode<V> {
protected abstract void blendSubNode(JSObject subProperties);
protected void blendSubLayoutConfig(ViewNode viewNode, JSObject jsObject) {
JSValue margin = jsObject.getProperty("margin");
JSValue widthSpec = jsObject.getProperty("widthSpec");
JSValue heightSpec = jsObject.getProperty("heightSpec");
ViewGroup.LayoutParams layoutParams = viewNode.getLayoutParams();
if (widthSpec.isNumber()) {
switch (widthSpec.asNumber().toInt()) {
case 1:
layoutParams.width = ViewGroup.LayoutParams.WRAP_CONTENT;
break;
case 2:
layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
break;
default:
layoutParams.width = Math.max(0, layoutParams.width);
break;
}
}
if (heightSpec.isNumber()) {
switch (heightSpec.asNumber().toInt()) {
case 1:
layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;
break;
case 2:
layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
break;
default:
layoutParams.height = Math.max(0, layoutParams.height);
break;
}
}
if (margin.isObject() && layoutParams instanceof ViewGroup.MarginLayoutParams) {
JSValue topVal = margin.asObject().getProperty("top");
if (topVal.isNumber()) {
((ViewGroup.MarginLayoutParams) layoutParams).topMargin = DoricUtils.dp2px(topVal.asNumber().toFloat());
}
JSValue leftVal = margin.asObject().getProperty("left");
if (leftVal.isNumber()) {
((ViewGroup.MarginLayoutParams) layoutParams).leftMargin = DoricUtils.dp2px(leftVal.asNumber().toFloat());
}
JSValue rightVal = margin.asObject().getProperty("right");
if (rightVal.isNumber()) {
((ViewGroup.MarginLayoutParams) layoutParams).rightMargin = DoricUtils.dp2px(rightVal.asNumber().toFloat());
}
JSValue bottomVal = margin.asObject().getProperty("bottom");
if (bottomVal.isNumber()) {
((ViewGroup.MarginLayoutParams) layoutParams).bottomMargin = DoricUtils.dp2px(bottomVal.asNumber().toFloat());
}
}
viewNode.blendLayoutConfig(jsObject);
}
private void mixin(JSObject src, JSObject target) {

View File

@ -37,8 +37,6 @@ import android.widget.LinearLayout;
import androidx.annotation.NonNull;
import androidx.interpolator.view.animation.FastOutSlowInInterpolator;
import com.facebook.yoga.YogaNode;
import com.facebook.yoga.android.YogaLayout;
import com.github.pengfeizhou.jscore.JSArray;
import com.github.pengfeizhou.jscore.JSDecoder;
import com.github.pengfeizhou.jscore.JSONBuilder;
@ -55,7 +53,6 @@ import pub.doric.DoricRegistry;
import pub.doric.async.AsyncResult;
import pub.doric.extension.bridge.DoricMethod;
import pub.doric.extension.bridge.DoricPromise;
import pub.doric.shader.flex.FlexNode;
import pub.doric.utils.DoricConstant;
import pub.doric.utils.DoricContextHolder;
import pub.doric.utils.DoricLog;
@ -531,7 +528,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
);
}
private void blendLayoutConfig(JSObject jsObject) {
protected void blendLayoutConfig(JSObject jsObject) {
JSValue margin = jsObject.getProperty("margin");
JSValue widthSpec = jsObject.getProperty("widthSpec");
JSValue heightSpec = jsObject.getProperty("heightSpec");
@ -584,6 +581,14 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
if (jsValue.isNumber() && layoutParams instanceof FrameLayout.LayoutParams) {
((FrameLayout.LayoutParams) layoutParams).gravity = jsValue.asNumber().toInt();
}
JSValue minWidthValue = jsObject.getProperty("minWidth");
if (minWidthValue.isNumber()) {
mView.setMinimumWidth(DoricUtils.dp2px(minWidthValue.asNumber().toFloat()));
}
JSValue minHeightValue = jsObject.getProperty("minHeight");
if (minHeightValue.isNumber()) {
mView.setMinimumHeight(DoricUtils.dp2px(minHeightValue.asNumber().toFloat()));
}
}
protected boolean isAnimating() {

View File

@ -15,7 +15,7 @@ class LayoutDemo extends Panel {
{
backgroundColor: colors[1],
flexConfig: {
width: 300,
width: 500,
height: 100,
}
}),
@ -27,71 +27,77 @@ class LayoutDemo extends Panel {
height: 100,
}
}),
stack([],
{
backgroundColor: colors[3],
flexConfig: {
width: 100,
height: 100,
}
}),
// stack([],
// {
// backgroundColor: colors[3],
// flexConfig: {
// width: 500,
// height: 300,
// }
// }),
// stack([],
// {
// backgroundColor: colors[4],
// flexConfig: {
// width: 500,
// height: 500,
// }
// }),
],
{
flexConfig: {
flexDirection: FlexDirection.COLUMN,
},
backgroundColor: colors[4]
backgroundColor: colors[4].alpha(0.1)
}),
{
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT
heightSpec: LayoutSpec.FIT,
minHeight: 300,
maxHeight: 300,
},
backgroundColor: colors[0],
backgroundColor: colors[0].alpha(0.3),
})
],
{
layoutConfig: layoutConfig().just(),
width: 250,
height: 250,
layoutConfig: layoutConfig().fit(),
}
)
//.in(root)
flexScroller(
[
stack([],
{
backgroundColor: colors[1],
flexConfig: {
width: 500,
height: 100,
}
}),
stack([],
{
backgroundColor: colors[2],
flexConfig: {
width: 100,
height: 100,
}
}),
stack([],
{
backgroundColor: colors[3],
flexConfig: {
width: 100,
height: 100,
}
}),
],
{
backgroundColor: Color.GRAY.alpha(0.3),
layoutConfig: layoutConfig().just(),
width: 300,
height: 300,
flexConfig: {
overFlow: OverFlow.HIDDEN,
}
}).in(root)
).in(root)
// flexScroller(
// [
// stack([],
// {
// backgroundColor: colors[1],
// flexConfig: {
// width: 500,
// height: 100,
// }
// }),
// stack([],
// {
// backgroundColor: colors[2],
// flexConfig: {
// width: 100,
// height: 300,
// }
// }),
// stack([],
// {
// backgroundColor: colors[3],
// flexConfig: {
// width: 100,
// height: 100,
// }
// }),
// ],
// {
// backgroundColor: Color.GRAY.alpha(0.3),
// layoutConfig: layoutConfig().fit(),
// flexConfig: {
// maxWidth: 300,
// maxHeight: 300,
// },
// })//.in(root)
}
}

View File

@ -104,6 +104,15 @@ - (void)measure:(CGSize)targetSize {
width - self.paddingLeft - self.paddingRight,
height - self.paddingTop - self.paddingBottom)];
if ([self restrainSize]) {
[self measureContent:CGSizeMake(
self.measuredWidth - self.paddingLeft - self.paddingRight,
self.measuredHeight - self.paddingTop - self.paddingBottom)];
}
[self restrainSize];
}
- (BOOL)restrainSize {
BOOL needRemeasure = NO;
if (self.measuredWidth > self.maxWidth) {
self.measuredWidth = self.maxWidth;
@ -121,11 +130,7 @@ - (void)measure:(CGSize)targetSize {
self.measuredHeight = self.minHeight;
needRemeasure = YES;
}
if (needRemeasure) {
[self measureContent:CGSizeMake(
self.measuredWidth - self.paddingLeft - self.paddingRight,
self.measuredHeight - self.paddingTop - self.paddingBottom)];
}
return needRemeasure;
}
- (void)measureContent:(CGSize)targetSize {

View File

@ -430,6 +430,18 @@ - (void)blendLayoutConfig:(NSDictionary *)params {
[params[@"weight"] also:^(NSNumber *it) {
self.view.doricLayout.weight = (DoricGravity) [it integerValue];
}];
[params[@"maxWidth"] also:^(NSNumber *it) {
self.view.doricLayout.maxWidth = (DoricGravity) [it integerValue];
}];
[params[@"maxHeight"] also:^(NSNumber *it) {
self.view.doricLayout.maxHeight = (DoricGravity) [it integerValue];
}];
[params[@"minWidth"] also:^(NSNumber *it) {
self.view.doricLayout.minWidth = (DoricGravity) [it integerValue];
}];
[params[@"minHeight"] also:^(NSNumber *it) {
self.view.doricLayout.minHeight = (DoricGravity) [it integerValue];
}];
}
- (NSDictionary *)transformation {

View File

@ -705,6 +705,22 @@ var LayoutConfigImpl = /** @class */ (function () {
this.weight = w;
return this;
};
LayoutConfigImpl.prototype.configMaxWidth = function (v) {
this.maxWidth = v;
return this;
};
LayoutConfigImpl.prototype.configMaxHeight = function (v) {
this.maxHeight = v;
return this;
};
LayoutConfigImpl.prototype.configMinWidth = function (v) {
this.minWidth = v;
return this;
};
LayoutConfigImpl.prototype.configMinHeight = function (v) {
this.minHeight = v;
return this;
};
LayoutConfigImpl.prototype.toModel = function () {
return {
widthSpec: this.widthSpec,

View File

@ -570,6 +570,22 @@ class LayoutConfigImpl {
this.weight = w;
return this;
}
configMaxWidth(v) {
this.maxWidth = v;
return this;
}
configMaxHeight(v) {
this.maxHeight = v;
return this;
}
configMinWidth(v) {
this.minWidth = v;
return this;
}
configMinHeight(v) {
this.minHeight = v;
return this;
}
toModel() {
return {
widthSpec: this.widthSpec,

View File

@ -2029,6 +2029,22 @@ class LayoutConfigImpl {
this.weight = w;
return this;
}
configMaxWidth(v) {
this.maxWidth = v;
return this;
}
configMaxHeight(v) {
this.maxHeight = v;
return this;
}
configMinWidth(v) {
this.minWidth = v;
return this;
}
configMinHeight(v) {
this.minHeight = v;
return this;
}
toModel() {
return {
widthSpec: this.widthSpec,

12
doric-js/index.d.ts vendored
View File

@ -1197,6 +1197,10 @@ declare module 'doric/lib/src/util/layoutconfig' {
};
alignment?: Gravity;
weight?: number;
maxWidth?: number;
maxHeight?: number;
minWidth?: number;
minHeight?: number;
}
export class LayoutConfigImpl implements LayoutConfig, Modeling {
widthSpec?: LayoutSpec;
@ -1209,6 +1213,10 @@ declare module 'doric/lib/src/util/layoutconfig' {
};
alignment?: Gravity;
weight?: number;
maxWidth?: number;
maxHeight?: number;
minWidth?: number;
minHeight?: number;
fit(): this;
most(): this;
just(): this;
@ -1222,6 +1230,10 @@ declare module 'doric/lib/src/util/layoutconfig' {
}): this;
configAlignment(a: Gravity): this;
configWeight(w: number): this;
configMaxWidth(v: number): this;
configMaxHeight(v: number): this;
configMinWidth(v: number): this;
configMinHeight(v: number): this;
toModel(): {
widthSpec: LayoutSpec | undefined;
heightSpec: LayoutSpec | undefined;

View File

@ -25,6 +25,10 @@ export interface LayoutConfig {
};
alignment?: Gravity;
weight?: number;
maxWidth?: number;
maxHeight?: number;
minWidth?: number;
minHeight?: number;
}
export declare class LayoutConfigImpl implements LayoutConfig, Modeling {
widthSpec?: LayoutSpec;
@ -37,6 +41,10 @@ export declare class LayoutConfigImpl implements LayoutConfig, Modeling {
};
alignment?: Gravity;
weight?: number;
maxWidth?: number;
maxHeight?: number;
minWidth?: number;
minHeight?: number;
fit(): this;
most(): this;
just(): this;
@ -50,6 +58,10 @@ export declare class LayoutConfigImpl implements LayoutConfig, Modeling {
}): this;
configAlignment(a: Gravity): this;
configWeight(w: number): this;
configMaxWidth(v: number): this;
configMaxHeight(v: number): this;
configMinWidth(v: number): this;
configMinHeight(v: number): this;
toModel(): {
widthSpec: LayoutSpec | undefined;
heightSpec: LayoutSpec | undefined;

View File

@ -49,6 +49,22 @@ export class LayoutConfigImpl {
this.weight = w;
return this;
}
configMaxWidth(v) {
this.maxWidth = v;
return this;
}
configMaxHeight(v) {
this.maxHeight = v;
return this;
}
configMinWidth(v) {
this.minWidth = v;
return this;
}
configMinHeight(v) {
this.minHeight = v;
return this;
}
toModel() {
return {
widthSpec: this.widthSpec,

View File

@ -43,6 +43,12 @@ export interface LayoutConfig {
alignment?: Gravity
//Only affective in VLayout or HLayout
weight?: number
maxWidth?: number
maxHeight?: number
minWidth?: number
minHeight?: number
}
export class LayoutConfigImpl implements LayoutConfig, Modeling {
@ -58,6 +64,12 @@ export class LayoutConfigImpl implements LayoutConfig, Modeling {
//Only affective in VLayout or HLayout
weight?: number
maxWidth?: number
maxHeight?: number
minWidth?: number
minHeight?: number
fit() {
this.widthSpec = LayoutSpec.FIT
this.heightSpec = LayoutSpec.FIT
@ -106,6 +118,26 @@ export class LayoutConfigImpl implements LayoutConfig, Modeling {
return this
}
configMaxWidth(v: number) {
this.maxWidth = v
return this
}
configMaxHeight(v: number) {
this.maxHeight = v
return this
}
configMinWidth(v: number) {
this.minWidth = v
return this
}
configMinHeight(v: number) {
this.minHeight = v
return this
}
toModel() {
return {
widthSpec: this.widthSpec,

View File

@ -2087,6 +2087,22 @@ class LayoutConfigImpl {
this.weight = w;
return this;
}
configMaxWidth(v) {
this.maxWidth = v;
return this;
}
configMaxHeight(v) {
this.maxHeight = v;
return this;
}
configMinWidth(v) {
this.minWidth = v;
return this;
}
configMinHeight(v) {
this.minHeight = v;
return this;
}
toModel() {
return {
widthSpec: this.widthSpec,

File diff suppressed because one or more lines are too long