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.

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:

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 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.

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.

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 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 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.

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 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.