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

时间:2009-12-01 07:01:27

标签: ios uitextview

我使用文本视图作为评论作曲家。

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

所以,问题是:如何使用圆角矩形设置UITextView UITextField样式?

20 个答案:

答案 0 :(得分:282)

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

答案 1 :(得分:76)

这段代码对我很有用:

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

答案 2 :(得分:34)

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
}

答案 3 :(得分:27)

修改:您必须导入

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

答案 4 :(得分:22)

我想要真正的交易,所以我添加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

答案 5 :(得分:11)

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

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

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

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

答案 6 :(得分:4)

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

答案 7 :(得分:3)

我发现在没有编程的情况下执行此操作的一种方法是使文本字段背景透明,然后在其后面放置一个Round Rect Button。确保更改按钮设置以禁用它,并取消选中Disable adjusts image复选框。

答案 8 :(得分:3)

您可能想查看名为DCKit的我的图书馆。

您可以直接从CustomerRentalHistoryTRecord result = Rentals.getCustomerRentalHistory(config, new CustomerTRecord(1, "John", "Wayne")) for (FilmTRecord film : result.getFilms()) { System.out.println(film.getTitle()); } 制作圆角文字视图(以及文字字段/按钮/普通UIView):

DCKit: bordered UITextView

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

答案 9 :(得分:3)

我知道这个问题已经有很多答案了,但我并没有真正发现它们中的任何一个(至少在Swift中)。我想要一个提供与UITextField完全相同的边界的解决方案(不是一个看似现在看起来有点类似的近似,但看起来与它完全相同并且看起来总是如此)。我需要使用UITextField来支持UITextView作为背景,但是并不想每次都单独创建它。

下面的解决方案是UITextView,它为边框提供了自己的UITextField。这是我的完整解决方案的精简版(它以类似的方式添加&#34;占位符&#34;对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);
    }        
}

答案 10 :(得分:2)

  

我发现在没有编程的情况下执行此操作的一种方法是使文本字段背景透明,然后在其后面放置一个Round Rect Button。确保更改按钮设置以禁用它,并取消选中“禁用调整图像”复选框。

尝试了Quartzcore代码,发现它导致我的旧3G延迟(我用于测试)。这不是一个大问题,但是如果您希望尽可能包含不同的ios和硬件,我建议您使用Andrew_L的答案 - 或者制作您自己的图像并进行相应的应用。

答案 11 :(得分:2)

有一个很棒的背景图片与用于在iPhone的消息应用程序中发送短信的UITextView相同。你需要Adobe Illustrator来获得&amp;修改它。 iphone ui vector elements

答案 12 :(得分:2)

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

答案 13 :(得分:1)

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

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;

答案 14 :(得分:1)

如果要保持控制器代码清洁,可以像下面那样继承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

答案 15 :(得分:0)

我不认为这是可能的。但您可以{1}}(已分组)1个部分和1个空单元格,并将其用作UITableView的容器。

答案 16 :(得分:0)

这是一个老问题,我也在搜索这个问题的答案。 luvieeres的回答是100%正确,后来Rob添加了一些代码。这很好,但我在another questions answer找到了第三方,这似乎对我很有帮助。我不仅搜索了UITextField UITextView以上{{1}}的类似外观,还搜索了多线支持。 ChatInputSample对两者都感到满意。这就是为什么我认为这个第三方可能对其他人有所帮助。还要感谢Timur,他在here中提到了这个开源。

答案 17 :(得分: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,他的答案几乎在那里:)

答案 18 :(得分:0)

这是我的解决方法:

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

答案 19 :(得分:-1)

如何:

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