Bordered UITextView

Question

I want to have a thin gray border around a UITextView. I have gone through the Apple documentation but couldn't find any property there. Please help.

Become

Answer 1

#import <QuartzCore/QuartzCore.h>

....

// typically inside of the -(void) viewDidLoad method
self.yourUITextView.layer.borderWidth = 5.0f;
self.yourUITextView.layer.borderColor = [[UIColor grayColor] CGColor];

Lester

I didn't think it really needed much explaining, view is the UITextView, and the code goes wherever you'd set up the view (awakeFromNib or viewDidLoad are two possible places). Since there was no code given there's no way to give good context in response. – Lester

XCode don't let me to set border for layer. It says that layer is read-only. I made UIView (where put some elements) and trying to set border to that view. Trying to do this self.myView.layer.borderWidth ..., but as I said, layer is read-only, so layer don't have any methods or variables to set – Overanxious

Did you import QuartzCore? You could also try getting out a CALayer from self.myView and setting borderWidth on that. It's settable. – Lester

Some more information on "layer" being read-only in UIView (the layer property is, but you can set values in the layer for a view): #12837577 – Lester

Answer 2

Add the following for rounded corners:

self.yourUITextview.layer.cornerRadius = 8; 

Hestia

Answer 3

Here's the code I used, to add a border around my TextView control named "tbComments" :

self.tbComments.layer.borderColor = [[UIColor grayColor] CGColor];
self.tbComments.layer.borderWidth = 1.0;
self.tbComments.layer.cornerRadius = 8;

And here's what it looks like:

Easy peasy.

Michellmichella

Answer 4

I add UIImageView as a subview of the UITextView. This matches the native border on a UITextField, including the gradient from top to bottom:

textView.backgroundColor = [UIColor clearColor];
UIImageView *borderView = [[UIImageView alloc] initWithFrame: CGRectMake(0, 0, textView.frame.size.width, textView.frame.size.height)];
borderView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
UIImage *textFieldImage = [[UIImage imageNamed:@"TextField.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 8, 15, 8)];
borderView.image = textFieldImage;
[textField addSubview: borderView];
[textField sendSubviewToBack: borderView];

These are the png images I use, and a jpg representation:

@1x

@2x

Plowboy

Good solution. Are these images yours? Are we free to use them? – Lactic

These images are 'modeled' on those used in Apple's own apps. In truth I extracted them and made very few, if any, changes. Use at your own risk. The goal was to mimic the native look and feel so it is hard to come up with something that looks much different. For what it's worth, I have shipped and had approved apps using this image without issue. – Plowboy

The png image files appear to have been removed - I don't intend to constantly update this with a new image location so my apologies if the jpg doesn't work for you. I can re-upload as and when requested via comment. – Plowboy

With the image attached this works best: code resizableImageWithCapInsets:UIEdgeInsetsMake(28, 14, 28, 14) – Animatism

The WikiUpload links (for the two images) fails to find the image files now. ;-( – Michellmichella

Answer 5

Works great, but the color should be a CGColor, not UIColor:

view.layer.borderWidth = 5.0f;
view.layer.borderColor = [[UIColor grayColor] CGColor];

Cinda

#import <QuartzCore/QuartzCore.h> – Erlond

Answer 6

I believe the above answers are for the previous versions of Swift. I Googled a bit and the below code works for Swift 4. Just sharing it for whoever it may benefit.

self.textViewName.layer.borderColor = UIColor.lightGray.cgColor
self.textViewName.layer.borderWidth = 1.0
self.textViewName.layer.cornerRadius = 8

Happy Coding!

Billye

With Swift5 and the dark mode you can even use the system colors: self.textViewName.layer.borderColor = UIColor.systemGray4.cgColor – Leisured

Answer 7

for Swift Programming, use this

tv_comment.layer.borderWidth = 2
tv_comment.layer.borderColor = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1).CGColor

Shaughnessy

Or just UIColor(white: 0.2, alpha: 1).CGColor – Leannaleanne

Answer 8

this is as close as I could from an original UITextField

func updateBodyTextViewUI() {
    let borderColor = UIColor.init(red: 212/255, green: 212/255, blue: 212/255, alpha: 0.5)

    self.bodyTextView.layer.borderColor = borderColor.CGColor
    self.bodyTextView.layer.borderWidth = 0.8
    self.bodyTextView.layer.cornerRadius = 5
}

Bannister

Answer 9

you can add border to UITextView from the Storyboard - Identity Inspector - User Defined Runtime Attribute

Taillight

Answer 10

As of iOS 8 and Xcode 6, I now find the best solution is to subclass UITextView and mark the subclass as an IB_DESIGNABLE, which will allow you to view the border in storyboard.

Header:

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface BorderTextView : UITextView

@end

Implementation:

#import "BorderTextView.h"

@implementation BorderTextView

- (void)drawRect:(CGRect)rect
{
    self.layer.borderWidth = 1.0;
    self.layer.borderColor = [UIColor blackColor].CGColor;
    self.layer.cornerRadius = 5.0f;
}

@end

Then just drag out your UITextView in storyboard and set its class to BorderTextView

Seraphine

Answer 11

The thing that made it work (in addition to following the answers here) is adding the borderStyle attribute:

#import <QuartzCore/QuartzCore.h>
..

phoneTextField.layer.borderWidth = 1.0f;
phoneTextField.layer.borderColor = [[UIColor blueColor] CGColor];
phoneTextField.borderStyle = UITextBorderStyleNone;

Hygeia

Answer 12

Just a small addition. If you make the border a bit wider, it will interfere with the left and right side of text. To avoid that, I added the following line:

self.someTextView.textContainerInset = UIEdgeInsetsMake(8.0, 8.0, 8.0, 8.0);

Fecula

Answer 13

In Swift 3, you may use the following two lines:

myText.layer.borderColor = UIColor.lightGray.cgColor

myText.layer.borderWidth = 1.0

Spoonfeed

Answer 14

An elegant solution would be to insert a real UITextField on the bottom and prevent it to scroll with the content. This way you have even the correct dark mode borders. 🙂

class BorderedTextView: UITextView {

  let textField = UITextField()

  required init?(coder: NSCoder) {
    super.init(coder: coder)
    insertTextField()
  }

  override init(frame: CGRect, textContainer: NSTextContainer?) {
    super.init(frame: frame, textContainer: textContainer)
    insertTextField()
  }

  convenience init() {
    self.init(frame: .zero, textContainer: nil)
  }

  private func insertTextField() {
    delegate = self
    textField.borderStyle = .roundedRect
    insertSubview(textField, at: 0)
  }

  override func layoutSubviews() {
    super.layoutSubviews()
    textField.frame = bounds
  }
}

extension BorderedTextView: UITextViewDelegate {

  func scrollViewDidScroll(_ scrollView: UIScrollView) {
    textField.frame = bounds
  }
}

Cotto

Does the UITextView show the borders when the view controller containing the UITextView is presented? It's not showing up for me, even if I set the values of UITextView layer.borderColor to UIColor.black.CGColor and layer.borderWidth to 1.0 in viewWillAppear(). – Tullius

Answer 15

I solved this problem in storyboard by putting a fully disabled UIButton behind the UITextView and making the background color of the UITextView clearColor. This works without requiring extra code or packages.

Sedimentation

Of course, this doesn't work in iOS 7, as the buttons have no edges (the buttons look like labels now) – Michellmichella