26 Mar 2018

Set placeholder to UITextView in swift4

Set placeholder to UITextView in swift4

Introduction to tutorial - set placeholder to UITextView: 

Placeholder is a property associated with input UI components that works as a hint to the user in mobile app development. UITextField has placeholder property but there is no property for setting placeholder to UITextView in swift. So for adding placeholder to UITextView , we need to write some code as we don't have pre-existing inbuilt placeholder property provided for UItextView in the iOS SDK for swift language. In this tutorial we will learn how to set placeholder property to UITextView or you can say setting placeholder to UITextView in swift language.

Follow the below steps to learn how to set placeholder to UITextView in swift4, swift3 or swift language.

Step 1: Create a single view application project and name it "UITextViewPlaceholder". Open "Main.storyboard" and drag UITextView to UIView of viewcontroller. 


Set placeholder to UITextView in swift4

Step 2: Add constraint to UITextView as shown in below figure

Set placeholder to UITextView in swift4


Step 3: Open "ViewController.siwft" and create IBOutlet for UITextView, added in step 1.

 
 
 

 
 


Step 4: Attach IBOutlet to UITextView in "Main.Storyboard".

Step 5: In "ViewController.siwft", inside 'viewDidLoad' function set text that will act as placeholder to UITextVie. We will set its textcolor and font so that it looks like a placeholder. Also we will set UITextView delegate.


Step 6: If you run the app at this point, you will see UITextView displaying placeholder text.

Set placeholder to UITextView in swift4


If you type now, you won't see placeholder stays there and text is getting appended to it. In order to remove placeholder as soon as use starts typing we need to take advantage of UITextView delegates methods.

Step 7: Implement below code, here we are using UITextView delegate methods.


textViewDidBeginEditing: In this delegate method, we detected if our UITextView begins editing and if the text matches to our placeholder text then set it's text to  empty string. Also we change textcolor and font so that user feels that he is writing and its not the placeholder which grows.

shouldChangeTextIn: This delegate method is used so that we can dismiss keyboard. As soon as user hits Done button of keyboard we detected new line as UITextView append new line (\n) when user presses done or return key of keyboard (default implementation by iOS).

textViewDidEndEditing: In this delegate method, we do exactly opposite of what we done in first delegate method (textViewDidBeginEditing). Here, we detected if UITextView text is empty or blank then we set placeholder text, font, textcolor to it.

Run your app now and you will see placeholder for UITextView is working perfectly. Below are the screen shots of the output

Set placeholder to UITextView in swift4

Set placeholder to UITextView in swift4

Where to go from here:

In this tutorial we learned, how to set placeholder to UITextView in swift. Though there are so many libraries out there to handle this stuff of UITextView placeholder, this the most simplest way of setting placeholder to UITextView. You can grab the source code for this tutorial from UITextView Placeholder swift source code





No comments:

Post a Comment