Replia imports layers from Adobe® Photoshop®/Sketch and exports Objective-C/Swift/Storyboard source code. This guide walks you through the connection between Photoshop and the basic operations of Replia: Import, Edit and Export data.
Replia sets property-appropriate values automatically, but you can edit property values on the Replia UI to export the source code you want.
In the Replia window, the tree on the left shows view structure. The canvas in the center shows you a preview. The inspector on the right appears when you select an object in the tree or preview. You can also edit properties in the inspector.
The ‘Type’ radio box is on top of the inspector. Type means a class of component which is exported in source code. You can select the type from View, Image View, Label and Custom View (limited by layer type in Photoshop).
|View||Exported as a UIView.|
|Image View||Exported as a UIImageView. The child views are merged.|
|Label||Exported as a UILabel.|
|Custom View||Exported as a custom class which extends a UIView. The child views are exported in the custom class. You should input ‘Class’ property as the class name.|
Replia evaluates the initial type with the following rules:
You can enter the name of an instance in the â€˜Instanceâ€™ text field. In this field, the placeholder shows the name which Replia infers from the layer name. You may then skip input.
You can also enter the instance name in the tree on the left.
The iPhone has several widths by devices. You can assign auto-layout attributes when the device width is larger than the layer width. This value will be exported as AutoresizingMasks.
The preview has a width switch on the top. You can check the resized layout when you select ‘w:150%’.
Tips: If layout previews do not change as you wish, you should check the parent view layout. When the selected view size is the same as the parent view, the size of the view will not change.
There are several other properties.
|Class||Class name. In a custom view, this property means file name.|
|Image||Prefix of image file name. Image view type only.|
|Property||Property name for the image. Image view type and child view of a custom view only.|
|Alignment||Alignment of the UILabel. Label type only.|
|Width||Width of the UILabel. Label type only.|
|Font||Font of the UILabel. When the font of the original layer is not supported by iOS, system font is selected as default value. Label type only.|
|Text Property||Property name for text of label. Label type and child view of a custom view only.|
Press the Gear button on the tool bar. The “Output Option” window will be shown. Here you can select your output format.
|Objective-C||Export as a view controller written in Objective-C. Export custom views as other files written in Objective-C.|
|Storyboard + Objective-C||Export as a Storyboard which contains a view controller. Export custom views as other files written in Objective-C.|
|Swift||Export as a view controller written in Swift. Export custom views as other files written in Swift.|
|Storyboard + Swift||Export as a Storyboard which contains a view controller. Export custom views as other files written in Swift.|
Press the Export button on the right side of the toolbar to export a project file for Xcode in the selected format. The project file can be executed on the debugger. Copy the necessary files to your project.
Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.