开发者

Bordered UITextView

I want to have a thin gray border around a UITextView. I have gone through the Apple docum开发者_Python百科entation but couldn't find any property there. Please help.


#import <QuartzCore/QuartzCore.h>

....

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


Add the following for rounded corners:

self.yourUITextview.layer.cornerRadius = 8; 


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:

Bordered UITextView

Easy peasy.


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

Bordered UITextView

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

Bordered UITextView


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

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


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!


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


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
}


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

Bordered UITextView


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


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;


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);


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

myText.layer.borderColor = UIColor.lightGray.cgColor

myText.layer.borderWidth = 1.0


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜