Show Menu

Do you have a job opening?

Submit your 30 day Job Listing for FREE

In this quick tutorial I am going to show you a few tricks I have learned whilst using placeholders, more specifically easy ways to change the color. The first will be how to change the placeholder color programmatically in Swift, then how to change the placeholder color using an extension and finally another trick in how to change the placeholder color using User Defined Runtime Attributes.

What is a placeholder

Well, a placeholder is a character, word, or string of characters that may be used to take up space until such a time that the space is needed. For example, a programmer may know that she needs a certain number of values or variables, but doesn’t yet know what to input. She can use a placeholder as a temporary solution until a proper value or variable can be assigned.

You will no doubt have seen placeholders on the web or within iOS Applications that you use. Here is an example:

placeholder text example

Change placeholder color with Swift

If you want to create your placeholder in Swift programmatically. First you will need to Create a Single View Application.

Now, drag a UITextField from your object library onto your ViewController in the Main.Storyboard. Hook up your UITextField. You can call it whatever you like. I have called mine: textFieldWithPlaceholder.

You should now see:


@IBOutlet weak var textFieldWithPlaceholder: UITextField!

Now, in your ViewDidLoad() method (inside the ViewController.Swift) type:


var placeHolder = NSMutableAttributedString()
let Name  = "Placeholder Text" 
       
// Set the Font 
placeHolder = NSMutableAttributedString(string:Name, attributes: [NSFontAttributeName:UIFont(name: "Helvetica", size: 15.0)!])

// Set the color
placeHolder.addAttribute(NSForegroundColorAttributeName, value: UIColor.redColor(), range:NSRange(location:0,length:Name.characters.count))   

// Add attribute        
textFieldWithPlaceholder.attributedPlaceholder = placeHolder

Run your app. You should now see your placeholder with the specified font and color.

Use Swift Extension to change Placeholder Color

For this, remove all the code from your ViewDidLoad() method. Go to your Main.Storyboard and select the Text Field on your ViewController. Go to your attributes inspector and set the placeholder.

placeholder property attributes inspector

As you can see, I have typed in E-mail Address. Again you can put whatever text you want here.

Now, back in your ViewController.Swift file insert the following Swift code:


extension UITextField{
    @IBInspectable var placeHolderColor: UIColor? {
        get {
            return self.placeHolderColor
        }
        set {
            self.attributedPlaceholder = NSAttributedString(string:self.placeholder != nil ? self.placeholder! : "", attributes:[NSForegroundColorAttributeName: newValue!])
        }
    }
}

This must be out of the Class Declaration Scope. So your ViewController.Swift file should look like:


import Foundation

class ViewController: UIViewController {

    @IBOutlet weak var textFieldWithPlaceholder: UITextField!
    override func viewDidLoad() {
        // stuff
    }
}

extension UITextField{
    @IBInspectable var placeHolderColor: UIColor? {
        get {
            return self.placeHolderColor
        }
        set {
            self.attributedPlaceholder = NSAttributedString(string:self.placeholder != nil ? self.placeholder! : "", attributes:[NSForegroundColorAttributeName: newValue!])
        }
    }
}

Now go back to your Main.Storyboard and click one of the UITextFields on your ViewController. Then go back to the Attributes Inspector and voila, look at that nifty new option:

placeholder option attributes inspector swift

User Defined Runtime Attributes

Finally I am going to show you an easy solution. Select a UITextField on your ViewController and then go to the Identity Inspector scroll down to User Defined Runtime Attributes:

user defined runtime attributes placeholder color

Click the + button and use these details:

Key Path Type Value
_placeholderLabel.textColor Color Select a color

There you have it. A few quick and easy solutions to solve the question: How to change the placeholder color using Swift. I hope you found my tips useful. Comment in the section below and let me know if there is something missing or something you would like to add.

Happy coding.

having issues?

We have a Questions and Answer section where you can ask your iOS Development questions to thousands of iOS Developers.

Ask Question

FREE Download!

Get your FREE Swift 2 Cheat Sheet and quick reference guide PDF download when you sign up to SwiftMonthly


Sharing is caring

If you enjoyed this tutorial, please help us and others by sharing using one of the social media buttons below.


iOS-Blog Admin Team

Written by:

We're here to help.

Comments

comments