DEV Community

Jeff Morhous
Jeff Morhous

Posted on • Updated on • Originally published at jeffmorhous.com

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

    **let** textBox = UITextView()
Enter fullscreen mode Exit fullscreen mode

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.

    view.addSubview(textBox)textBox.translatesAutoresizingMaskIntoConstraints = **false**
Enter fullscreen mode Exit fullscreen mode

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.

    textBox.delegate = **self**
Enter fullscreen mode Exit fullscreen mode

Customize the textbox

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

    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)
Enter fullscreen mode Exit fullscreen mode

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.

    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**
Enter fullscreen mode Exit fullscreen mode

Tell your view where to put it

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

    NSLayoutConstraint.activate([insert your array of constraints here])
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)