Design2Code

本软件是一款辅助iOS应用开发的工具,可以根据设计稿生成相应的UI代码。

可以通过菜单栏打开或者直接拖动设计稿到图片区域开始识别,支持png,jpg,bmp等通用图片格式。

自动识别图片中的元素,例如文本,图片,按钮等。并根据UI元素的位置生成对应的代码及约束。

自动识别元素的属性,例如文本内容,字体大小,背景色,字体颜色等。

在根节点可以进行开发语言的选择:swift或者oc,且会记住您最后的选择。

在根节点也可以选择代码约束的风格,使用NSLayoutConstraint或者依据语言的不同选择Masonry或者SnapKit生成约束。

在最左侧的树形结构中可以在右键菜单里对选中的节点进行合并,删除,新增,重命名。或是改变UI类型,拖动改变UI层次,也可以通过对选中的节点回车进行重命名。

同样的操作也适用在图片区域,可以在图片上点击元素进行选择。

可以在树形结构中通过Command或者shift来多选,或者在图片区域进行鼠标拉框进行多选,之后可以批量修改选中元素的共通属性,例如:圆角,背景色等。

图片可以根据触控板捏合来进行放大缩小,双击恢复原始尺寸。也可以通过Command+鼠标中键滚动进行缩放。

每个节点都可以进行属性变更,可以更改UI的属性,比如颜色,大小等,颜色可以通过在吸管按钮在图片上进行取色,并实时反映在代码区。

在根节点可以选择导出UIImageView,UIButton的图片,如果对应的image有设置。

在代码区域可以进行代码选择,支持ctrl+c进行复制操作,可以通过Command进行多选。

最后可以保存生成swift或者.h和.m文件,并根据选择进行图片导出。

有问题的可以留言。

邮箱地址:img2code@gmail.com

This software is a tool to assist iOS application development, and can generate corresponding UI code based on the design draft.

You can open the design draft from the menu or drag it directly to the image area to start recognition, supporting common picture formats such as png, jpg, bmp, etc.

Automatically recognize elements in pictures, such as text, pictures, buttons, etc. The corresponding code and constraints are generated based on the location of the UI elements.

Automatically identifies attributes of elements such as text content, font size, background color, font color, and so on.

At the root, you can choose the development language: swift or oc, and remember your last choice.

You can also choose the style of code constraints at the root, using NSLayoutConstraint or selecting Masonry or SnapKit to generate constraints based on language.

In the leftmost tree structure, you can merge, delete, add, rename, or change the UI type from the right-click menu. Or drag to change the UI hierarchy, rename the selected node by returning.

The same applies to the image area, where you can click on an element to select it.

You can select multiple selections in a tree structure by Command or shift, or by dragging a mouse around a image area. After that, you can modify the common attributes of the selected elements in batches, such as corner-radius, background colors, and so on.

Images can be zoomed in and out by kneading the touch panel, double-clicking to restore the original size. You can also zoom by scrolling with the Command+middle mouse button.

Each node can make property changes, change the properties of the UI, such as color, size, etc. Color can be picked up on the picture by the straw button and reflected in the code area in real time.

At the root node, you can choose to export pictures of UIImageView, UIButton, if the corresponding image has settings.

Code selection is available in the code area, ctrl+c replication is supported, and multiple selections are available through Command.

Finally, you can save the build swift or. H and. M file, and export the picture according to the selection.

if you have any problem,

please email to : img2code@gmail.com