tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/listview' into 'master'

Browse Source 
Feature/listview



See merge request !11
This commit is contained in:
pengfeizhou 2019-11-16 18:48:07 +08:00
commit 16602716f3
12 changed files with 129 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Android/doric/src/main/java/pub/doric/shader/StackNode.java
View File

@ -51,14 +51,8 @@ public class StackNode extends GroupNode<FrameLayout> {
@Override
protected void blend(FrameLayout view, String name, JSValue prop) {
switch (name) {
case "gravity":
view.setForegroundGravity(prop.asNumber().toInt());
break;
default:
super.blend(view, name, prop);
}
}
@Override
protected ViewGroup.LayoutParams generateDefaultLayoutParams() {

3
Android/doric/src/main/java/pub/doric/shader/TextNode.java
View File

@ -16,6 +16,7 @@
package pub.doric.shader;
import android.util.TypedValue;
import android.view.Gravity;
import android.widget.TextView;
import pub.doric.DoricContext;
@ -52,7 +53,7 @@ public class TextNode extends ViewNode<TextView> {
view.setTextColor(prop.asNumber().toInt());
break;
case "textAlignment":
view.setGravity(prop.asNumber().toInt());
view.setGravity(prop.asNumber().toInt() | Gravity.CENTER_VERTICAL);
break;
default:
super.blend(view, name, prop);

61
Android/doric/src/main/java/pub/doric/shader/ViewNode.java
View File

@ -19,6 +19,7 @@ import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import pub.doric.DoricContext;
import pub.doric.DoricRegistry;
@ -93,32 +94,30 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
} else {
params = mLayoutParams;
}
if (mLayoutParams instanceof LinearLayout.LayoutParams && ((LinearLayout.LayoutParams) mLayoutParams).weight > 0) {
if (mSuperNode instanceof VLayoutNode) {
params.height = ViewGroup.LayoutParams.MATCH_PARENT;
} else if (mSuperNode instanceof HLayoutNode) {
params.width = ViewGroup.LayoutParams.MATCH_PARENT;
}
}
mView.setLayoutParams(params);
}
protected void blend(T view, String name, JSValue prop) {
switch (name) {
case "width":
if (mLayoutParams.width >= 0) {
mLayoutParams.width = DoricUtils.dp2px(prop.asNumber().toFloat());
}
setWidth(prop.asNumber().toFloat());
break;
case "height":
if (mLayoutParams.height >= 0) {
mLayoutParams.height = DoricUtils.dp2px(prop.asNumber().toFloat());
}
setHeight(prop.asNumber().toFloat());
break;
case "x":
if (mLayoutParams instanceof ViewGroup.MarginLayoutParams) {
float x = prop.asNumber().toFloat();
((ViewGroup.MarginLayoutParams) mLayoutParams).leftMargin = DoricUtils.dp2px(x);
}
setX(prop.asNumber().toFloat());
break;
case "y":
if (mLayoutParams instanceof ViewGroup.MarginLayoutParams) {
float y = prop.asNumber().toFloat();
((ViewGroup.MarginLayoutParams) mLayoutParams).topMargin = DoricUtils.dp2px(y);
}
setY(prop.asNumber().toFloat());
break;
case "bgColor":
view.setBackgroundColor(prop.asNumber().toInt());
@ -133,9 +132,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
});
break;
case "layoutConfig":
if (prop.isObject() && mSuperNode != null) {
mSuperNode.blendSubLayoutConfig(this, prop.asObject());
}
setLayoutConfig(prop.asObject());
break;
case "border":
if (prop.isObject() && doricLayer != null) {
@ -216,4 +213,34 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
public String getId() {
return mId;
}
protected void setWidth(float width) {
if (mLayoutParams.width >= 0) {
mLayoutParams.width = DoricUtils.dp2px(width);
}
}
protected void setHeight(float height) {
if (mLayoutParams.height >= 0) {
mLayoutParams.height = DoricUtils.dp2px(height);
}
}
protected void setX(float x) {
if (mLayoutParams instanceof ViewGroup.MarginLayoutParams) {
((ViewGroup.MarginLayoutParams) mLayoutParams).leftMargin = DoricUtils.dp2px(x);
}
}
protected void setY(float y) {
if (mLayoutParams instanceof ViewGroup.MarginLayoutParams) {
((ViewGroup.MarginLayoutParams) mLayoutParams).topMargin = DoricUtils.dp2px(y);
}
}
protected void setLayoutConfig(JSObject layoutConfig) {
if (mSuperNode != null) {
mSuperNode.blendSubLayoutConfig(this, layoutConfig);
}
}
}

8
Android/doric/src/main/java/pub/doric/shader/list/ListItemNode.java
View File

@ -17,6 +17,7 @@ package pub.doric.shader.list;
import android.widget.FrameLayout;
import com.github.pengfeizhou.jscore.JSObject;
import com.github.pengfeizhou.jscore.JSValue;
import pub.doric.DoricContext;
@ -45,4 +46,11 @@ public class ListItemNode extends StackNode {
super.blend(view, name, prop);
}
}
@Override
public void blend(JSObject jsObject) {
super.blend(jsObject);
getDoricLayer().getLayoutParams().width = getLayoutParams().width;
getDoricLayer().getLayoutParams().height = getLayoutParams().height;
}
}

48
demo/src/ListDemo.ts
View File

@ -1,4 +1,4 @@
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout } from "doric";
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout } from "doric";
const colors = [
"#f0932b",
"#eb4d4b",
@ -26,23 +26,44 @@ class ListPanel extends Panel {
list({
itemCount: 1000,
renderItem: (idx: number) => {
return listItem(text({
return listItem(
hlayout([
text({
layoutConfig: {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.WRAP_CONTENT,
margin: {
left: 10,
right: 50,
top: 50,
bottom: 10,
},
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.EXACTLY,
alignment: gravity().center(),
},
text: `Cell At Line ${idx}`,
textAlignment: gravity().center(),
textColor: Color.parse("#ffffff"),
textSize: 20,
})).also(it => {
it.gravity = gravity().center()
height: 50,
bgColor: Color.parse('#00ff00'),
}),
text({
layoutConfig: {
widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY,
alignment: gravity().center(),
weight: 1,
},
text: `Right`,
textAlignment: gravity().right(),
textColor: Color.parse("#ffffff"),
textSize: 20,
height: 50,
bgColor: Color.parse('#00ffff'),
}),
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.WRAP_CONTENT,
alignment: gravity().center(),
}
it.bgColor = Color.parse('#ffffff')
})
).also(it => {
it.bgColor = Color.parse(colors[idx % colors.length])
it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST,
@ -51,8 +72,7 @@ class ListPanel extends Panel {
it.height = 100
it.onClick = () => {
log(`Click item at ${idx}`)
it.bgColor = Color.parse('#000000')
log(`bgcolor is ${Color.parse('#000000').toModel()}`)
it.height += 10
}
})
},

26
demo/src/Snake.ts
View File

@ -189,6 +189,10 @@ class SnakeView extends ViewHolder<SnakeModel> {
textSize: 30,
textAlignment: new Gravity().center(),
bgColor: Color.parse('#ffff00'),
layoutConfig: {
widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY,
},
}).also(it => this.up = it)
]).also(it => {
it.layoutConfig = {
@ -204,6 +208,10 @@ class SnakeView extends ViewHolder<SnakeModel> {
textSize: 30,
textAlignment: new Gravity().center(),
bgColor: Color.parse('#ffff00'),
layoutConfig: {
widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY,
},
}).also(it => this.left = it),
text({
width: 50,
@ -212,6 +220,10 @@ class SnakeView extends ViewHolder<SnakeModel> {
textSize: 30,
textAlignment: new Gravity().center(),
bgColor: Color.parse('#ffff00'),
layoutConfig: {
widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY,
},
}).also(it => this.down = it),
text({
width: 50,
@ -220,6 +232,10 @@ class SnakeView extends ViewHolder<SnakeModel> {
textSize: 30,
textAlignment: new Gravity().center(),
bgColor: Color.parse('#ffff00'),
layoutConfig: {
widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY,
},
}).also(it => this.right = it),
]).also(it => {
it.layoutConfig = {
@ -248,16 +264,6 @@ class SnakeView extends ViewHolder<SnakeModel> {
}).in(root)
}
buildController(text: string) {
const ret = new Text
ret.width = ret.height = 50
ret.bgColor = Color.parse('#ffff00')
ret.text = text
ret.textSize = 30
ret.textAlignment = new Gravity().center()
return ret
}
bind(state: SnakeModel): void {
log('build', state)
this.panel.width = state.width * 10

20
iOS/Pod/Classes/Shader/DoricLayouts.m
View File

@ -530,23 +530,3 @@ - (UIView *)viewWithTagString:(NSString *)tagString {
layout.layoutConfig = [[DoricLayoutConfig alloc] initWithWidth:DoricLayoutWrapContent height:DoricLayoutWrapContent];
return layout;
}
DoricVLayoutView *vLayoutWithBlock(NSArray <UIView *(^)()> *blocks) {
DoricVLayoutView *layout = [[DoricVLayoutView alloc] initWithFrame:CGRectZero];
UIView *(^block)();
for (block in blocks) {
[layout addSubview:block()];
}
layout.layoutConfig = [[DoricLayoutConfig alloc] initWithWidth:DoricLayoutWrapContent height:DoricLayoutWrapContent];
return layout;
}
DoricHLayoutView *hLayoutWithBlock(NSArray <UIView *(^)()> *blocks) {
DoricHLayoutView *layout = [[DoricHLayoutView alloc] initWithFrame:CGRectZero];
UIView *(^block)();
for (block in blocks) {
[layout addSubview:block()];
}
layout.layoutConfig = [[DoricLayoutConfig alloc] initWithWidth:DoricLayoutWrapContent height:DoricLayoutWrapContent];
return layout;
}

4
iOS/Pod/Classes/Shader/DoricStackNode.m
View File

@ -29,10 +29,6 @@ - (DoricStackView *)build {
}
- (void)blendView:(DoricStackView *)view forPropName:(NSString *)name propValue:(id)prop {
if ([name isEqualToString:@"gravity"]) {
view.gravity = (DoricGravity) [(NSNumber *) prop integerValue];
} else {
[super blendView:view forPropName:name propValue:prop];
}
}
@end

5
iOS/Pod/Classes/Shader/DoricSuperNode.m
View File

@ -93,7 +93,10 @@ - (void)blendSubNode:(DoricViewNode *)subNode layoutConfig:(NSDictionary *)layou
if (alignment) {
params.alignment = (DoricGravity) [alignment integerValue];
}
NSNumber *weight = layoutConfig[@"weight"];
if (weight) {
params.weight = (DoricGravity) [weight integerValue];
}
}
- (void)blendSubNode:(NSDictionary *)subModel {

9
iOS/Pod/Classes/Shader/DoricTextNode.m
View File

@ -39,15 +39,10 @@ - (void)blendView:(UILabel *)view forPropName:(NSString *)name propValue:(id)pro
} else if ([name isEqualToString:@"textAlignment"]) {
DoricGravity gravity = (DoricGravity) [(NSNumber *) prop integerValue];
NSTextAlignment alignment = NSTextAlignmentCenter;
switch (gravity) {
case LEFT:
if ((gravity & LEFT) == LEFT) {
alignment = NSTextAlignmentLeft;
break;
case RIGHT:
} else if ((gravity & RIGHT) == RIGHT) {
alignment = NSTextAlignmentRight;
break;
default:
break;
}
view.textAlignment = alignment;
} else {

8
js-framework/src/ui/declarative.ts
View File

@ -20,6 +20,10 @@ import { IList, List } from './listview'
export function text(config: IText) {
const ret = new Text
ret.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
for (let key in config) {
Reflect.set(ret, key, Reflect.get(config, key, config), ret)
}
@ -28,6 +32,10 @@ export function text(config: IText) {
export function image(config: IImage) {
const ret = new Image
ret.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
for (let key in config) {
Reflect.set(ret, key, Reflect.get(config, key, config), ret)
}

3
js-framework/src/ui/layout.ts
View File

@ -17,12 +17,9 @@ import { LayoutConfig, Group, Property, IView } from "./view";
import { Gravity } from "../util/gravity";
export interface IStack extends IView {
gravity?: Gravity
}
export class Stack extends Group implements IStack {
@Property
gravity?: Gravity
}