In LayoutCode, by using combination of available view components and tools, a complex user interface can be visually created. The UI can then be exported to iOS Swift code which saves developer hours of time instead of writing code manually.
Basic View Components
Each view components have their own attributes which can be combined to create a fully functional UI in LayoutCode.
Basic View is a view which can be used as container to other views. Basic view supports color and gradient which also can be used as background view.
Text Label can be used to display text. Text label supports intrinsic content size, which size will be updated dynamically when layout constraints added.
Image view can be used to display image.
A button can be a simple text or an image. In LayoutCode, no action can be added to a button, a developer can assign action to the button in the generated code.
Shape view can be used to create a view which contains vector path. You can choose from common shape such as rectangle, rounded rectangle, and oval. Additionally, vector and pencil tool can be used to create a shape view. Afterwards, shape view can be modified using vector tool. Shape view also supports gradient. You can also import SVG from other applications to be converted to shape view.
Linear gradient, radial gradient or conic gradient are supported. A gradient can be set for basic view, shape view or shape view and can be edited easily using gradient tool.
Custom View is a view which can be used to encapsulate the view data. By using custom view, you can add many views as subviews to the custom view and hide them while not editing. You can set the view attributes as private or public, and use its subview attributes as derived attributes. A derived attribute is attribute derived from subviews but displayed as the custom view attributes at inspector. Custom view is generated as as separate file in generated code, a developer can reuse them like a custom view in mobile app development!
Collection View is a view which let you create group of views arranged by custom layouts. By using collection view, it is possible to create a screen with functional UI only by its own. A collection view can be used to create views with table layout, or it can also be used to create views that have combination of vertical and horizontal scrolling. These are features for collection view that makes it very powerful:
- A collection view can have multiple section, and each section may have its own cell view and custom layout section.
- Each section may have different custom layout section.
- Multiple headers or footers are supported for each layout section.
- A layout section may have nested layout items, which enables creation of custom layout configuration.
- Each of this layout item attributes are configurable, which can be used to fine tune the layout.
- Each section also may have different cell view.
- Cell views supports layout constraint, which enable the view components to resize or position correctly when have different view sizes in the collection view.
- Different data for each individual cell is supported using derived attributes. These data is also retained in generated code.
Editing Collection View Example
Instant Collection View Preview
See final design of your collection view. You can scroll horizontally or vertically depending on the layout. The preview is instantly update when any data changed.
Datasource is where you set all data to be displayed on the collection view. Update any data such as section count, choose cell view and layout for the section, then the collection view is instantly updated.
Add Multiple cell views and layouts
Both cell views and layouts are nicely organized. You can add cell views or layouts, then set them up datasource inspector, this also let you test between different cell or layout easily.
Easy Layout Editing
Create any simple or complex layout easily using layout edge menu. Using the menu, you can add normal layout item, header or footer, or supplementary view to a layout item.
Layout constraints is an important feature in LayoutCode. It let users to create a fully responsive user interface. Layout constraint is a system where it dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views. By defining layout constraints for all the views, you can create a responsive view with complex behaviour of sizing or position the views. Usage of custom view and collection view are possible with the power of layout constraints that are used to define their views.
Constraint Connector Menu
Layout constraint can be added using constraint connecter menu. Resizing a parent view or artboard will resize its subviews based on the defined layout constraints.
Constraint Issues & Operation Menu
You may run into some issues when creating constraints. Constraint operation menu can be used to apply constraint related operation such as clear all constraint or reset to suggested constraint. Constraint issues menu show constraint issues count at the bottom bar. The menu can be used to add specific constraint if a constraint is missing from the view. Both of these menus help you to improve creating and managing layout constraints.
Code generator automatically generates iOS Swift code for your LayoutCode project. Multiple files are generated depending on data of your project. The code is optimized and easy to be modified.
Minimal integration is needed for the generated files. For example after importing the generated files into Xcode, a developer only need to set the view controller at the storyboard in Xcode for the app to run successfully with the generated code. Of course the developer is still responsible for writing code for logic, handling dynamic data etc.