Custom Components using View Code (iOS)

Reusing code is part of a developer’s experience so that you can reuse work that has already been done, in this article we will focus on talking about reusing visual components.

In iOS development using UIKit there are 2 strategies for this reuse, the first is the use of XIBs, which consists of assembling a screen using a construction visual system.

The advantage of this strategy is that you can see your changes in real time as you change parts of this component. The disadvantage is the complexity it generates in code review, since the files generated by this strategy are XMLs that are complicated to read and see your changes.

Below is an article on how to build components using a visual method.

Building a Custom Component with XIB (iOS)

The second strategy is the use of View Code, which basically consists of building the screen components using only code. Making unable to observe changes in real time, but it makes code review much easier.

To extract the best of these strategies, SwiftUI was created because with it, you build the component using only code and in parallel XCode generates it graphically, being able to follow its construction in real time.

In this article, we will build this component using View Code in an older framework, UIKit, as this is still the most used in the iOS market.

How to Build

As said before, we will build a custom component, with two features, the first is a UIImageView that can have its image changed, and the second will be a UILabel that can have its text changed.

Starting Project

1. To create a project it is easy, first click on create a new Xcode project.
2. Select the App option in the project temples tab.
3. Add a name to the project and select Storyboard in the interface option.
4. Finally, select the destination folder to your project.

Creating Project

Keeping project organization

To make the project more organized and to make it easier to navigate through its files, we will create a group to save the file of the new component that will be built.

1. Right-click on the project folder.
2. Select new group.
3. Choose the group name.

Creating a group

Creating Files

We will create the component file, since we will build it using View Code, we just need a swift file to create the view.

1. Right-click the folder created earlier and select new file.
2. With the templates tab open, the Swift File can be selected.
3. Decide your view name.
4. Create file.

Creating file

Coding the File

As said before, our component will have a UILabel and a UIImageView. Then we will start the file by creating and defining the main item settings.

UILabel

1. On line 5 we initialize the label.
2. In line 6 we define the default text.
3. On line 7 we define that the text will be in bold and with a font of 36.
4. On line 8 we define that the font size can be reduced if the View is too small for a font of 36.
5. On line 9 we center the text.
6. On line 10 we defined that this component will use constraints instead of autolayout.
7. On line 11 we return the created component.

UIImageView

1. On line 15 we initialize the ImageView.
2. On line 16 we set the default image to be a pencil.
3. On line 17 we define that the image must maintain its proportion.
4. On line 18 we defined that this component will use constraints instead of autolayout.
5. In line 19 we return the created component.

Constructors

Between lines 22–25 and 27–30 we have two constructors, the first one refers to when the component is initialized as a subcomponent of a Storyboard or another XIB and the second constructor refers to when the component is initialized via code. In both constructors, is call the buildLayout() method, this method serves to finalize the configuration of the items built previously.

BuildLayout

Now we’ll finish configuring the components of this view, first let’s place them as a subview of the component, so they can be loaded on the screen.

Then we’ll change the components’ background to make it easier to see how they were distributed within the View.

With the previous settings in place, we can define the constraints of the items we create. The best whey to define the positioning of the items on the screen is starting with the highest item and going down to the lowest. As the titleLabel will be on top, let’s start with it.

Between lines 40 to 42 we define that it will be at a distance of 10 points from the safe area (internal edges of the View), then we center it on line 43, and finally, we define that the height maximum title is 40.

Now configuring the imageView’s positions, we define on lines 48 and 51 that it will be at a distance of 10 points from the edges, in which case its top will be at this distance from the title, and finally we center it in the view. This setting makes the image always fill the empty space of this component.

Finally, we have a function to change the values ​​of the component’s internal items, changing the title text and the image to be displayed.

Using the Component

There are two ways to initialize the created component, the first is via Storyboard/Xib and the second is via code.

Storyboard/Xib

1. Select Storyboard/Xib.
2. Click the + and select a UIView.
3. Selecting the added view and open the attributes inspector tab.
4. In class option, select the name of the created component.
5. Change the view’s background color to make it easier to see.
6. Run the project.

Opening the custom view using Storyboard.

Via Code

First we initialize the view as the empty frame, because we will use constraints, then disable the autolayout to enable the constraints and finally we define a background color.

Finally, we save the screen size information on line 11, define this view as a subview of the controller’s main view and then create its constraints.

App with the new component

Updating Values

Now that the component is being loaded correctly, we can edit the values ​​using the configureComponentData method, but before that, we have to finish configuring our storyboard/Xib so that we can access the component created within them.

1. Select the assistant, which opens the view code next to the XIB.
2. Holding ctrl select the customView and drag it to the code that appears on the right.
3. Then choose a name for this IBOutlet.

Now it is possible to edit the values ​​of the two views created, for that, we will call the method that we created in lines 23 and 24, passing the new information to this component.

App with changed values

Conclusion

With this, you can build custom views and change their values, avoiding as much as possible having to be rebuilt from 0 of these screens. You can download this project by clicking on this link.

If you want to know how to make such a component using xib, read the article below.

Building a Custom Component with XIB (iOS)