UITextView Placeholder Text in Swift (IBDesignable in IB)

This post is a brief tutorial of a UITextView with placeholder text, written in Swift. It is implemented as a subclass of UIView using a Xib, and supports IBDesignable and IBInspectable.

The 2 classes (.xib and .swift) can be dropped into any project and specified as the custom class of a UIView in your Storyboard or Xib, with the placeholder text configurable in Interface Builder.

Update 20 July 2017: I’ve updated the demo project in GitHub to be Swift 3.

This is one of many ways UITextView placeholder text can be accomplished, but I like that I can include this in my project and just specify the subclass of UIView and the desired text right in Interface Builder.

The sample project also illustrates using Auto Layout and a constraint to move the UITextView up when the keyboard opens. I covered that a number of months ago with this video tutorial. I’ll describe the code in this post.

The project is in GitHub if you want to run it quickly, and the two classes are under the PlaceholderView group.

The file PlaceholderUITextView.xib has the UITextView and UILabel for placeholder text, with constraints defined so that the placeholder is in the top left corner with a little padding. Nothing fancy there.

Here is the corresponding Swift code for the view.

You can see that there is required initialization code for loading the view from a Xib file, as well as outlets textView and labelPlaceholder. The class conforms to the UITextViewDelegate protocol, so textViewDidChange is implemented. This is where labelPlaceholder is either visible or hidden, based on whether textView has text.

The PlaceholderUITextView class is IBDesignable, with placeholderText IBInspectable. This results in the placeholder text being editable in Interface Builder.

To use the PlaceholderUITextView class, it is configured as the Custom Class >> Class of the main UIView in the storyboard of the sample project. Here are two screenshots that show the View Controller Scene in the storyboard, and the Custom Class in the Identity Inspector.

Screen Shot 2016-03-21 at 5.54.57 PM
Screen Shot 2016-03-21 at 5.55.09 PM

You’ll notice that there is a BottomView in the storyboard. That is there for moving the UITextView up when the keyboard opens. I’ll talk about that shortly.

Because of the IBInspectable property, this subclass of UIView can be used throughout a project, and each time it is used, specific placeholder text can be specified in Interface Builder. In the sample project, you can see it here, where I’ve specified the text to be “Enter your data here …“.

Screen Shot 2016-03-21 at 7.09.45 PM

At this point, setup for the placeholder text in a UITextView is complete, so that was easy. As I mentioned earlier, I’ve also factored in moving the UITextView, or in this case, the custom UIView, when the keyboard appears for editing. There are a few techniques involved, and they all involve the ViewController.

The first thing is that we need to register for events related to the keyboard hiding and showing, so this is the code.

We also need to add closing of the keyboard when editing of the UITextView has ended. This is accomplished with this code.

Finally, as I mentioned earlier, we need to handle moving the view that contains the UITextView when the keyboard opens. To accomplish that, the first thing needed is a constraint on the BottomView of the storyboard, which we default to a height of 0.

Screen Shot 2016-03-21 at 9.26.21 PM

 

In order to access the constraint, the usual Ctrl-Drag from the storyboard constraint to the ViewController is performed, so in code we have the IBOutlet for the constraint.

Now that the constraint is available in the ViewController, a little code is needed (as I illustrated in the video from my earlier tutorial), to automatically handle setting the constraint to 0 or the keyboardSize.height. Auto Layout handles moving the keyboard in response to the constraint being set. The code to handle setting the constraint is below.

Updated 8 Nov 2017UIKeyboardFrameBeginUserInfoKey stopped working in iOS 11, so this has been updated to use UIKeyboardFrameEndUserInfoKey instead, which returns the correct keyboard height.

With everything in place, running the app now and clicking on the UITextView displays the placeholder text, with the keyboard opened and the view moved up accordingly. Entering text hides the placeholder text. These actions are visible in the two screenshots below.

Simulator Screen Shot Mar 21, 2016, 9.44.14 PM
Simulator Screen Shot Mar 21, 2016, 9.44.36 PM

As I mentioned already, there are other ways to accomplish the same result, but this one is quite easy and reusable, and if you like to design in Interface Builder, it fulfills that requirement. The project is here in GitHub, now updated for iOS 11 and Swift 4.

Leave a Comment: