如何样式 UITextview 喜欢圆角矩形文本字段？

我使用文本视图作为注释编写器。

在属性检查器中，我找不到任何类似边框样式的属性，因此我可以使用圆角矩形，类似于 UITextField。

所以，问题是: 我怎样才能像 UITextField一样设计一个圆角的 UITextView？

141328 次浏览
小开

我认为这是不可能的。但是你可以做 UITableView(分组)与1节和1空单元格，并使用它作为一个容器为您的 UITextView。

小开
最佳答案

你没有必须选择的隐式样式，它涉及到使用 QuartzCore框架编写一些代码:

//first, you
#import <QuartzCore/QuartzCore.h>


//.....


//Here I add a UITextView in code, it will work if it's added in IB too
UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];


//To make the border look very close to a UITextField
[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
[textView.layer setBorderWidth:2.0];


//The rounded corner part, where you specify your view's corner radius:
textView.layer.cornerRadius = 5;
textView.clipsToBounds = YES;

它只能在 OS 3.0及以上版本上运行，但我猜现在它已经成为事实上的平台了。

小开

为了达到最好的效果，你必须使用一个自定义的(可伸缩的)背景图像。这也是如何 UITextField的圆角边界绘制。

小开

编辑: 您必须导入

#import <QuartzCore/QuartzCore.h>

使用拐角半径。

试试这个，一定行的

UITextView* txtView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 300, 100)];
txtView.layer.cornerRadius = 5.0;
txtView.clipsToBounds = YES;

就像 Rob 设置了如果你想要边框颜色和 UITextField相似，那么你需要通过添加下面的线将边框宽度改为2.0，颜色改为灰色

[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
[textView.layer setBorderWidth:2.0];
小开

有一个伟大的背景图片，是相同的 UITextView用于发送短信在 iPhone 的消息应用程序。你需要 Adobe Illustrator 来获得和修改它。 Iphone ui 矢量元素

小开

这个代码对我很有用:

    [yourTextView.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
[yourTextView.layer setBorderColor: [[UIColor grayColor] CGColor]];
[yourTextView.layer setBorderWidth: 1.0];
[yourTextView.layer setCornerRadius:8.0f];
[yourTextView.layer setMasksToBounds:YES];
小开

我发现一种不用编程就可以做到的方法是使文本字段背景透明，然后在背景后面放置一个圆形的 Rect 按钮。确保更改按钮设置以禁用它，并取消选中 Disable adjusts image复选框。

小开

我发现一种不用编程就可以做到的方法是使文本字段背景透明，然后在背景后面放置一个圆形的 Rect 按钮。确保更改按钮设置以禁用它，并取消“禁用调整图像”复选框。

尝试 Quartzcore 代码，发现它导致我的旧3G (我用于测试)延迟。这不是一个大问题，但是如果你想尽可能的包容不同的 ios 和硬件，我推荐 Andrew _ L 的答案在上面-或者制作你自己的图片并相应地应用。

小开

我想要真正的交易，所以我添加 UIImageView作为一个子视图的 UITextView。这与 UITextField上的本机边界相匹配，包括从上到下的渐变:

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

以下是我使用的图片:

enter image description here enter image description here

小开 
#import <QuartzCore/QuartzCore.h>
- (void)viewDidLoad{
UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];
textView.layer.cornerRadius = 5;
textView.clipsToBounds = YES;
[textView.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
[textView.layer setBorderColor: [[UIColor grayColor] CGColor]];
[textView.layer setBorderWidth: 1.0];
[textView.layer setCornerRadius:8.0f];
[textView.layer setMasksToBounds:YES];
[self.view addSubView:textview];
}
小开

一种解决方案是 在 UITextView 下面添加一个 UITextField，使 UITextView背景透明，并禁用 UITextField上的任何用户交互。然后在代码中用类似的东西改变 UITextField帧

self.textField.frame = CGRectInset(self.textView.frame, 0, -2);

您将拥有与文本字段完全相同的外观。

正如 乔恩建议的那样，你应该把这段代码放在 iOS 5.0 + 上的 [UIViewController viewDidLayoutSubviews]中。

小开

您可以像下面这样在文本视图上创建一个不接受任何事件的文本字段:

CGRect frameRect = descriptionTextField.frame;
frameRect.size.height = 50;
descriptionTextField.frame = frameRect;
descriptionTextView.frame = frameRect;
descriptionTextField.backgroundColor = [UIColor clearColor];
descriptionTextField.enabled = NO;
descriptionTextView.layer.cornerRadius = 5;
descriptionTextView.clipsToBounds = YES;
小开

这是一个古老的问题，我也搜索这个问题的答案。Luvieeres 的回答是100% 正确的，后来 Rob 添加了一些代码。这是非常好的，但我发现在 另一个问题的答案的第三方似乎对我很有帮助。我不仅搜索类似的外观 UITextField超过 UITextView，我也搜索多线支持。ChatInputSample两者都满足。这就是为什么我认为这个第三方可能对其他人有帮助。还要感谢 Timur，他在 给你中提到了这个开放源码。

小开

不如这样:

UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(20, 20, 280, 32)];
textField.borderStyle = UITextBorderStyleRoundedRect;
[self addSubview:textField];
小开

在 iOS7中，以下内容完美地匹配了 UITextField 的边界(至少在我看来是这样) :

textField.layer.borderColor = [[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor];
textField.layer.borderWidth = 0.5;
textField.layer.cornerRadius = 5;
textField.clipsToBounds = YES;

没有必要进口任何特殊的东西。

感谢@uvieere 和@hanumanDev，他们的回答让我几乎想明白了:)

小开

迅捷3版本

在 Interface Builder 中设置文本视图之后。

@IBOutlet weak var textView: UITextView!


override func viewDidLoad() {
super.viewDidLoad()
textView.layer.cornerRadius = 5
textView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
textView.layer.borderWidth = 0.5
textView.clipsToBounds = true
}

Swift 2.2版本

@IBOutlet weak var textView: UITextView!


override func viewDidLoad() {
super.viewDidLoad()
textView.layer.cornerRadius = 5
textView.layer.borderColor = UIColor.grayColor().colorWithAlphaComponent(0.5).CGColor
textView.layer.borderWidth = 0.5
textView.clipsToBounds = true
}
小开

如果你想保持控制器代码的整洁，你可以像下面这样子类化 UITextView，并在 Interface Builder 中更改类名。

RoundTextView.h

#import <UIKit/UIKit.h>
@interface RoundTextView : UITextView
@end

RoundTextView.m

#import "RoundTextView.h"
#import <QuartzCore/QuartzCore.h>
@implementation RoundTextView
-(id) initWithCoder:(NSCoder *)aDecoder {
if (self = [super initWithCoder:aDecoder]) {
[self.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.333] CGColor]];
[self.layer setBorderWidth:1.0];
self.layer.cornerRadius = 5;
self.clipsToBounds = YES;
}
return self;
}
@end
小开

你可能想看看我的 DCKit图书馆。

你可以从 Interface Builder直接制作一个圆角文本视图(以及文本字段/按钮/纯 UIView) :

DCKit: bordered UITextView

它还有许多其他有用的特性，例如带验证的文本字段、带边框的控件、虚线边框、圆形和细线视图等。

小开

我知道这个问题已经有很多答案了，但是我并没有发现其中任何一个答案是足够的(至少在 Swift 中是这样的)。我想要一个解决方案，提供与 UITextField 相同的精确边界(不是一个近似的，看起来有点像它现在看起来，但一个看起来完全一样，并将始终完全一样)。我需要使用一个 UITextField 来支持背景的 UITextView，但是不想每次都单独创建它。

下面的解决方案是一个 UITextView，它为边界提供自己的 UITextField。这是我的完整解决方案的精简版(它以类似的方式为 UITextView 添加了“占位符”支持) ，发布在这里: https://stackoverflow.com/a/36561236/1227119

// This class implements a UITextView that has a UITextField behind it, where the
// UITextField provides the border.
//
class TextView : UITextView, UITextViewDelegate
{
var textField = TextField();


required init?(coder: NSCoder)
{
fatalError("This class doesn't support NSCoding.")
}


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


self.delegate = self;


// Create a background TextField with clear (invisible) text and disabled
self.textField.borderStyle = UITextBorderStyle.RoundedRect;
self.textField.textColor = UIColor.clearColor();
self.textField.userInteractionEnabled = false;


self.addSubview(textField);
self.sendSubviewToBack(textField);
}


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


override func layoutSubviews()
{
super.layoutSubviews()
// Do not scroll the background textView
self.textField.frame = CGRectMake(0, self.contentOffset.y, self.frame.width, self.frame.height);
}


// UITextViewDelegate - Note: If you replace delegate, your delegate must call this
func scrollViewDidScroll(scrollView: UIScrollView)
{
// Do not scroll the background textView
self.textField.frame = CGRectMake(0, self.contentOffset.y, self.frame.width, self.frame.height);
}
}
小开

我的解决办法是:

- (void)viewDidLoad {
[super viewDidLoad];




self.textView.text = self.messagePlaceholderText;
self.textView.layer.backgroundColor = [[UIColor whiteColor] CGColor];
self.textView.layer.borderColor = [[[UIColor grayColor] colorWithAlphaComponent:0.3] CGColor];
self.textView.layer.borderWidth = 0.5;
self.textView.layer.cornerRadius = 5.5f;
self.textView.layer.masksToBounds = YES;
self.textView.textColor = [[UIColor grayColor] colorWithAlphaComponent:0.4];
}


- (void)textViewDidBeginEditing:(UITextView *)textView {
if (textView == self.tvMessage) {
// Delete placeholder text
if ([self.textView.text isEqualToString:self.messagePlaceholderText]) {
self.textView.text = @"";
self.textView.textColor = [UIColor blackColor];
}
}
}


- (void)textViewDidEndEditing:(UITextView *)textView {
if (textView == self.tvMessage) {
// Write placeholder text
if (self.textView.text.length == 0) {
self.textView.text = self.messagePlaceholderText;
self.textView.textColor = [[UIColor grayColor] colorWithAlphaComponent:0.4];
}
}
}

提交答案