Bordered UITextView
IosQuartz CoreIos Problem Overview
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.
Ios Solutions
Solution 1 - Ios
#import <QuartzCore/QuartzCore.h>
....
// typically inside of the -(void) viewDidLoad method
self.yourUITextView.layer.borderWidth = 5.0f;
self.yourUITextView.layer.borderColor = [[UIColor grayColor] CGColor];
Solution 2 - Ios
Add the following for rounded corners:
self.yourUITextview.layer.cornerRadius = 8;
Solution 3 - Ios
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.
Solution 4 - Ios
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:
Solution 5 - Ios
Works great, but the color should be a CGColor
, not UIColor
:
view.layer.borderWidth = 5.0f;
view.layer.borderColor = [[UIColor grayColor] CGColor];
Solution 6 - Ios
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!
Solution 7 - Ios
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
Solution 8 - Ios
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
}
Solution 9 - Ios
you can add border to UITextView from the Storyboard - Identity Inspector - User Defined Runtime Attribute
Solution 10 - Ios
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
Solution 11 - Ios
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;
Solution 12 - Ios
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);
Solution 13 - Ios
In Swift 3, you may use the following two lines:
myText.layer.borderColor = UIColor.lightGray.cgColor
myText.layer.borderWidth = 1.0
Solution 14 - Ios
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
}
}
Solution 15 - Ios
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.