a simple frame of UI dynamic wtih android develop.
- server controll mobile applications UI style.
- percentage measure to keep Android and IOS different devices display uniformity.
- support preload to more fast display.
- cache template to prevent duplicate parsing.
at now, just provide libaray mode to import.
implementation project(path: ':dynamic_view')
must init it in your application.
DynamicMaster.init(this);
support preload template when you want to more fast display.
preload :
DynamicMaster.preload().injectViewTemplate(Map<String, Object> viewData);
defload :
DynamicView dynamicView = DynamicMaster.get(Context context) .injectViewData(Map<String, Object> viewData) .injectPropertiesData(Map<String, Object> propertiesData) .build();
it's dynamic load,so you must prepare a display container.
View templateRootView = dynamicView.bindView();contentContainer.addView(rootView);
support inject a callback with binding.
default binding :
dynamicView.bindData();
binding with callback :
-
origin callback,it will be return origin data
dynamicView.bindData(IViewBindCallback bindCallback);
-
simple callback,just handle different view bind
dynamicView.bindData(ViewBindCallbackAdapter vbcAdapter);
dynamicView.bindEventTouch(IEventTouchCallback eventTouchCallback);
| template | viewTree |
|---|---|
| treeTag | |
| properties | data |
| event |
- viewTree : view properties set.
- treeTag : template identifier.
- data : properties corresponding to view,use viewTag as a differentiator.
- event : same as data.
eg :
{
"template": {
"viewTree": {},
"treeTag": ""
},
"properties": {
"data": {},
"event": {}
}
}
| VirtualView | ||
| name | type | value |
|---|---|---|
| tag | String | viewTag,unique in template |
| type | int |
view type
1001 : text 1002 : image 1003 : frame 1004 : linear |
| width | double |
view width
-1 : wrap of self -2 : full in container range(0, 100) : percent of screen width |
| height | double |
view height
-1 : wrap of self -2 : full in container range(0, 100) : percent of screen height |
| selfGravity | int |
view gravity of slef or child
3101 : top 3102 : left 3103 : bottom 3104 : right 3105 : center 3106 : center_vertical 3107 : center_horizontal |
| layoutGravity | int |
view gravity of container
3101 : top 3102 : left 3103 : bottom 3104 : right 3105 : center 3106 : center_vertical 3107 : center_horizontal |
| topMargin | double |
top margin of container
range(0, 100) : percent of screen height |
| leftMargin | double |
left margin of container
range(0, 100) : percent of screen width |
| rightMargin | double |
right margin of container
range(0, 100) : percent of screen width |
| bottomMargin | double |
bottom margin of container
range(0, 100) : percent of screen height |
| topPadding | double |
top padding of self bound
range(0, 100) : percent of screen height |
| leftPadding | double |
left padding of self bound
range(0, 100) : percent of screen width |
| rightPadding | double |
right padding of self bound
range(0, 100) : percent of screen width |
| bottomPadding | double |
bottom padding of self bound
range(0, 100) : percent of screen height |
| bgColor | String |
view background color
hexadecimal color |
| parentType | int |
container type
1003 : frame 1004 : linear |
| Text extends VirtualView | ||
| name | type | value |
|---|---|---|
| fontName | String | local font resources |
| textColor | String | text content color |
| textSize | int | base of sp |
| maxLines | int | end ellipsis after out of range |
| Image extends VirtualView | ||
| name | type | value |
|---|---|---|
| scaleType | int |
image clipping mode
3301 : scale center 3302 : scale fit |
| Container extends VirtualView | ||
| name | type | value |
|---|---|---|
| child | List<? extends VirtualView> | child type must be a subclass of VirtualView |
| Linear extends Container | ||
| name | type | value |
|---|---|---|
| orientation | int |
place orientation
3201 : vertical 3202 : horizontal |
| Frame extends Container | ||
| name | type | value |
|---|---|---|
eg:
{
"tag": "linear_1",
"type": 1004,
"width": -2,
"height": -1,
"selfGravity": 0,
"layoutGravity": 0,
"topMargin": 0.5,
"leftMargin": 2,
"bottomMargin": 0.5,
"rightMargin": 2,
"bgColor": "",
"parentType": 1003,
"orientation": 3201,
"child": [
{
"tag": "text_1",
"type": 1001,
"width": -2,
"height": -1,
"selfGravity": 0,
"layoutGravity": 0,
"topMargin": 0,
"leftMargin": 0,
"bottomMargin": 0,
"rightMargin": 0,
"bgColor": "",
"parentType": 1004,
"fontName": "",
"textColor": "#000000",
"textSize": 18,
"maxLines": 2
},
{
....
},
{
"tag": "frame_1",
"type": 1003,
"width": -2,
"height": 0.08,
"selfGravity": 0,
"layoutGravity": 0,
"topMargin": 1,
"leftMargin": 0,
"bottomMargin": 0,
"rightMargin": 0,
"parentType": 1004,
"bgColor": "#999999",
"child": [...]
}
]
}
| data | |||
| viewTag | name | type | value |
|---|---|---|---|
| < ? > (same of target view's tag properties) |
textContent | String | text content |
| < ? > (same of target view's tag properties) |
imgSource | String |
image resource
1.local icon resources(icon name) 2.hexadecimal color 3.server image resources(http | | https) |
| event | ||
| viewTag | type | value |
|---|---|---|
| < ? > (same of target view's tag properties) |
List<String> | custom rules to user touch callback |
eg:
{
"data": {
"text_1": {
"textContent": ""
},
"text_2": {
"textContent": ""
},
"text_3": {
"textContent": ""
},
"image_1": {
"imgSource": ""
}
},
"event": {
"linear_1": [
"dyv:statistics",
"dyv:navigationDetails"
],
"image_1": [
"dyv:toast"
]
}
}
- subclass of VirtualView assembale viewTree.
- viewTree and treeTag assembale template.
- data and event assemble properties.
eg:
{
"template": {
"viewTree": {
"tag": "linear_1",
"type": 1004,
"width": -2,
"height": -1,
"selfGravity": 0,
"layoutGravity": 0,
"topMargin": 0.5,
"leftMargin": 2,
"bottomMargin": 0.5,
"rightMargin": 2,
"bgColor": "",
"parentType": 1003,
"orientation": 3201,
"child": [
{
"tag": "text_1",
"type": 1001,
"width": -2,
"height": -1,
"selfGravity": 0,
"layoutGravity": 0,
"topMargin": 0,
"leftMargin": 0,
"bottomMargin": 0,
"rightMargin": 0,
"bgColor": "",
"parentType": 1004,
"fontName": "",
"textColor": "#000000",
"textSize": 18,
"maxLines": 2
},
{
"tag": "text_2",
"type": 1001,
"width": -2,
"height": -2,
"selfGravity": 3103,
"layoutGravity": 0,
"topMargin": 0,
"leftMargin": 0,
"bottomMargin": 0,
"rightMargin": 0,
"bgColor": "",
"parentType": 1004,
"fontName": "",
"textColor": "#999999",
"textSize": 14,
"maxLines": 1
},
{
"tag": "frame_1",
"type": 1003,
"width": -2,
"height": -1,
"selfGravity": 0,
"layoutGravity": 0,
"topMargin": 1,
"leftMargin": 0,
"bottomMargin": 1,
"rightMargin": 0,
"parentType": 1003,
"orientation": 3202,
"child": [
{
"tag": "image_1",
"type": 1002,
"width": -2,
"height": 28,
"selfGravity": 0,
"layoutGravity": 0,
"topMargin": 0,
"leftMargin": 0,
"bottomMargin": 0,
"rightMargin": 0,
"bgColor": "#999999",
"parentType": 1003,
"scaleType": 3301
},
{
"tag": "text_3",
"type": 1001,
"width": -1,
"height": -1,
"selfGravity": 3103,
"layoutGravity": 0,
"topMargin": 24,
"leftMargin": 3,
"bottomMargin": 0,
"rightMargin": 3,
"bgColor": "#75000000",
"topPadding": 0.3,
"leftPadding": 2,
"bottomPadding": 0.3,
"rightPadding": 2,
"parentType": 1003,
"scaleType": 3301,
"fontName": "",
"textColor": "#eeeeee",
"textSize": 14,
"maxLines": 0
}
]
},
{
"tag": "linear_3",
"type": 1004,
"width": -2,
"height": 0.05,
"selfGravity": 0,
"layoutGravity": 0,
"topMargin": 0,
"leftMargin": 0,
"bottomMargin": 0,
"rightMargin": 0,
"parentType": 1004,
"orientation": 3201,
"bgColor": "#999999",
"child": []
}
]
},
"treeTag": "big_image"
},
"properties": {
"data": {
"text_1": {
"textContent": "dynamic view"
},
"text_2": {
"textContent": "bottom text"
},
"text_3": {
"textContent": "label text"
},
"image_1": {
"imgSource": "https://"
}
},
"event": {
"linear_1": [
"dyv:statistics",
"dyv:navigationDetails"
],
"image_1": [
"dyv:toast"
]
}
}
}
- support maven center to import.
- support more view.
- enum properties support bitwise.
- measure mode support percentage and specific value switching with template.
- template content compression.
- need a template editor and preview tools.