Tag: customize textfield

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.

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.

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

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.

 

 

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. 

Type MyCustomTextField as file name and create the file.

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.