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
- To integrate RSFormView, first, install Cocoapods and add a Podfile in your project folder. Instructions can be found in the CocoaPods guides.
- To bring the latest RSFormView version add
pod RSFormViewto your Podfile, move to the project folder in the Terminal and run
- 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.
ViewController.swift to something more descriptive, like:
FormViewExampleViewController.swift and write
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
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:
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:
Now, let’s start coding. First, override
viewDidLoad, and call
super. Then call
configureViews, which is where we’ll do the actual layout:
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.
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
translateAutoresizingMaskIntoConstraints set to false for every UI component, because we’ll be writing the constraint in
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
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:
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
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
Next we update the submit button with this function:
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
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:
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.
Finally, we define actions for the
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
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:
And here what happens when you tap the submit button:
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!