https://github.com/hectorqin/jsondrivenuinew
https://github.com/hectorqin/jsondrivenuinew
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hectorqin/jsondrivenuinew
- Owner: hectorqin
- License: mit
- Created: 2021-05-24T02:14:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-16T02:16:51.000Z (over 4 years ago)
- Last Synced: 2025-02-14T07:19:07.152Z (8 months ago)
- Language: Swift
- Size: 285 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JSONDrivenUI
Convert your json into native `View`s
Simply construct `JSONDataView(json: Data)` view to setup UI.
OK JSON but how?
* Specify your view's `type` ([ViewType](../main/Sources/JSONDrivenUI/ViewType.swift))
* `properties` of it ([ViewProperties](../main/Sources/JSONDrivenUI/ViewProperties.swift) )
* `values` (like text, imageUrl, systemIconName, localImageName) ([Values](../main/Sources/JSONDrivenUI/Values.swift) )
* `subviews` (for stacks, list & scrollView)
### Supported View Types
Image
- For images we have 3 options. (Order is also like below in case more than 1 set)
* systemIconName
* localImageName
* imageUrl
```json
{
"type": "Image",
"values": {
"systemIconName": "person.crop.circle"
},
"properties": {
"width": 60,
"height": 60
}
}
```
`resizable()` & `scaledToFit()` modifiers applied by default.
Text
* font (largeTitle, title, headline, subheadline, body, callout, footnote, caption)
* fontWeight (ultraLight, thin, light, regular, medium, semibold, bold, heavy, black)
```json
{
"type": "Text",
"values": {
"text": "Enes Karaosman"
},
"properties": {
"fontWeight": "semibold",
"font": "body"
}
}
```
VStack
* spacing: Int
* horizontalAlignment: (leading, center, trailing) // default is center
```json
{
"type": "VStack",
"properties": {
"spacing": 8,
"horizontalAlignment": "leading",
..
},
"subviews": [
...
]
}
```
HStack
* spacing: Int
* verticalAlignment: (top, bottom, center, firstTextBaseline, lastTextBaseline) // default is center
```json
{
"type": "HStack",
"properties": {
"spacing": 8,
"verticalAlignment": "top",
..
},
"subviews": [
...
]
}
```
ZStack
```json
{
"type": "ZStack",
"subviews": [
{
"type": "Circle",
"properties": {
"foregroundColor": "#ff0000",
"width": 200
}
},
{
"type": "Circle",
"properties": {
"foregroundColor": "#00ff00",
"width": 150
}
},
{
"type": "Circle",
"properties": {
"foregroundColor": "#0000ff",
"width": 100
}
}
]
}
```
List
```json
{
"type": "List",
"subviews": [
{ ... },
{ ... },
{ ... }
]
}
```
ScrollView
Scroll view content (subviews) automatically placed in Stack according to given axis.
If axis is vertical placed in VStack, otherwise in HStack.
```json
{
"type": "ScrollView",
"properties": {
"axis": "vertical",
"showsIndicators": true
}
"subviews": [
{ ... },
{ ... },
{ ... }
]
}
```
* Spacer (`minLenght: Int?`)
* Rectangle
* Circle
* Divider
#### Examples
```json
{
"type": "HStack",
"properties": {
"height": 100,
"padding": 16,
"spacing": 16
},
"subviews": [
{
"type": "Image",
"values": {
"systemIconName": "person.crop.circle"
},
"properties": {
"width": 60,
"height": 60
}
},
{
"type": "VStack",
"properties": {
"foregroundColor": "#f0f00f",
"spacing": 8,
"horizontalAlignment": "leading"
},
"subviews": [
{
"type": "Text",
"values": {
"text": "Enes Karaosman"
},
"properties": {
"fontWeight": "semibold",
"foregroundColor": "#000000"
}
},
{
"type": "Text",
"values": {
"text": "Here is a bit description like text"
},
"properties": {
"foregroundColor": "#070707"
}
}
]
}
]
}
```
```json
{
"type": "VStack",
"subviews": [
{
"type": "Text",
"properties": {
"font": "title"
},
"values": {
"text": "LARGE TITLE TEXT"
}
},
{
"type": "Image",
"values": {
"imageUrl": "http://picsum.photos/400/200"
},
"properties": {
"padding": 16,
"height": 200
}
},
{
"type": "Text",
"properties": {
"padding": 16,
"font": "title",
"fontWeight": "semibold"
},
"values": {
"text": "Semibold Title"
}
},
{
"type": "List",
"properties": {
"horizontalAlignment": "leading",
"spacing": 16,
"padding": 8
},
"subviews": [
{
"type": "HStack",
"properties": {
"foregroundColor": "#001238",
"spacing": 8
},
"subviews": [
{
"type": "Image",
"properties": {
"height": 70
},
"values": {
"imageUrl": "http://picsum.photos/70/70"
}
},
{
"type": "VStack",
"properties": {
"spacing": 4,
"horizontalAlignment": "leading"
},
"subviews": [
{
"type": "Text",
"values": { "text" : "Item.1 Title" }
},
{
"type": "Text",
"properties": {
"foregroundColor": "#828282"
},
"values": { "text" : "Here is multiline description text in VStack which is inside HStack" }
}
]
}
]
},
{
"type": "HStack",
"properties": {
"foregroundColor": "#001238",
"spacing": 8
},
"subviews": [
{
"type": "Image",
"properties": {
"height": 70
},
"values": {
"imageUrl": "http://picsum.photos/70/70"
}
},
{
"type": "VStack",
"properties": {
"spacing": 4,
"horizontalAlignment": "leading"
},
"subviews": [
{
"type": "Text",
"values": { "text" : "Item.2 Title" }
},
{
"type": "Text",
"properties": {
"foregroundColor": "#828282"
},
"values": { "text" : "Here is second multiline description text in VStack which is inside HStack" }
}
]
}
]
}
]
}
]
}
```