Reusable class for UI controls on iOS

Introduction

Most of the UI controls are usually provided by Apple while developing an app. Depending up on the requirements, it is common to change the default behavior and design of a UI control to create an app with uniform look and feel.

It is not only tedious but a bad practice to design/alter each control separately. Moreover, the process of altering each control not only time-consuming and cost-intensive but often prone to human error which could cause all sorts of compatibility problems with any other interdependent apps or systems.

Suggested option is to create a separate class which will override/extend the default settings. And this class can be used for changing the properties of similar controls across the app.

Prerequisites

Following are the prerequisites that a developer needs to build a reusable class:

• Apple Mac.
• Xcode.
• Simulator

Let’s get started

Create a new project in XCode -> File -> New -> Project…

Select “Single View Application” as a template for your project and click on Next.

Type the name of the project. For this demo, let’s name it as “ReusableUIControlDemo” and then select the language as Swift and click on Next button.

Once the project is created, it will look like below

Add two buttons and name them as “Left” and “Right”. You can add as many as you want.

Create a new folder called “Helper”.
Right click on the project folder and select “New Group”.

After creating the Helper folder, add a class file to it. To do this right click on the Helper folder and select “New File…”.

Click on iOS tab and select “Cocoa Touch Class” under source section and then click on Next button.

Enter the name of the class file. We named it as “CustomButtonUI”.

Click on Create button.

Once the file is created, it will look like the image below :

Add the below code in the file “CustomButtonUI.swift”.

Objective-C

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

override func draw(_ rect: CGRect) {      // Drawing code      super.draw(rect)      self.layer.backgroundColor = UIColor.blue.cgColor      self.layer.borderColor = UIColor.gray.cgColor      self.layer.borderWidth = 2.0      self.layer.cornerRadius = 10.0      self.clipsToBounds = true      self.setTitleColor(UIColor.white, for: UIControlState.normal)      self.showsTouchWhenHighlighted = true   } override var isHighlighted: Bool {      didSet {               if (isHighlighted) {                 self.backgroundColor = UIColor.gray               }               else {                 self.backgroundColor = UIColor.clear               }            } }

Now click on the button you want to apply the styles to. Click on the class dropdown and then select CustomButtonUI class.

Run the project and check its output in the simulator.

Notice that the Left button’s appearance is drastically different from its counterpart: Right.
To apply the same style on the right button,  click on “Right” and in storyboard and select the class “CustomButtonUI” from drop-down.
Run the project in Simulator and the resulting output will have two buttons that are exactly similar.

Conclusion

With continuous evolving of technologies, the mobile app developers need to maintain a quick pace to keep up with the user requirements to create apps which will work on multiple devices and operating systems.

Developing an app needs proper planning in its initial stage and it is a good practice to have  generic classes. This helps in achieving not only the code re-usage but also saves development time as well.  Since the UI of an app plays a key role in UX, it is always better to have reusable classes to alter the UI appearance quickly, which is a simple yet powerful way and can be done with in a fraction of time and cost when compared to changing the whole source code or structure.

This technique can also be applied to other controls such as labels, switch, sliders, views and so on.