UIKit8 min read

Mastering UITextView: Advanced Text Editing in iOS Apps

UITextView is a powerful UIKit component for displaying and editing multi-line text with scrolling capabilities. Beyond simple text entry, it offers extensive customization for rich text, data detection, and intricate user interactions. This article delves into its advanced features, helping you create sophisticated text experiences in your iOS apps.

Introduction to UITextView: Beyond the Basics

UITextView is a fundamental UIKit class designed for displaying and editing blocks of text that can span multiple lines. Unlike UILabel, which is static, or UITextField, which is typically for single-line input, UITextView provides a scrollable view for extensive content. It's a key component for applications requiring rich text editing, notes, chat interfaces, or any scenario where users interact with large amounts of text.

While dragging a UITextView from the Object Library in Xcode and setting its basic properties like text and font is straightforward, its true power lies in its advanced configurations and delegate methods. You can customize its appearance, enable data detection, manage user input, and even integrate rich text formatting using NSAttributedString.

Core Capabilities:

Multi-line Text: Easily handles text that wraps and scrolls.
Editable or Read-Only: Control whether the user can modify the text.
Rich Text Support: Display styled text using NSAttributedString.
Data Detection: Automatically highlight phone numbers, URLs, addresses, and more.
Scrollability: Inherits scrolling behavior from UIScrollView, allowing content to extend beyond its bounds.
Delegate Methods: Fine-grained control over editing events, selections, and content changes.

Let's start by looking at a basic setup and then dive into more advanced functionalities.

swift

import UIKit

class BasicTextViewViewController: UIViewController {

    let textView = UITextView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        setupTextView()
    }

    func setupTextView() {
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.text = "This is a basic example of UITextView. You can type and scroll here! It supports multiple lines of text and is editable by default."
        textView.font = UIFont.systemFont(ofSize: 17)
        textView.textColor = .label
        textView.backgroundColor = .systemGray6
        textView.layer.cornerRadius = 8
        textView.layer.borderColor = UIColor.systemGray3.cgColor
        textView.layer.borderWidth = 1
        textView.isEditable = true // Default is true
        textView.isSelectable = true // Default is true
        textView.textContainerInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

        view.addSubview(textView)

        NSLayoutConstraint.activate([
            textView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            textView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            textView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            textView.heightAnchor.constraint(equalToConstant: 200)
        ])
    }
}

Handling User Input and Delegates

To effectively interact with and manage UITextView, you'll primarily use its delegate. The UITextViewDelegate protocol provides a suite of methods that notify your app about changes in the text, editing status, and user interactions. This allows you to implement custom validation, character limits, or dynamic UI updates.

Key `UITextViewDelegate` Methods:

textViewShouldBeginEditing(_:): Asks the delegate if editing should begin in the specified text view.
textViewDidBeginEditing(_:): Tells the delegate that editing an object has begun.
textViewShouldEndEditing(_:): Asks the delegate if editing should stop in the specified text view.
textViewDidEndEditing(_:): Tells the delegate that editing of the specified text view has ended.
textView(_:shouldChangeTextIn:replacementText:): Asks the delegate if the specified text should be replaced in the text view. This is crucial for implementing real-time input validation, character limits, or filtering inappropriate words.
textViewDidChange(_:): Tells the delegate that the text in the specified text view has changed. Ideal for updating character counts or enabling/disabling UI elements based on text content.
textViewDidChangeSelection(_:): Tells the delegate that the text selection has changed.

To become a delegate, your class must conform to UITextViewDelegate and you must set the textView.delegate property. Let's see how to implement a character limit and respond to text changes.

swift

import UIKit

class TextViewDelegateViewController: UIViewController, UITextViewDelegate {

    let textView = UITextView()
    let charCountLabel = UILabel()
    let maxCharacters = 100

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        setupTextView()
        setupCharCountLabel()
    }

    func setupTextView() {
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.delegate = self // Set the delegate
        textView.text = "Start typing here..."
        textView.font = UIFont.systemFont(ofSize: 17)
        textView.textColor = .systemGray
        textView.backgroundColor = .systemGray6
        textView.layer.cornerRadius = 8
        textView.layer.borderColor = UIColor.systemGray3.cgColor
        textView.layer.borderWidth = 1
        textView.textContainerInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        textView.returnKeyType = .done // Change return key type

        view.addSubview(textView)

        NSLayoutConstraint.activate([
            textView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            textView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            textView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            textView.heightAnchor.constraint(equalToConstant: 200)
        ])
    }

    func setupCharCountLabel() {
        charCountLabel.translatesAutoresizingMaskIntoConstraints = false
        charCountLabel.font = UIFont.systemFont(ofSize: 12)
        charCountLabel.textColor = .secondaryLabel
        charCountLabel.textAlignment = .right
        updateCharCountLabel(characterCount: textView.text.count)

        view.addSubview(charCountLabel)

        NSLayoutConstraint.activate([
            charCountLabel.topAnchor.constraint(equalTo: textView.bottomAnchor, constant: 5),
            charCountLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }

    func updateCharCountLabel(characterCount: Int) {
        charCountLabel.text = "\(characterCount)/\(maxCharacters) characters"
        charCountLabel.textColor = (characterCount > maxCharacters) ? .systemRed : .secondaryLabel
    }

    // MARK: - UITextViewDelegate Methods

    func textViewDidBeginEditing(_ textView: UITextView) {
        if textView.textColor == .systemGray {
            textView.text = nil
            textView.textColor = .label
        }
    }

    func textViewDidEndEditing(_ textView: UITextView) {
        if textView.text.isEmpty {
            textView.text = "Start typing here..."
            textView.textColor = .systemGray
        }
    }
    
    func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
        // Handle 'Done' key press to dismiss keyboard
        if text == "\n" {
            textView.resignFirstResponder()
            return false
        }

        // Implement character limit
        let currentText = textView.text as NSString
        let updatedText = currentText.replacingCharacters(in: range, with: text)
        return updatedText.count <= maxCharacters
    }

    func textViewDidChange(_ textView: UITextView) {
        updateCharCountLabel(characterCount: textView.text.count)
    }
}

Rich Text and Data Detection

One of UITextView's most powerful features is its support for NSAttributedString for rich text formatting. This allows you to apply different fonts, colors, styles (bold, italic), and even embed attachments within the text. You can also configure UITextView to automatically detect specific types of data, like phone numbers, links, and addresses, making them tappable.

`NSAttributedString` for Styling:

To use NSAttributedString, you typically create an instance and apply attributes to specific ranges of text. Common attributes include NSAttributedString.Key.font, NSAttributedString.Key.foregroundColor, NSAttributedString.Key.backgroundColor, and more. This gives you fine-grained control over the appearance of your text.

Data Detectors:

UITextView offers built-in data detection capabilities through the dataDetectorTypes property. This property accepts an UIDataDetectorTypes option set, allowing you to specify what kind of information UITextView should automatically recognize and make interactive. Available types include:

.phoneNumber
.link
.address
.calendarEvent
.flightNumber (Available from iOS 17.0)
.trackingNumber (Available from iOS 17.0)
.spotlightSuggestion (Available from iOS 17.0)
.all

When data detectors are enabled, the detected elements are typically styled as links and can be tapped by the user to perform the associated action (e.g., open a URL in Safari, call a phone number). This significantly enhances user experience for text-heavy content.

Compatibility Note: UIDataDetectorTypes.flightNumber, UIDataDetectorTypes.trackingNumber, and UIDataDetectorTypes.spotlightSuggestion are available to iOS 17.0 and later.

swift

import UIKit

class RichTextAndDataDetectionViewController: UIViewController {

    let textView = UITextView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        setupTextView()
    }

    func setupTextView() {
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.isEditable = false // Make it read-only for display
        textView.isSelectable = true
        textView.backgroundColor = .systemGray6
        textView.layer.cornerRadius = 8
        textView.layer.borderColor = UIColor.systemGray3.cgColor
        textView.layer.borderWidth = 1
        textView.textContainerInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

        // Enable Data Detectors (available iOS 3.0+)
        textView.dataDetectorTypes = [.link, .phoneNumber, .address] // Combine multiple types

        // Create an attributed string
        let attributedString = NSMutableAttributedString(string: "This is some rich text content. Visit \"Apple's website\" (https://apple.com) or call us at (123) 456-7890. Our address is 1 Apple Park Way, Cupertino, CA.")

        // Apply different fonts and colors
        let fullRange = NSRange(location: 0, length: attributedString.length)
        attributedString.addAttribute(.font, value: UIFont.systemFont(ofSize: 17), range: fullRange)
        attributedString.addAttribute(.foregroundColor, value: UIColor.label, range: fullRange)

        // Apply bold to a specific phrase
        let boldRange = (attributedString.string as NSString).range(of: "rich text content")
        attributedString.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: 18), range: boldRange)

        // Apply italic and a different color to another part
        let italicRange = (attributedString.string as NSString).range(of: "Apple's website")
        attributedString.addAttribute(.font, value: UIFont.italicSystemFont(ofSize: 17), range: italicRange)
        attributedString.addAttribute(.foregroundColor, value: UIColor.systemBlue, range: italicRange)

        textView.attributedText = attributedString

        view.addSubview(textView)

        NSLayoutConstraint.activate([
            textView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            textView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            textView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            textView.heightAnchor.constraint(equalToConstant: 250)
        ])
    }
}

Managing Keyboard and First Responder Status

When working with UITextView (or any text input control), managing the keyboard is a critical aspect of user experience. You need to ensure the keyboard appears when expected, dismisses when no longer needed, and doesn't obstruct the text input area.

Becoming and Resigning First Responder:

becomeFirstResponder(): This method makes the UITextView the 'first responder,' which means it's ready to receive touch events, and the keyboard will automatically appear. You typically call this when you want the user to start typing immediately, e.g., when a chat view loads.
resignFirstResponder(): This method forces the UITextView to relinquish its first responder status, causing the keyboard to dismiss. You might call this when the user taps a 'Done' button, taps outside the text view, or when navigating away from the input screen.

Adjusting Content for the Keyboard:

A common challenge is when the keyboard covers the UITextView. You can address this by observing keyboard notifications and adjusting the UITextView's contentInset or the scroll view content offset, especially if your UITextView is embedded in a larger scrollable area.

Keyboard Notifications:

UIResponder.keyboardWillShowNotification
UIResponder.keyboardWillHideNotification
UIResponder.keyboardWillChangeFrameNotification

By observing these notifications, you can get the keyboard's frame and animation duration, allowing you to smoothly animate adjustments to your UI. This is a robust way to handle keyboard obstructions. While Swift UI offers built-in ignoresSafeArea(.keyboard), in UIKit, you perform this manually.

Compatibility Note: Keyboard notifications are available from iOS 2.0+.

swift

import UIKit

class KeyboardHandlingViewController: UIViewController, UITextViewDelegate {

    let textView = UITextView()
    let sendButton = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        setupTextView()
        setupSendButton()
        addKeyboardObservers()

        // Dismiss keyboard on tap outside
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(dismissKeyboard))
        view.addGestureRecognizer(tapGesture)
    }

    deinit {
        removeKeyboardObservers()
    }

    func setupTextView() {
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.delegate = self
        textView.text = "Type your message here..."
        textView.font = UIFont.systemFont(ofSize: 17)
        textView.textColor = .systemGray
        textView.backgroundColor = .systemGray6
        textView.layer.cornerRadius = 8
        textView.layer.borderColor = UIColor.systemGray3.cgColor
        textView.layer.borderWidth = 1
        textView.textContainerInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        textView.returnKeyType = .send // Customize return key

        view.addSubview(textView)

        NSLayoutConstraint.activate([
            textView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            textView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            textView.heightAnchor.constraint(equalToConstant: 100), // Fixed height for example
            textView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
        ])
    }

    func setupSendButton() {
        sendButton.translatesAutoresizingMaskIntoConstraints = false
        sendButton.setTitle("Send", for: .normal)
        sendButton.addTarget(self, action: #selector(sendAction), for: .touchUpInside)
        sendButton.isEnabled = false // Initially disabled
        view.addSubview(sendButton)

        NSLayoutConstraint.activate([
            sendButton.trailingAnchor.constraint(equalTo: textView.trailingAnchor),
            sendButton.bottomAnchor.constraint(equalTo: textView.topAnchor, constant: -10)
        ])
    }

    @objc func sendAction() {
        print("Sending message: \(textView.text ?? "")")
        textView.text = nil // Clear text after sending
        sendButton.isEnabled = false
        textView.resignFirstResponder()
    }

    @objc func dismissKeyboard() {
        view.endEditing(true) // Dismisses keyboard from any first responder
    }

    // MARK: - Keyboard Observers
    func addKeyboardObservers() {
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow), name: UIResponder.keyboardWillShowNotification, object: nil)
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide), name: UIResponder.keyboardWillHideNotification, object: nil)
    }

    func removeKeyboardObservers() {
        NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
        NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillHideNotification, object: nil)
    }

    @objc func keyboardWillShow(notification: NSNotification) {
        guard let userInfo = notification.userInfo,
              let keyboardFrame = userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect,
              let animationDuration = userInfo[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double else { return }

        let keyboardHeight = keyboardFrame.height
        let newBottomConstraintConstant = -keyboardHeight - 10 // Adjust as needed

        UIView.animate(withDuration: animationDuration) {
            // Find and modify the bottom constraint of the textView or its container
            if let bottomConstraint = self.textView.constraints.first(where: { $0.firstAttribute == .bottom && $0.secondItem is UILayoutGuide }) {
                bottomConstraint.constant = newBottomConstraintConstant
            } else if let bottomConstraint = self.view.constraints.first(where: { $0.firstItem === self.textView && $0.firstAttribute == .bottom }) {
                bottomConstraint.constant = newBottomConstraintConstant
            }
            self.view.layoutIfNeeded()
        }
    }

    @objc func keyboardWillHide(notification: NSNotification) {
        guard let userInfo = notification.userInfo,
              let animationDuration = userInfo[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double else { return }

        UIView.animate(withDuration: animationDuration) {
            // Reset the bottom constraint to its original value
            if let bottomConstraint = self.textView.constraints.first(where: { $0.firstAttribute == .bottom && $0.secondItem is UILayoutGuide }) {
                bottomConstraint.constant = -20 
            } else if let bottomConstraint = self.view.constraints.first(where: { $0.firstItem === self.textView && $0.firstAttribute == .bottom }) {
                bottomConstraint.constant = -20 
            }
            self.view.layoutIfNeeded()
        }
    }

    // MARK: - UITextViewDelegate Methods

    func textViewDidChange(_ textView: UITextView) {
        sendButton.isEnabled = !textView.text.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
        // Remove placeholder functionality for simplicity in this example
    }

    func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
        if text == "\n" && textView.returnKeyType == .send {
            sendAction()
            return false // Prevent new line when 'Send' is pressed
        }
        return true
    }
}

Best Practices for UITextView

To ensure your UITextView implementations are robust, performant, and user-friendly, consider the following best practices:

Memory Management for Large Text: If you're displaying extremely large amounts of text, be mindful of performance. NSAttributedString can consume more memory than plain strings. For very long, static text, consider rendering it as a UILabel (with numberOfLines = 0) if editing isn't required, or lazy-loading content.
Accessibility (VoiceOver): Ensure your UITextView is accessible. VoiceOver users should be able to hear the content and be informed of its editable state. isEditable and accessibilityLabel are key properties. If you use a placeholder text pattern (like in the TextViewDelegateViewController example), make sure VoiceOver doesn't read it when the text field is active and empty.
Keyboard Avoidance: Always implement proper keyboard avoidance logic. While the example above uses simple constant adjustments, for complex layouts, you might need a more sophisticated solution, perhaps by embedding the UITextView in a UIScrollView and adjusting its contentInset.
Placeholder Text: For empty UITextViews, consider using a 'placeholder' by setting the to and the actual to instructional text when editing hasn't begun, then clearing it on . (As shown in the example).

By following these guidelines, you can leverage UITextView to its fullest potential, providing a superior text editing experience in your iOS applications.

Common Interview Questions

How do I add a placeholder to UITextView, similar to UITextField?

Unlike UITextField, UITextView doesn't have a direct `placeholder` property. You can implement placeholder behavior using the `UITextViewDelegate` methods. Set initial `text` and `textColor` to a placeholder string and light gray color. Then, in `textViewDidBeginEditing`, clear the text and set the color to black. In `textViewDidEndEditing`, if the text is empty, reset it to the placeholder. See the `TextViewDelegateViewController` example for a practical implementation.

How can I limit the number of characters a user can type into a UITextView?

To enforce a character limit, implement the `textView(_:shouldChangeTextIn:replacementText:)` delegate method. Inside this method, calculate the new length of the text by replacing the characters in the specified range. If the `updatedText.count` exceeds your maximum limit, return `false` to prevent the change; otherwise, return `true`. You can also update a character count label in `textViewDidChange(_:)` to provide real-time feedback.

What's the best way to handle the keyboard blocking my UITextView without using an external library?

The most robust way to handle keyboard obstruction in UIKit is to observe keyboard notifications (`UIResponder.keyboardWillShowNotification` and `UIResponder.keyboardWillHideNotification`). When the keyboard appears, get its frame and animation duration from the notification's `userInfo` dictionary. Then, adjust the bottom constraint of your `UITextView` (or its containing view/scroll view's `contentInset`) by the keyboard's height, animating the change over the same duration. When the keyboard hides, reset the constraints or `contentInset` to their original values.

#UITextView#UIKit#iOS Development#Text Editing#Rich Text#Delegates

Introduction to UITextView: Beyond the Basics

Core Capabilities:

Handling User Input and Delegates

Key UITextViewDelegate Methods:

Rich Text and Data Detection

NSAttributedString for Styling:

Data Detectors:

Managing Keyboard and First Responder Status

Becoming and Resigning First Responder:

Adjusting Content for the Keyboard:

Best Practices for UITextView

Common Interview Questions

How do I add a placeholder to UITextView, similar to UITextField?

How can I limit the number of characters a user can type into a UITextView?

What's the best way to handle the keyboard blocking my UITextView without using an external library?

Key `UITextViewDelegate` Methods:

`NSAttributedString` for Styling: