Martin Koles
Martin Koles

Reputation: 5247

How to dynamically define Autolayout on the backend

I am building a generic workflow client app that should consume workflow tasks from multiple sources that can be even added later ideally without changing the application code. The idea is that the app will adapt to data structure, types, UI and action elements and ideally also layout based on some kind of schema defined on the backend.

Question: For the layout I want to use Size Classes and obviously Autolayout to achieve best UX on different devices and screen sizes and I am looking for best practices how to describe layout on the backend that can be dynamically and easily transformed into ViewController scenes with UI elements and Autolayout constraints and if possible Size Classes.

So far: it seems that storyboard files can only be included into the application bundle, so they cannot be dynamically added to the app. I can think of using the Autolayout visual format language for constraints, but I am open to other suggestions as well. I want to keep it native iOS app with full support for Adaptibility and want to avoid hybrid code (html/css) Thanks.

Upvotes: 1

Views: 145

Answers (2)

Johannes Fahrenkrug
Johannes Fahrenkrug

Reputation: 44760

I don't think using Storyboards/Autolayout/etc is the right backend approach. You should define your own data format for describing the layouts that you support in your app, for example a grid.

Then, in your app, you create a DynamicLayoutViewController (or something along those lines). Inside of that view controller, you consume your JSON data structure and then translate your supported layout information from the backend into a view structure in your app.

The huge advantage to this approach is twofold:

  1. You don't have to support everything that iOS's Autolayout system supports. You can work with a controlled subset of functionality. Plus, your data format doesn't have to change when Apple changes its Autolayout spec.

  2. Your data will work with other platforms besides just iOS.

Also, if you want to not just define the layout but even the interaction between views and view controllers in your backend data structure, you are looking at one sophisticated app! You might want to consider creating something like a WorkflowManager class that will consume and parse your JSON. It will then know which view controller to initially display and then it will handle each subsequent action because only it will know what to do next and how to react to actions and what to render next.

Keep in mind that the more flexible you make your JSON structure, the more complicated your application code will have to become.

Upvotes: 1

Avi Tsadok
Avi Tsadok

Reputation: 1843

Since you can do everything you do in IB in code, you can download a json from the server with all the information you need. I suggest taking html as a reference.

Let's say you create an element :

"type" : "UIView",
"backgroundColor" : "red",
"id" : "3123",
"subviews" : [ ... here you can defines more views under...]

And then you can add constraints:

"constraints" : [
"top" : {
         "toElement" : "parent",
         "constant" : "50"

} ]

When you parse it, you can easily build your UI.

Upvotes: 2

Related Questions