UITextField 边框颜色

Question

我非常希望能够为UITextField边框设置自定义颜色。但是目前我只找到了如何更改边框线条样式的方法。

我使用了background属性来设置背景颜色，如下所示：

self.textField.backgroundColor = textFieldColor;

但我也必须改变UITextField边框的颜色。我的问题是如何改变边框颜色。

- dasha

---

有很多有用的答案，但只有一个（https://dev59.com/_XI-5IYBdhLWcg3wbHq-#5387607）提到了我认为关键的东西： textField.borderStyle = UITextField.BorderStyle.none。没有它，我会看到内置边框的痕迹。似乎一旦你不使用内置边框并开始定义自己的边框，你需要使用borderStyle = none来表明你不想要它，并定义所有参数（颜色，cornerRadius和borderWidth）。 - Andy Weinstein

Answer 1

在您的类中导入 QuartzCore 框架：

#import <QuartzCore/QuartzCore.h>

如需更改边框颜色，请使用以下代码片段（我将其设置为红色）：

    textField.layer.cornerRadius=8.0f;
    textField.layer.masksToBounds=YES;
    textField.layer.borderColor=[[UIColor redColor]CGColor];
    textField.layer.borderWidth= 1.0f;

要恢复原始布局，只需将边框颜色设置为透明色即可。

    serverField.layer.borderColor=[[UIColor clearColor]CGColor];

在 Swift 代码中

    textField.layer.borderWidth = 1
    textField.layer.borderColor = UIColor.whiteColor().CGColor

- Gary

---

应该使用 #import <QuartzCore/QuartzCore.h> 而不是 QuartCore（您忘记了字母“z”）。 - cldrr

在 iOS 7 中，您必须设置边框宽度，否则颜色不会生效。 - Micah

作为一个初学者，这对我来说毫无意义。如果我开始一个空白的应用程序，进入Storyboard并添加一个TextView字段。我在哪里导入quartzcore？我在哪里添加上面的borderwidth信息？"textField"是什么，它如何知道我正在谈论哪个文本字段？ - Nathan McKaskle

@Sephethus 如果你还没有弄清楚，这就是你需要做的：你需要“连接”在Storyboard中创建的文本字段，并通过编程方式更改这些属性。一旦你连接了Storyboard，你进入你的代码（例如在viewDidLoad中）并通过self.myTextField.layer.cornerRadius等语句来更改这些属性。这些更改将在启动应用程序时立即生效，但你无法在Storyboard中看到这些更改。如果这对你来说没有任何意义，我建议你去一个网站，例如Ray Wenderlich，阅读一些初学者教程。 - Aleksander

@NathanMcKaskle "我应该在哪里导入quartzcore?" 你需要将其添加到ViewController.h文件的顶部。*"textField是什么，它如何知道我在谈论哪个文本框？"* 你可以创建一个“本地”的textfield IBOutlet变量，并将其连接到你刚刚放置在Storyboard上的TextField（而不是TextView）。更多信息，请查看这里：http://hubpages.com/technology/IOS-5-A-Beginners-Guide-to-Storyboard-Connection。*"我应该在哪里添加上面的borderwidth信息？"* 任何地方都可以，但最好在viewDidLoad函数中添加。 - Chen Li Yong

Answer 2

试试这个：

UITextField *theTextFiels=[[UITextField alloc]initWithFrame:CGRectMake(40, 40, 150, 30)];
    theTextFiels.borderStyle=UITextBorderStyleNone;
    theTextFiels.layer.cornerRadius=8.0f;
    theTextFiels.layer.masksToBounds=YES;
        theTextFiels.backgroundColor=[UIColor redColor];
    theTextFiels.layer.borderColor=[[UIColor blackColor]CGColor];
    theTextFiels.layer.borderWidth= 1.0f;

    [self.view addSubview:theTextFiels];
    [theTextFiels release];

并且导入QuartzCore：

#import <QuartzCore/QuartzCore.h>

- iOSPawan

Answer 3

导入以下类：

#import <QuartzCore/QuartzCore.h> 

//用于将文本字段的边框设置为灰色的代码

[[textField layer] setBorderColor:[[UIColor colorWithRed:171.0/255.0
                                                   green:171.0/255.0
                                                    blue:171.0/255.0
                                                   alpha:1.0] CGColor]];

将171.0替换为所需的颜色编号。

- james lobo

Answer 4

Swift 5.0更新

textField.layer.masksToBounds = true
textField.layer.borderColor = UIColor.blue.cgColor
textField.layer.borderWidth = 1.0

- Hugo Jordao

---

这是最简单的答案。不再需要导入QuartzCore了。 - Wyatt

Answer 5

这个问题在谷歌搜索中排名很高，大部分都是有效的！不过我发现 Salman Zaidi 的回答只适用于 iOS 7。

你需要对 "reverting" 代码进行修改。我发现以下代码可以完美地恢复：

textField.layer.cornerRadius = 0.0f;
textField.layer.masksToBounds = YES;
textField.layer.borderColor = [[UIColor blackColor] CGColor];
textField.layer.borderWidth = 0.0f;

我理解这很可能是由于iOS 7的更改所致。

- Jovin J

Answer 6

如果您想使用带圆角的文本框，请使用以下代码：

    self.TextField.layer.cornerRadius=8.0f;
    self.TextField.layer.masksToBounds=YES;
    self.TextField.layer.borderColor=[[UIColor redColor]CGColor];
    self.TextField.layer.borderWidth= 1.0f;

去除边框:

self.TextField.layer.masksToBounds=NO;
self.TextField.layer.borderColor=[[UIColor clearColor]CGColor];

- StefanLdhl

Answer 7

为了简化接受答案中的这些操作，您还可以为UIView创建类别（因为它适用于所有UIView的子类，而不仅仅是文本字段）：

UIView+Additions.h:

#import <Foundation/Foundation.h>

@interface UIView (Additions)
- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width 
                   radius:(float)radius;
@end

UIView+Additions.m：

#import "UIView+Additions.h"

@implementation UIView (Additions)

- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width
                   radius:(float)radius
{
    self.layer.cornerRadius = radius;
    self.layer.masksToBounds = YES;
    self.layer.borderColor = [color CGColor];
    self.layer.borderWidth = width;
}

@end

用法：

#import "UIView+Additions.h"
//...
[textField setBorderForColor:[UIColor redColor]
                       width:1.0f
                      radius:8.0f];

- skywinder

Answer 8

borderColor 属性可以在任何视图（或UIView子类）上通过少量代码和Storyboard设置，并且如果您要在多个UI对象上设置边框颜色，则此方法非常方便。

以下是实现的步骤：

1. 在CALayer类上创建一个分类。 声明一个适当名称的UIColor类型的属性，我将名字命名为borderUIColor。
2. 编写此属性的setter和getter方法。
3. 在“setter”方法中，只需将图层的“borderColor”属性设置为新颜色的CGColor值即可。
4. 在“getter”方法中，返回具有图层边框颜色的UIColor。

P.S：请记住，分类不能具有存储的属性。“borderUIColor”用作计算的属性，仅作为实现我们关注点的参考。

请查看下面的代码示例；

Objective C:

接口文件：

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer (BorderProperties)

// This assigns a CGColor to borderColor.
@property (nonatomic, assign) UIColor* borderUIColor;

@end

实现文件：

#import "CALayer+BorderProperties.h"

@implementation CALayer (BorderProperties)

- (void)setBorderUIColor:(UIColor *)color {
    self.borderColor = color.CGColor;
}

- (UIColor *)borderUIColor {
    return [UIColor colorWithCGColor:self.borderColor];
}

@end

Swift 2.0:

extension CALayer {
var borderUIColor: UIColor {
    set {
        self.borderColor = newValue.CGColor
    }

    get {
        return UIColor(CGColor: self.borderColor!)
    }
}
}

最后前往您的故事板/XIB，按照剩余步骤执行；

5. 单击要设置边框颜色的视图对象。
6. 点击“属性检查器”（从左边数第三个）在“实用工具”面板中。
7. 在“用户定义的运行时属性”下，点击“+”按钮添加一个关键路径。
8. 将关键路径的类型设置为“Color”。
9. 将关键路径的值输入为“layer.borderUIColor”。[请记住，这应该是您在类别中声明的变量名，而不是此处的“borderColor”，这里应该是“borderUIColor”。]
10. 最后选择任何您想要的颜色。

您必须将layer.borderWidth属性值设置为至少1才能看到边框颜色。

构建并运行。 愉快编码。:)

- Rameswar Prasad

---

请勿在多个问题中发布相同的答案。发表一个好的答案，然后投票/标记关闭其他重复的问题。如果问题不是重复的，请根据问题量身定制您的答案。 - josliber

Answer 9

extension UIView {
    func addBorder(_ width: CGFloat = 1, color: UIColor = .black, cornerRadius: CGFloat = 4) {
        layer.borderWidth = width
        layer.borderColor = color.cgColor
        layer.cornerRadius = cornerRadius
    }
}

调用方式如下： email.addBorder(1.0，color: .blue，cornerRadius: 5)。

- meow2x