Jeff Morhous
Jeff Morhous Jeff is a Software Consultant specializing in iOS development. He enjoys making new things, fixing old things, and learning from everything.

How To Customize UITextView

How To Customize UITextView

So recently I’ve been working on an iOS version of my Mock My Words app. It’s pretty simple in functionality so I wanted to compensate with a nice user interface. The main functionality requires that a user enter (or paste) in text of pretty much any size. Oftentimes iOS text entry with a UITextField, but that only offers single line input. For multi-line input, you have to use UITextView 😔. After throwing that in my app I was rather unimpressed with how it looked. So, I decided to put my own spin on it. It took a bit of research and I’m pleased with how it turned out so I thought I’d share with the community on how customize the UITextView object to your own needs.


Create the UITextView

I’m building this app programmatically, so the first step is to instantiate the UITextView object. If you’re using a storyboard, you’ll want to create an IBOutlet and then follow the other steps the same. I declared my UITextView at the class level of the view controller it’s used in, and the one-line looks like

1
    **let** textBox = UITextView()

Please note, all of the following code should be executed by viewdidload(), but feel free to extract it to a function and then call that function from viewDidLoad()

Add it to the view

Next, you have to add it to the view hierarchy so it actually shows up. If you’re using a storyboard, skip this step.

1
    view.addSubview(textBox)textBox.translatesAutoresizingMaskIntoConstraints = **false**

Set the delegate

If you actually want your app to react to actions the user may take, you need to make your view controller extend UITextViewDelegate, and then have the following line in your configuration.

1
    textBox.delegate = **self**

Customize the textbox

You can use creative freedom here, but here’s how I laid out my textbox view.

1
2
3
4
5
6
7
    textBox.autocorrectionType = .no
    textBox.text = placeholderText
    textBox.backgroundColor = .secondarySystemBackground
    textBox.textColor = .secondaryLabel
    textBox.font = UIFont.preferredFont(forTextStyle: .body)
    textBox.layer.cornerRadius = 20
    textBox.textContainerInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

Give it a shadow

Again, this is optional, but this is how I gave my textbox a shadow so it has a material design feel.

1
2
3
4
5
    textBox.layer.shadowColor = UIColor.gray.cgColor;
    textBox.layer.shadowOffset = CGSize(width: 0.75, height: 0.75)
    textBox.layer.shadowOpacity = 0.4
    textBox.layer.shadowRadius = 20
    textBox.layer.masksToBounds = **false**

Tell your view where to put it

Your method for doing this will definitely vary, but I used

1
    NSLayoutConstraint.activate([insert your array of constraints here])

And that’s it! You have a custom textbox that kind of floats above the view you put it in.