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

A complete view can be created using a combination of different view components. Each view type is unique and can be modified by changing their attributes. For shape view, multiple common shapes or path drawing by using vector or pencil are available. Furthermore by using layout constraints, these view’s position and size can be set to be responsive for different sizes. The view components are based on iOS views which are:

  • (Button (UIButton
  • (Shape View (CAShapeLayer
  • (Separator (UIView
  • Basic View (UIView)
  • Text Label (UILabel)
  • Image View (UIImageView)

Custom View

Editing a Custom View, all custom views children and all attributes including private attributes are shown.

Using a Custom View, only the custom view, its public attributes and user variables are shown.

A custom view is a reusable view that can be used on a different places or screen. A custom view also can have user variables, which are attributes that are derived from a custom view’s children. This is similar as creating a custom view in iOS development.

For example, you may want to create a view a `ProfileView` that contain a person’s picture, name and email address. The `ProfileView` also may contain `name`, `email` and `profile image` public attributes which are derived from the custom view children’s attributes. The `ProfileView` can be reused on a different screen, and use a different `name`, `email` and `profile image` for each views.

By using a custom view, you can also hide unnecessary layout constraints or unimportant attributes which made the view easier to use. Code Generator also generates a separate file for the custom view, same as in iOS development.

Collection View

Examples of screens created using Collection View

Examples of screens created using Collection View

Collection View is based on UICollectionView for iOS. Collection View is a view which let you create group of views arranged by custom layouts. A Collection View may have multiple sections with different layouts, different cell view design, different header or footer, and different background. Collection View is made of three main components namely cell view, section layout and datasource.

Collection View Preview

Collection View preview is essentially the collection view itself. When any data changes either in a cell view, section layout or datasource inspector, the preview is updated to the latest state automatically. You can also interact with the preview by scrolling or resizing the preview’s artboard.

Datasource Inspector

Datasource is used to set up data for Collection View which you can specify section count, cell count, configure layout and cell view for each section. If you add a user variable from a cell view, you can set data for each cell individually. For example, you can set different titles for each cell in the same section.

Cell View

Cell View provides the visual representation for each cell item, header or footer, and background view for each section in the Collection View. You can add user variable from any views in the cell view, so each cell can be individually configured by using Datasource Inspector. Additionally, by implementing layout constraints, the cells are displayed correctly even if you specify different cell sizes using section layout.  

Section Layout

Section layout defines the visual arrangement of the cell views in sections in the collection view. You can specify whether the layout is horizontal or vertical scroll, how many cell items per row, height or width of the cell items and other configurations. The header or footer layout are also configured here.

Collection View Preset

Examples of screens created using Collection View

Collection View Preset Window

Collection View is powerful, similar to UICollectionView in iOS development. However it may be confusing to use for new users. By using Collection View preset, you can get started with Collection View quickly. The presets contain various presets and section presets which you can add to the project directly. Additionally, each preset has its own unique sets of attributes, which are derived from the cell views and section layouts of the collection view.

Layout Constraint

Layout constraints let users create a fully responsive user interface. By default, a view needs to have horizontal, vertical, width and height constraints for complete constraints. By placing complete constraints on views, the system automatically calculates the size and the position of those views depending on the constraints used.

Constraint Connector Menu

Layout constraint can be added using the constraint connector 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 operations such as clear all constraints or reset to suggested constraints. Constraint issues menu show constraint issues count at the bottom bar. The menu can be used to add specific constraints if a constraint is missing from the view. Both of these menus help you to improve creating and managing layout constraints.

Code Generator

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 modify. Minimal integration is needed to use the generated files.

iOS Swift

Realtime Code Generation

Organized Files

Clean Optimized Code