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.


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, lets 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 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’.

override func draw(_ rect: CGRect) {
     // Drawing code
     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 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.



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