Rootstrap Blog

Build an app with RSFormView in Swift

Germán Stábile is an iOS developer on the Rootstrap team. He writes about the challenges faced in iOS development. You can follow Germán on LinkedIn.

Note: This blog helps you integrate RSFormView into your app. For more about the motivation and implementation of RSFormView see the previous article.

Create an Xcode project

In this tutorial, we implement a single-view iOS application with RSFormView, step-by-step. To get started, create a new Xcode project and select Single View Application. Choose a name and a destination for the project, in this case, RSFormViewExample.

Install CocoaPods and RSFormView

  1. To integrate RSFormView, first, install Cocoapods and add a Podfile in your project folder. Instructions can be found in the CocoaPods guides.
  2. To bring the latest RSFormView version add pod RSFormView to your Podfile, move to the project folder in the Terminal and run pod install/update.
  3. After RSFormView installs, open the workspace you’ll now see in your project folder.

Create your first view controller

Xcode creates a Main.storyboard by default, and a ViewController.swift class. Because we will integrate RSFormView programmatically, you can remove Main.storyboard and under Deployment Info in your target General tab, select “LaunchScreen” as the Main Interface. To integrate RSFormView in a storyboard-based application, see this README.

targetSettings.png

Now rename ViewController.swift to something more descriptive, like: FormViewExampleViewController.swift and write application(didFinishLaunchingWithOptions:) in AppDelegate.swift:

Annotation 2019-10-29 100608.jpg

In this code block, we set a UINavigationController with our initial view controller as the root. We hid the navigation bar and set it as our window‘s rootViewController.

If you run the app now it displays a white screen. So let’s add some content to the view controller.

Manage your view controller’s layout

To access RSFormView module, add import RSFormView at the top of the file.

Then add properties for the UI components:

Annotation 2019-10-29 100842.jpg

You may be wondering what are all these UI components for?

We are gonna be building a view controller with a description label on top. Under that, we’ll set a label with an UISwitch next to it, that enables or disables a fancy “dark mode”. Our FormView sits right under the label and UISwitch. The submit button will be at the bottom of the screen right under the form view.

Our view controller will look like this:

viewControllerDiagram.png

Configure Views

Now, let’s start coding. First, override viewDidLoad, and call super. Then call configureViews, which is where we’ll do the actual layout:

Annotation 2019-10-29 101026.jpg

This function configures every UIComponent in this view controller. To make it more readable, we break into separate functions. The naming should be self-explanatory here, and each configure function should be pretty straightforward except for configureConstraints were all the autolayout magic happens.

Annotation 2019-10-29 101252.jpg

Except for the formView, which we leave for the end, the functions in the preceding code block, set these initial states for each UI component:

• Titles and background colors for labels and buttons.

• Actions for the submit button and the modeSwitch.

• translateAutoresizingMaskIntoConstraints set to false for every UI component, because we’ll be writing the constraint in configureConstraints.

Finally, we add the views to the view controller’s view. You see compiler errors when setting submitButton and modeSwitch targets because the referenced selectors aren’t defined yet, ignore those for now.

Now let’s configure formView:

Annotation 2019-10-29 101418.jpg

You see two compiler errors in this function because your view controller doesn’t comply with FormViewModel delegate, and formHelper isn’t defined yet. We’ll do that in the next section.

Now let’s tackle configureConstraints. It sets all the layout rules for every view in our view controller:

Annotation 2019-10-29 102320.jpg

To create the design we want, we set constraints to attach our views to each other.

Populate the form view

Form view delegate

First, we conform to the FormViewModel delegate. To keep concerns separated we implement delegates in an extension of the implementing class. Add this code outside of the scope of the FormViewExampleViewController:

Annotation 2019-10-29 102427.jpg

This delegate method is called each time a user enters or selects a new value. It let us know if all the fields are complete and the values are valid with the allFieldsValid parameter.

Submit button

Next we update the submit button with this function:

Annotation 2019-10-29 102508.jpg

Form view model

When we set an RSFormView viewModel, we are telling the RSFormView that this object will populate it. This object needs to conform to FormViewModel protocol in order to do so, which requires it to hold an items array of FormItems.

Now let’s create a file to implement the FormViewModel protocol. Using ExampleFormHelper as a name. For simplicity I’m only adding a few items in this code block:

Annotation 2019-10-29 102623.jpg

For a look at the whole implementation, you can download the example project attached at the end of this article.
Since we are setting two FormFields in the first item it will be rendered as a cell with two text fields. For the header, we are only setting a NSAttributedString so it will be rendered as a single label cell with the appearance we set in the attributes.

Now let’s go back to our FormExampleViewController and define a var to hold our form helper.

Annotation 2019-10-29 102714.jpg

Finally, we define actions for the submitButton and modeSwitch:

Annotation 2019-10-29 102832.jpg

switchValueChanged changes our views aspect based on the selected value. If set to on, we set the “dark mode”, otherwise we set the default mode. Here we are using the two out of the box configurations for the formView the DarkModeConfigurator and the default FormConfigurator

In the submit button action, we iterate through all the fields in the formView and display them in an alert along with the field names.

Here is the result when switching between modes:

switchMode.gif

And here what happens when you tap the submit button:

submitTapped.gif

Learn more

For the full code base, clone the example app repo here

For more about the motivation and implementation of RSFormView see the previous article [Link to previous article].

Thanks for reading!

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.