Swift :How to create dynamic layout from json response iOS

Question

I want to create dynamic layout according to json response getting from server. I'm confused between methodology using views with constraints or using tableview to achieve this layout. I have researched another approach is that make the different kinds of xib views, after parsing the response, checked every element type and call the respective view in tableview cell. I just want a suggestion how can i create this layout in better way.

The json response is:

 "data": {
  "elementperrowtwo": {
    [
      {
        “fieldid”: “1”,
        “fieldtype”: “label”,
        “fieldtext”: “OrderDate”,
        “fieldcontrolno”: ”1”,
        “displaycolumntype”: “2”
      },
      {
        “fieldid”: “2”,
        “fieldtype”: “textfield”,
        “fieldtext”: “”,
        “fieldcontrolno”: ”2”,
        “displaycolumntype”: “2”
      },
      {
        “fieldid”: “3”,
        “fieldtype”: “label”,
        “fieldtext”: “OurReference”,
        “fieldcontrolno”: ”1”,
        “displaycolumntype”: “2”
      },
      {
        “fieldid”: “4”,
        “fieldtype”: “textfield”,
        “fieldtext”: “”,
        “fieldcontrolno”: ”2”,
        “displaycolumntype”: “2”
      }
    ],
    "elementperrowone": [
      {
        “fieldid”: “8”,
        “fieldtype”: “label”,
        “fieldtext”: “Buyer”,
        “fieldcontrolno”: ”1”,
        “displaycolumntype”: “1”
      },
      {
        “fieldid”: “9”,
        “fieldtype”: “textfield”,
        “fieldtext”: “”,
        “fieldcontrolno”: ”2”,
        “displaycolumntype”: “1”
      },
      {
        “fieldid”: “16”,
        “fieldtype”: “dropdown”,
        “fieldarray”: [
          {
            “id”: “1”,
            “name”: “australia”
          },
          {
            “id”: “2”,
            “name”: “china”
          },
          {
            “id”: “3”,
            “name”: “India”
          }
        ],
        “fieldcontrolno”: ”3”,
        “displaycolumntype”: “1”
      }
    ]
  } 

Answer 1

The best approach for achieving dynamic layout is using a stack view. Using xib you can init the view and add it as arranged subview inside the stackview.

First, you need to create an extension function so that you can reuse it.

extension UIView {

    func loadFromNib() {
        Bundle.main.loadNibNamed(String(describing: type(of: self)), owner: self, options: nil)
    }
}

After designing xib all you need is to init view from xib to use it. Bellow is code for initializing view from xib.

class FormLabelFieldCell: UIView {
    @IBOutlet weak var contentView: UIView!
    @IBOutlet weak var lblTitle: UILabel!

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }

    func commonInit() {
        loadFromNib()
        addSubview(contentView)
        contentView.frame = self.bounds
        contentView.autoresizingMask = [.flexibleWidth,.flexibleHeight]
    }

}

You can add this as a subview as

let cell = FormLabelFieldCell()
mainStack.addArrangedSubview(cell.contentView)