Follow

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…

UIControls_01

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

UIControls_02

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.

UIControls_03

Once the project is created, it will look like below

UIControls_04

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

UIControls_05

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

UIControls_06
UIControls_07

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

UIControls_08

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

UIControls_09

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

UIControls_10

Click on Create button.

UIControls_11

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

UIControls_12

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

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

UIControls_13

Run the project and check its output in the simulator.

UIControls_14

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.

UIControls_15

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.

Posted By: Md Aslam Ansari, Osmosee

Are you interested? follow us and get notified of new posts

Leave A Reply

8 + six =