How to customise UILabel using SWIFT 4.0?

Requirements:

Operating System: OS X 10.9.4+

IDE: Xcode 9

Level: Beginner to intermediate.

We can use Storyboard and interface builder to change the look and feel of UILabel. However, sometime, we have no other way but do these customizations programmatically. One of the reasons to do so is to keep all the styles in one place. In other words, it’s something like css stylesheet that can render all pages or views. Whatever the reason is, let’s try it.

Open Xcode 9 and create a new project. A dialog box will appear for selecting template. Choose single view application and press next.

Screen Shot 2014-09-14 at 2.05.25 PM

In the next box, type Product name – “Custom Label”. In Organization Identifier box, type reverse of your domain name. Choose Swift as language and press next.

 

customLabel1

From next dialog box select the location where you want to save the project and press “Create” button.

Screen Shot 2014-09-14 at 2.11.39 PM

Now open Main.storyboard from Project Navigator (If you can’t see project navigator in the left side of the screen, press Commad+O). You will see a blank View Controller in the workspace window.

 

customLabel2

Drag and drop a Label element from Utilities panel (If you can’t see Utilities Panel, press Command+Option+0) to the View Controller of the workspace (See above figure – bottom right corner).

Press Command+N (or File > New > File) to add a new file to the project. From template chooser box select Swift file and press next.Screen Shot 2014-09-14 at 2.24.46 PM

Save the file as MyCustomLabel.

customLabel3

Open MyCustomLabel.swift file.

import UIKit so that you can subclass MyCustomLabel class from UILabel.

import UIKit

Write a new subclass of UILabel and name it “MyCustomLabel”

class MyCustomLabel: UILabel {

}

We’ve to override init(coder aDecoder: NSCoder!)  function.

init(coder aDecoder: NSCoder!) {

super.init(coder: aDecoder)

}

The colour of the text that we write inside the UILabel can be changed as follows:

self.textColor = UIColor.blue

Finally, our whole code will look like :

Now, you’ve to attach this custom class with your Label. Let’s do them in 3 steps.

Go to Storyboard and select the label.

From Utility panel select the Identity Inspector.

In the class box Type MyCustomLabel

customLabel4

To see what you have done, press Command+R (or Product > Run) to run the application on simulator

How to customise UITextField in SWIFT 4.0?

Requirements:

Operating System: OS X 10.9.4+

IDE: Xcode 9

Level: Beginner to intermediate.

In my previous article I showed you how to customise UIButton. Here I’ll discuss about changing the look and feel of Text Field (UITextField)

As usual Open Xcode and create a new project. A dialog box will appear for selecting template. Choose single view application and press next.

Screen Shot 2014-09-14 at 2.05.25 PM

In the next box, type Product name. I typed Custom TextField. I’ve also used reverse of my website’s domain name com.webindream as Organization Identifier. You must choose Swift as language and press next.

Custom TextField

From next dialog box select the location where you want to save the project and press “Create” button.

Screen Shot 2014-09-14 at 2.11.39 PM

Now open Main.storyboard from Project Navigator (If you can’t see project navigator in the left side of the screen, press Commad+O). You will see a blank View Controller in the workspace window.

TextField3

 

 

Now drag and drop a TextField element from Utilities panel (If you can’t see Utilities Panel, press Command+Option+0) to the View Controller of the workspace (See above figure – bottom right corner). One more thing, don’t be confused with UITextField and UITextView.

  • UITextField: UITextField object is a control that displays editable text and sends an action message to a target object when the user presses the return button.”
  • UITextView: “The UITextView class implements the behavior for a scrollable, multiline text region.”

(Source: StackOverflow.com)

Press Command+N (or File > New > File) to add a new file to the project. From template chooser box select Swift file and press next. Screen Shot 2014-09-14 at 2.24.46 PM

Type MyCustomTextField as file name and create the file.

TextField1

Open MyCustomTextField.swift file and get ready to edit.

import UIKit as UITextField is a child class of UIKit.

import UIKit

Write a new subclass of UITextField and name it “MyCustomTextField”

class MyCustomTextField: UITextField {

}

We’ve to override init(coder aDecoder: NSCoder!)  function.

init(coder aDecoder: NSCoder!) {

super.init(coder: aDecoder)

}

First of all we’ll make the corners of the TextField round.

To do so, write the following code inside init(coder aDecoder: NSCoder!) function.

self.layer.cornerRadius = 5.0;

Now change the border color and border width with help of following 2 lines:

self.layer.borderColor = UIColor.gray.cgColor

self.layer.borderWidth = 1.5

To change the background colour of the Text Field modify backgroundColor property of UITextField:

self.backgroundColor  = UIColor.blue

The colour of the text that we write inside the Textfield can be changed as follows:

self.textColor = UIColor.white

You may be curious to customize the colour of the cursor that blinks when the TextField is focused. Don’t worry, you can do this too:

self.tintColor = UIColor.white

Finally, our whole code will look like :

 

Now, you’ve to attach this custom class with your button. Let’s do them in 3 steps.

Go to Storyboard and select the button.

From Utility panel select the Identity Inspector.

In the class box Type MyCustomTextField

Nothing is changed? No problem, press Command+R (or Product > Run) to run the application on simulator.

Voila, you’re done.

How to customise UIButton in SWIFT 4.0?

Tech experts are expecting that, objective-C will become history within a few years. We all are moving towards SWIFT – new programming language – which is more powerful and smart. It’s easier to grasp the basics of SWIFT and develop simple programs. But what about customising design elements of OS X and iOS? Can we easily customise them? Do the process is similar to Objective-C? Or should we start from scratch?

To answer all these question, we’ll discuss here customising UIButtons, UITextFields, UITextViews etc with SWIFT. In this article I’ll show you how to customise UIButton. Let’s start.

Requirements:

Operating System: OS X 10.9.4+

IDE: Xcode 9

Level: Beginner to intermediate.

First thing first. Open Xcode and create a new project. A dialog box will appear for selecting template. Choose single view application and press next.

Screen Shot 2014-09-14 at 2.05.25 PM

In the next box, type Product name. You can type anything but here I’ll write Customize Button. I’ve also used reverse of my website’s domain name com.webindream as Organization Identifier. You must choose Swift as language and press next.

Screen Shot 2014-09-14 at 2.09.51 PM

From next dialog box select the location where you want to save the project and press “Create” button.

 

Screen Shot 2014-09-14 at 2.11.39 PM

Now open Main.storyboard from Project Navigator (If you can’t see project navigator in the left side of the screen, press Commad+0). You will see a blank View Controller in the workspace window.

 

Screen Shot 2014-09-14 at 2.20.12 PM

Now drag and drop a button element from Utilities panel (If you can’t see Utilities Panel, press Command+Option+0) to the View Controller of the workspace (See above figure – bottom right corner). Get ready to customise this button.

Press Command+N (or File > New > File) to add a new file to the project. From template chooser box select Swift file. If you can’t see the Swift file, take help of the screenshot provided above. Press next.

Screen Shot 2014-09-14 at 2.24.46 PM

Type MyCustomButton as file name and create the file.

Screen Shot 2014-09-14 at 2.27.27 PM

Open MyCustomButton from Project Navigator window – if it’s already not opened.

You will see the following code:

import Foundation

First import UIKit as UIButton is a child class of UIKit.

import UIKit

Now, we’ll create MyCustomButton which will be Sub Class of UIButton :

class MyCustomButton: UIButton {

 

}

We’ve to override init(coder aDecoder: NSCoder!)  method and write super.init(coder: aDecoder) at the beginning of the method.

init(coder aDecoder: NSCoder!) {

super.init(coder: aDecoder)

}

Now, let’s add radius to the button corner.  To do so, write the following code inside init(coder aDecoder: NSCoder!) function.

self.layer.cornerRadius = 5.0;

To change the border color and border width, you can use:

self.layer.borderColor = UIColor.red.cgColor

self.layer.borderWidth = 1.5

Here I’ve used red color you can use any other colour you like.

Now, lets change the background color of the button. That’s very easy:

self.backgroundColor  = UIColor.blue

However, to change the text color of the button you can’t use anything like: self.titleColor. Instead, use the following line:

self.tintColor = UIColor.white

Finally, our whole code will look like :

Now, you’ve to attach this custom class with your button. Let’s do them in 3 steps.

Go to Storyboard and select the button.

From Utility panel select the Identity Inspector.

In the class box Type MyCustomButton

Nothing is changed? No problem, press Command+R (or Product > Run) to run the application on simulator.

Voila, you’re done.

Swift - Button customisation