Working with Custom Code

Qwikly makes it easy for you to add custom code to your iOS project. The Xcode projects that Qwikly generates are dependency-free and we try hard to make them as “vanilla” Swift as possible.

Folder Structure

When you build a Qwikly project, it will create an Xcode project in whatever output directory you have defined in Build Settings. After building, your output directory will look something like this:

output-folder-structure

The Swift source code that Qwikly generates lives in the app and gen folders. You should not modify any files in the gen folder, since these files are overwritten whenever you build the project from Qwikly. Instead, your custom code will live in the app folder.

Custom View Controller Code

The most common type of custom code you can add to your project is in the view controllers. To make this easy and flexible, Qwikly uses an inheritance-based approach to creating the view controllers used by your app. When you build your app, Qwikly performs the following steps:

  • Generate a base view controller for each scene in gen/ViewControllers, overwriting any existing view controlers in this folder
  • Generate a view controller in app/ViewControllers for each base view controller, but don’t overwrite any existing view controllers in this folder
  • Generate a storyboard that references the view controllers in app/ViewControllers

With this scheme, you can modify the view controllers in app/ViewControllers, adding custom code and accessing any outlets defined in the base view controller. When you rebuild Qwikly, it will regenerate the base class but won’t disturb the custom code you’ve added to app/ViewControllers.

Example Usage

Let’s look at a small example of how you would add custom code to a simple app. For this example, consider an app with three scenes:

  • A “Sign In” scene that allows the user to authenticate with an external integration
  • A “User List” scene that fetches a list of users from the integration and displays a list view.
  • A “User Detail” scene that displays information about one user

In our Sketch document, we have one artboard for each scene. After we’ve added our interactions and transitions in the Qwikly UI, it’s time to build our Xcode project.

After building, the app folder should look like this:

output-app-folder

The gen folder should look like this:

output-gen-folder

Note that for each view controller in app, there is a corresponding base view controller in gen. To add custom code, simply modify the contents of any of the view controllers in app.

For a more complete example of adding custom code, check out the calculator example app.