/JSONDrivenUI

JSON into native SwiftUI View to build UI for iOS.

Primary LanguageSwiftMIT LicenseMIT

JSONDrivenUI

Convert your json into native Views

Simply construct JSONDataView(json: Data) view to setup UI.

OK JSON but how?

  • Specify your view's type (ViewType)
  • properties of it (ViewProperties )
  • values (like text, imageUrl, systemIconName, localImageName) (Values )
  • 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
{
  "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)
{
    "type": "Text",
    "values": {
        "text": "Enes Karaosman"
    },
    "properties": {
        "fontWeight": "semibold",
        "font": "body"
    }
}
VStack
* spacing: Int
* horizontalAlignment: (leading, center, trailing) // default is center
{
    "type": "VStack",
    "properties": {
        "spacing": 8,
        "horizontalAlignment": "leading",
        ..
    },
    "subviews": [
        ...
    ]
}
HStack
* spacing: Int
* verticalAlignment: (top, bottom, center, firstTextBaseline, lastTextBaseline) // default is center
{
    "type": "HStack",
    "properties": {
        "spacing": 8,
        "verticalAlignment": "top",
        ..
    },
    "subviews": [
        ...
    ]
}
ZStack
{
  "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
{
  "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.

{
  "type": "ScrollView",
  "properties": {
    "axis": "vertical",
    "showsIndicators": true
  }
  "subviews": [
    { ... },
    { ... },
    { ... }
  ]
}
  • Spacer (minLenght: Int?)
  • Rectangle
  • Circle
  • Divider

Examples

{
  "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"
          }
        }
      ]
    }
  ]
}
{
    "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" }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}