KXJsonUI is a JSON layout framework for iOS, which enables you contstruct your user interfaces using JSON files. You can build your UI without using interface builder. KXJsonUI utilizes the similar concepts from Android layout managment. With this framework, all UI layout can be arranged using KXLinearLayout and KXRelativeLayout classes.

• Create and manage UIViews using JSON text files
• Supports RelativeLayout and LinearLayout
• Suppports rotations
• Supports UITableViewCell and UICollectionViewCell
• Supports adding unknown view class
• Supports dynamic change layouts

Requires iOS 8.0 and ARC.

The easiest way of installing KXJsonUI is via CocoaPods.

pod 'KXJsonUI'

• Add all subfolders and *.h, *.m, *.mm from folder KXJsonUI_ios/KXJsonUI_ios/ to your project.
• Add QuartzCore.framework to your linked frameworks.
• #import "KXJsonUI_ios.h" where you want to use the framework.

#import "KXJsonUI_ios.h"

Load UI layout from a JSON file is easy. Asume the JSON file you are going to load is named helloworld.json. Also, please ensure that the file has been added into the project.

KXBuilder is used to parse and build the UI layout from a JSON file.

Add a property of type KXBuilder* in YourViewController.h file.

@property(nonatomic, strong) KXBuilder *builder;

Load the JSON file in -(void) viewDidLoad method in YourViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.builder = [[KXBuilder alloc] init];
    if( [self.builder loadFileWithName: @"helloworld.json"] ){
        [self.builder buildLayoutInView:self.view];
    }
}

That's all! Start the view controller and you can see all the UIViews are constructed according to the content of the JSON file.

UIViews in a view controller can be written in a JSON file. The basic structure of a layout file looks like below,

{  
  "layout": {    
      "name": "root",
      "widget": "CLASS_NAME_OF_A_UIVIEW_CLASS",      
      "attr": [
        {
          "name": "size",
          "value": {
            "width": "match_parent",
            "height": "match_parent"
          }
        }        
      ],
      "subviews": [         
      ]
  }
}

All UIViews are represented in a nested structure. The root view of the layout must be named as root. The value of the attribute widget is the class name of a UIView class. For instance, the value of widget can be one of the following classes: UIView, UIButton, UILable, ... etc.

The value of attr is an array, which contains one or more than one attributes of the view. Each attribute is represented as a name,value pair. For instance, the color and size and other attributes can be configured in attrs.

The value of subviews is an array, which contains the property fot its subviews. Any view can have zero or more than one subviews.

The value of widget for the root view usually equals to KXLinearLayout or KXRelativeLayout. In most cases, we use these classes to manage our views for different screen sizes.

Here is a simple exmple of a view controller, which contains one label and two buttons.

Example JSON file

{  
  "layout": {    
      "name": "root",
      "widget": "KXLinearLayout",      
      "attr": [
        {
          "name": "size",
          "value": {
            "width": "match_parent",
            "height": "match_parent"
          }
        },
        {
          "name": "orientation",
          "value": "vertical"
        },
        {
          "name": "color",
          "value": "#ffffff"
        }
      ],
      "subviews": [
        {
          "name": "label1",
          "widget": "UILabel",
          "attr": [
            {
              "name": "size",
              "value": {
                "width": "match_parent",
                "height": "auto"
              }
            },
            {
              "name": "color",
              "value": "yellow"
            },
            {
              "name": "weight",
              "value": 1
            },
            {
              "name": "text",
              "value": "Hello! This is label1!"
            },
            {
              "name": "text_color",
              "value": "#202020"
            },
            {
              "name": "margins",
              "value": {
                "left": "4dp",
                "top": "4dp",
                "right": "4dp",
                "bottom": "4dp"
              }
            }            
          ]
        }
     ]    
  }
}

The above exmaple depicts a root view of KXLineLayout type and its subview label1 of UILabel type. KXLinearLayout is similar to the LinearLayout in Android. Subviews of a KXLinearLayout are arranged accoring to the orientation and weight attributes.

I'm working on providing more documentation and tutorials. If you want to learn more about this framework, it is recommended to check out the exmaples in the KXJsonUIDemo project.

KXJsonUI is licensed under the terms of the MIT License. Please see the LICENSE file for full details.

This framework is currently work-in-progress. If there is any suggestion, I would love to hear from you.