ios 如何设置 UITextview 的样式以喜欢圆角矩形文本字段？

How to style UITextview to like Rounded Rect text field?

提问by harshalb

I am using a text view as a comment composer.

我使用文本视图作为评论编辑器。

In the properties inspector I can't find anything like a border style property so that I can make use a rounded rect, something like UITextField.

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

So, the question is: How can I style a UITextViewlike a UITextFieldwith a rounded rect?

所以，问题是：我怎样才能用圆角矩形设计一个UITextView像 a 的样式UITextField？

回答by luvieere

There is no implicit style that you have to choose, it involves writing a bit of code using the QuartzCoreframework:

没有您必须选择的隐式样式，它涉及使用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;

It only works on OS 3.0 and above, but I guess now it's the de facto platform anyway.

它仅适用于 OS 3.0 及更高版本，但我想现在无论如何它都是事实上的平台。

回答by hanumanDev

this code worked well for me:

这段代码对我来说效果很好：

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

回答by Sean McClory

Swift 3 Version

斯威夫特 3 版本

After setting up the text view in 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 Version

斯威夫特 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
}

回答by Suresh Varma

Edit: You have to import

编辑：您必须导入

#import <QuartzCore/QuartzCore.h>

for using corner radius.

用于使用圆角半径。

Try this it will work for sure

试试这个它肯定会工作

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

As Rob figured it out setting the if you want the border color to be similar as UITextFieldthen you need to change the border width to 2.0 and color to gray by adding the following line

正如 Rob 想出的那样，如果您希望边框颜色与那么相似，UITextField您需要通过添加以下行将边框宽度更改为 2.0 并将颜色更改为灰色

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

回答by Ben Packard

I wanted the real deal, so I add UIImageViewas a subview of the UITextView. This matches the native border on a UITextField, including the gradient from top to bottom:

我想要真正的交易，所以我添加UIImageView为UITextView. 这匹配 a 上的原生边框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];

These are the images I use:

这些是我使用的图像：

回答by Phil

One solution is to add a UITextField below the UITextView, make the UITextViewbackground transparent and disable any user interaction on the UITextField. Then in code change the UITextFieldframe with something like that

一种解决方案是在 UITextView 下方添加一个 UITextField，使UITextView背景透明并禁用UITextField. 然后在代码UITextField中用类似的东西改变框架

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

You will have exactly the same look as a text field.

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

And as suggested by Jon, you should put this piece of code inside [UIViewController viewDidLayoutSubviews]on iOS 5.0+.

正如Jon所建议的，您应该将这段代码[UIViewController viewDidLayoutSubviews]放在 iOS 5.0+ 上。

回答by kennytm

For the best effect you have to use a custom (stretchable) background image. This is also how the UITextField's rounded border is drawn.

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

回答by Andrew_L

One way I found to do it without programming is to make the textfield background transparent, then place a Round Rect Button behind it. Make sure to change the button settings to disable it and uncheck the Disable adjusts imagecheckbox.

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

回答by Andrey Gordeev

You may want to check out my library called DCKit.

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

You'd be able to make a rounded corner text view (as well as text field/button/plain UIView) from the Interface Builderdirectly:

您可以直接从以下位置制作圆角文本视图（以及文本字段/按钮/普通UIView）Interface Builder：

It also has many other useful features, such as text fields with validation, controls with borders, dashed borders, circle and hairline views etc.

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

回答by BobDickinson

I know there are already a lot of answers to this one, but I didn't really find any of them sufficient (at least in Swift). I wanted a solution that provided the same exact border as a UITextField (not an approximated one that looks sort of like it looks right now, but one that looks exactly like it and will always look exactly like it). I needed to use a UITextField to back the UITextView for the background, but didn't want to have to create that separately every time.

我知道这个问题已经有很多答案了，但我真的没有找到足够的答案（至少在 Swift 中）。我想要一个解决方案，它提供与 UITextField 完全相同的边框（不是一个看起来有点像现在的近似边框，而是一个看起来完全像它并且总是看起来完全一样的）。我需要使用 UITextField 来支持 UITextView 作为背景，但不想每次都单独创建。

The solution below is a UITextView that supplies it's own UITextField for the border. This is a trimmed down version of my full solution (which adds "placeholder" support to the UITextView in a similar way) and was posted here: https://stackoverflow.com/a/36561236/1227119

下面的解决方案是一个 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);
    }        
}