Removing padding for UITextView

Last week I was working on one of the projects that required using UITextView instead of more standard UILabel instance. Don't get me wrong, but there were some compelling reasons for me to use UITextView. The reason being, I wanted to add a clickable link to the text and when user taps on it, execute a certain action.

The problem was not adding UITextView, but the spacing it keeps around. I will show you with an example below.

Let's make two UITextView instances and add it to view and see its layout by showing view frames.


override func viewDidLoad() {
        super.viewDidLoad()
        let textView1 = UITextView()
        let textView2 = UITextView()
        configure(textView: textView1, text: "Swift is the sweet language\nI can't wait to use this language with real apps")
        configure(textView: textView2, text: "Happy New Year to all people reading this post\nHope you all have this new wonderful year")

        let views = ["textView1": textView1, "textView2": textView2]
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-100-[textView1(>=0)][textView2(>=0)]", options: [], metrics: nil, views: views))
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[textView1]-20-|", options: [], metrics: nil, views: views))
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[textView2]-20-|", options: [], metrics: nil, views: views))
    }

    func configure(textView view: UITextView, text: String) {
        view.translatesAutoresizingMaskIntoConstraints = false
        view.isScrollEnabled = false
        view.isEditable = false
        view.text = text
        self.view.addSubview(view)
    }

And this is how result looks like,
(I have enabled view frame by going to Debug -> View Debugging -> Show View Frames)

text_view_demo

As you can see even though I have asked autolayout to maintain zero vertical spacing, you can still see unwanted padding on left, top and bottom of text view. This is the default setting for UITextView. But this is not how it sets up for UILabel. What can we do so that redundant padding is eliminated and UITextView appearance looks exactly like UILabel?

Turns out it is pretty simple and one line change. In the above code where we configure text views, we can add one more property on text view's content as follows.

// Remove all padding
view.textContainerInset = .zero

// Turns out we still have 5px of extra padding on the left of text view. Code below gets rid of it too.
view.contentInset = UIEdgeInsetsMake(0, -5, 0, 0)

That should be it. Now if you re-run your project, all the redundant padding will be lost.

text_view_without_padding

As you can see from the updated screenshot, we got rid of all the padding. Hope it helps someone who is trying to use UITextView in place of UILabel to support clickable links and still wants to make it look like as if UILabel is in use

Ref: StackOverflow

Jayesh Kawli

I am a web and mobile developer working at Wayfair in Boston, MA. I come to learn so many things during course of life and I write about things which helped me and feel like they can help others too.

Subscribe to Fresh Beginning

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!