As you can see, the left part is the UITextView with the XML text that I’ve color-coded. And the right part is a display view that updates the UI for each keystroke.
I have put this interesting app on my Github:
In the Readme file, I have explained the core things about it. After that, you can read below to know the detail.
Serializable UI
- Format: We need a serializable way to describe UI. Actually, both iPhone(IB) and Android choose XML as the layout file. XML is good at describing hierarchy with meaning tags and attributes.
- Layout: Compared with Autolayout, Flex, short for flexible box, is much easier to describe without having to specify the relationship between views. we just need to place subviews into a container ( which is configured with different values, such as flex-direction, align-items, and so on). Actually, it’s a popular layout approach in web development.
Facebook’s YogaKit
For Flex Layout, there’s an out-of-the-box framework produced by Facebook called YogaKit. It’s a cross-platform layout framework written in C++. Here’s the official playground website: https://yogalayout.com you can try it on your own.
XML Tag
All of the XML tags are the class name of the UIView and its subclasses, so not only the built-in Views in the UIKit, or others like AVPlayerView, and WKWebView, you can also use your own View as the tag.
XML Attribute (View’s Property)
To follow the XML convention, we use the dash-separated attribute name, we need to convert it into a camel case before use, such as flex-direction to flexDirection . All of the attribute values are strings, so we need a way to transform them into the correct type. Here, I offer a PropertyHandler that you can register your own mapper to convert the attribute value and also it has many built-in mappers.
XML Attribute (Action)
Not only properties are supported, but you can also define your own actions. Just use the ActionHandler to register your own action handler, there’re two built-in actions: link and UIImageView.url . The link action will add a tap gesture and use the Router to process the link value. In this project, we have offered a simple router to implement it, actually, you can change it to another one. the UIImageView.url is designed to make UIImageView able to load images from a remote URL. It’s worth noting that when you are customizing your own action handler, you can access the view instance and all attributes for the view, that’s really handy. You can add as many attribute names as you want since all of the attribute names not identified as property names will be checked if they’re actions.
Limitation of Action
Since the action is predefined. so we dynamically generate action implementation. Therefore, if you are using it as a solution for loading UI from the remote, be sure that all of the action inside the XML is defined in the app.
RoadMap
To make it more useful, I think it’ll be getting much handier if it has the support of data binding and style binding like CSS.
Conclusion
I hope you can try this app before reading, delete the default content inside the edit view and write your own XML to see how it generates interactive UI in real time. I hope you can enjoy it and find it helpful for you. Don’t forget to click the following button to stay up to date with me.
