Creating a UITextField PlaceHolder In A Custom Class.

• Custom UITextField PlaceHolder with color in Custom class.

We will be creating our textField through our storyBoard. For programmatic code check my other post here. Completed code can be found at the bottom of this page.

StoryBoard:

First of all, you will want to make sure that you click on the storyBoard before clicking the Libary ( + ) button. This should be your result.

🚫 This is what you see if you don’t click the storyBoard before clicking the Libary ( + ) button. They both look the same but they’re not.

Now we are done with that, lets Enter “ TextField “ in the Search Bar to get a UITextField. Drag textField on to StoryBoard.

Now let’s create our custom UITextField class by right-clicking on any file from the side navigation bar and hit New File.

Select Cocoa Touch Class and click Next.

Change class name to your preferred name, but remember to start your class name with a capital letter. it’s a class thing. more on swift Classes here. Let’s also Change the SubClass to a UITextField meaning that this custom class will be inheriting from UITextField. learn more about Swift Inheritance here. Lastly, leave language to Swift and hit Next.

Select the desired location ( folder ) where you would like your custom class to be added to. Hit create.

Now we need to tell our textField to conform to the custom class we just created. 1. Click the textField 2. Click on the Identity Inspector that looks like a newspaper 3. change class to the CustomTextFieldClass.

Its time to connect our textField IBOutlet. We can do that by holding down the control button on our keyboard and click-drag the textField and drop it in the ViewController. You will see a blue line like the image below.

Enter the name of your textField connection. for this example, we will call it myTextField. Click connect to connect the textField to our code.

We almost there, at this point it’s safe to close our Storyboard and open the Custom TextFieldClass.swift next to our ViewController.swift like this.

👇🏿 Code is explained Below

RESULT

// Story Board Initialization
required init?(coder aDecorder: NSCoder) {
super.init(coder: aDecorder)
// Add custom code here
}

Since we are inheriting from UITextField we automatically have control over all of its methods and properties.

The above code is saying, thanks for all the methods and properties you have given me, but I would like to add my custom methods and properties and display them on this text field as soon as the app runs. That’s how your app knows that you are trying to add your custom code. Some examples of those methods and properties can be layer.background, layer.shadow etc. Easy right?.

Note: required init? is specifically for UIView objects that were created through the storyboard. For UIView objects that were created programmatically, the code below will do but, the explanation can be found here.

// Programmatic Initialization 
override init(frame: CGRect) {
super.init(frame: frame
// Add custom code here
}

We wrote our custom code in a separate function called firstTextFieldplaceHolder, and call in it the required init? initializer. Why? That’s because it’s a good practice. It helps with code readability and also conform to Object-Oriented-Programming(OOP) protocols 😁. We are using private next to the function because we don’t want the function to be accessible outside of this CustomTextFieldClass.swift class. The `placeholderString ` constant is being set, using NSAttributedString.

What is NSAttributedString and why are we even using it instead of swift known type String? “ NSAttributedString is a string that has associated attributes (such as visual style, hyperlinks, or accessibility data) for portions of its text “ 🧠🔥. And we are using it because we are working with an accessible data ( placeHolder ), and lastly, we set the attributedPlaceholder to the given text and color. Voilà

// Programmatic Initialization
override init(frame: CGRect) {
super.init(frame: frame)
// Add custom code here
// We don't need to call our fun here cause this for programmatic created UIView object
}
// Story Board Initialization
required init?(coder aDecorder: NSCoder) {
super.init(coder: aDecorder)
// Add custom code here 
firstTextFieldplaceHolder()
}
private func firstTextFieldplaceHolder()
     
let placeholderString = NSAttributedString(string: "User Name",  attributes: [NSAttributedString.Key.foregroundColor: UIColor.red])
self.attributedPlaceholder = placeholderString
}