如何将UITextview设置为喜欢Rounded Rect文本字段的样式?


170

我正在使用文本视图作为评论撰写者。

在属性检查器中,找不到边框样式属性之类的东西,因此可以使用圆角矩形,例如UITextField

所以,问题是:如何风格UITextView像一个UITextField带有圆角的矩形?


1
您能不使用UITextField而只是关闭电源userInteractionEnabled吗?
jowie 2013年

Answers:


285

没有必须选择的隐式样式,它涉及使用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及更高版本,但我想现在它仍然是事实上的平台。


47
我发现在上面的代码的顶部添加以下内容,使边框看起来非常接近UITextField。[textView.layer setBorderColor:[[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];[textView.layer setBorderWidth:2.0];
罗布

12
确保具有:#import <QuartzCore / QuartzCore.h>。我有问题,因为我没有进口QuartzCore
奥斯丁

1
对于像我这样的n00b,值得注意的是:将此代码放在viewDidLoad NOT initWithNibName中:-)
Brian Colavito 2012年

1
您可以UITextFieldborderStyle属性设置为来使用UITextBorderStyleRoundedRect-参见下面的我的文章。
jowie 2013年

5
iOS 7-borderWidth为1.0,alpha为.2时使用默认样式。
卡雷尔·韦德

77

该代码对我来说效果很好:

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

4
我会说5px距文本字段更近,但是此答案的灰色比选定答案要好。
Peter DeWeese

2
当然,您需要为此问题添加QuartzCore框架,并通过#import <QuartzCore / QuartzCore.h>导入它
lukaswelte 2013年

36

Swift 3版本

在界面生成器中设置文本视图之后。

@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
}

1
问题是它不是完全灰色。UITextField框架的颜色有些不同。
马卡雷勒'17

1
制作.borderWidth = 0.7,使它看起来更接近目前的风格我在iOS上看到11
克里斯Amelinckx

28

编辑:您必须导入

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

2
我想知道为什么这不起作用。感谢有关QuartzCore的建议。
Echilon

23

我想要真正的交易,因此将添加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];

这些是我使用的图像:

在此处输入图片说明 在此处输入图片说明


2
我想你也需要告诉的TextView有UITextBorderStyle无如果您没有设置已经在XCode中
superlogical

1
我重新上传了png图像
Ben Packard

5
不好,滚动UITextView时背景会移动。猜猜我将其全部放置在父UIView中。
奥利弗·皮尔曼

1
优秀的。看起来不错:D
Sune Trudslev

12

一种解决方案是在UITextView下方添加一个UITextField,使UITextView背景透明,并禁用该控件上的任何用户交互。UITextField。然后在代码UITextField中用类似的方法更改框架

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

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

并按照Jon的建议,您应该将这段代码[UIViewController viewDidLayoutSubviews]放在iOS 5.0+上。


1
这是如此简单,并且看起来恰好是我想要的样子。我只是将UITextField的框架与UITextView进行了匹配:CGRect frame = self.myTextView.frame; frame.size.height + = 2; self.myTextField.frame =框架;
Buyin Brian

1
可爱的答案。干净简单。将代码放入viewDidLayoutSubviews:(iOS 5.0+)。
乔恩

1
很好,这是我最后得到的解决方案。请注意,它直到我使用Jon的注释
后才起作用

1
这是最快的,看起来也是最好的。
韦斯顿

5

为了获得最佳效果,您必须使用自定义(可拉伸)背景图像。这也是UITextField绘制圆形边框的方式。


4

我发现无需编程即可完成此操作的一种方法是使文本字段背景透明,然后在其后面放置一个“圆角矩形”按钮。确保更改按钮设置以禁用它,然后取消选中该Disable adjusts image复选框。


4

您可能想查看我的名为DCKit的

您可以直接从以下位置制作圆角文本视图(以及text field / button / plain UIViewInterface Builder

DCKit:带边框的UITextView

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


4

我知道对此已经有很多答案,但是我真的没有找到足够的答案(至少在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);
    }        
}

3

我发现无需编程即可完成此操作的一种方法是使文本字段背景透明,然后在其后面放置一个“圆角矩形”按钮。确保更改按钮设置以将其禁用,然后取消选中“禁用调整图像”复选框。

尝试了Quartzcore代码,发现它对我的旧3G(我用于测试)造成了滞后。这不是一个大问题,但是如果您想尽可能地包容不同的ios和硬件,我建议您使用上面的Andrew_L的答案-或制作自己的图像并相应地应用。


3

有一个很棒的背景图片,与UITextViewiPhone的“消息”应用程序中发送短信所使用的背景图片相同。您将需要Adobe Illustrator来获取和修改它。 iPhone ui矢量元素


3
#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];
}

2

您可以在文本视图顶部创建一个不接受任何事件的文本字段,如下所示:

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;

或者只是在界面生成器中创建一个文本字段。然后在代码中设置高度(因为界面生成器不允许您使用)。CGRect frameRect = self.textField.frame; frameRect.size.height = 50; self.textField.frame = frameRect;
奥杜布

2

如果要保持控制器代码整洁,则可以如下子类化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

1

这是我的解决方案:

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

0

我认为不可能。但您可以对UITableView1个部分和1个空单元格进行(分组),并将其用作的容器UITextView


0

这是一个古老的问题,我也一直在寻找这个问题的答案。luvieeres的回答是100%正确,后来Rob添加了一些代码。很好,但是我在另一个问题答案中找到了第三方,这似乎对我很有帮助。我不仅是搜索的类似的外观UITextFieldUITextView,我也搜索了多行支持。ChatInputSample都满意。因此,我认为该第三方可能会对其他人有所帮助。还要感谢帖木儿(Timur),他在这里提到了这个开源。


0

在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,他们的回答几乎使我到了:)


-1

怎么样:

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

问题是关于textview。
阿齐克·阿卜杜拉

抱歉-触发愉快的堆栈响应。很想知道为什么他们不能只使用一个UITextField带有userInteractionEnabled设置为NO
jowie 2013年

文本字段不支持多行
Azik Abdullah

了解。感谢澄清
jowie
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.