UITextField边框颜色


133

我真的非常希望将自己的颜色设置为UITextField边框。但是到目前为止,我仅能找到如何更改边框线样式的方法。

我已经使用background属性以这种方式设置背景颜色:

self.textField.backgroundColor = textFieldColor;

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


许多有用的答案,但只有一个(stackoverflow.com/a/5387607/826946)提到了一些我发现的关键:textField.borderStyle = UITextField.BorderStyle.none。没有它,我将获得内置边框的痕迹。似乎一旦您不使用内置边框并开始定义自己的边框,您就需要说您不想使用borderStyle = none,然后定义所有参数(color,cornerRadius和borderWidth)
Andy Weinstein

Answers:


274

QuartzCore在您的课程中导入框架:

#import <QuartzCore/QuartzCore.h>

为了更改边框颜色,请使用以下代码段(我将其设置为redColor),

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

快速代码

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

3
它是#import <QuartzCore / QuartzCore.h>而不是QuartCore(您忘记了z)
cldrr 2012年

54
在iOS 7中,您必须设置边框宽度,否则颜色不会生效。
米卡2014年

1
作为初学者,这对我来说毫无意义。如果我启动一个空白的空应用程序,请转到情节提要,然后添加一个TextView字段。我应该在哪里导入quartzcore?我在哪里在上面添加borderwidth信息?什么是“ textField”,它怎么知道我在说哪个文本字段?
内森·麦卡斯克

1
@Sephethus如果你还没有想通出来呢,这是你必须要做的:你得“挂钩”你在故事板创建文本字段,并更改这些属性编程。连接好情节提要之后,您可以进入代码(例如中的viewDidLoad),并通过说出self.myTextField.layer.cornerRadiusetc来更改这些属性。这些更改将在启动应用程序后立即生效,但是您无法在情节提要中看到更改。如果这对您没有意义,建议您访问一个网站,例如Ray Wenderlich,并阅读一些初学者。
Aleksander 2015年

@NathanMcKaskle “我在哪里导入quartzcore?” 您将其添加到ViewController.h文件的顶部。“什么是“ textField”,它怎么知道我在说哪个文本字段?” 您可以创建一个“本地”文本字段IBOutlet var,并将其连接到刚刚放在情节提要上的TextField(不是TextView)。有关更多信息,请访问此处:hubpages.com/technology/… “我在上面的边界宽度信息添加到哪里?” 任何地方,但最好是在viewDidLoad函数。
陈李咏

21

试试这个:

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>

17

导入以下类:

#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根据需要替换为相应的颜色编号。


14

这个问题在Google搜索中的排名很高,并且在大多数情况下都是有效的!我确实发现Salman Zaidi的答案部分适用于iOS 7。

您需要对“还原”代码进行修改。我发现以下还原操作效果很好:

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

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


10

为了简化从接受的答案这个动作,你也可以创建类别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];

9

如果您使用带有圆角的TextField,请使用以下代码:

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

8

迅速更新5.0

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

4

任何视图(或UIView子类)上的borderColor也可以使用情节提要进行一些编码设置,如果您要在多个UI对象上设置边框颜色,则此方法非常方便。

以下是实现它的步骤,

  1. 在CALayer类上创建一个类别。声明一个具有合适名称的UIColor类型的属性,我将其命名为borderUIColor
  2. 为此属性编写设置器和获取器。
  3. 在“ Setter”方法中,只需将图层的“ borderColor”属性设置为新颜色CGColor值即可。
  4. 在“ Getter”方法中,返回带有图层的borderColor的UIColor。

PS:请记住,类别不能存储属性。'borderUIColor'用作计算的属性,仅作为实现我们关注的目标的参考。

请看下面的代码示例;

目标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,按照其余步骤进行;

  1. 单击要为其设置边框颜色的视图对象。
  2. 单击“实用程序”(屏幕的右侧)面板中的“身份检查器”(从左起第3个)。
  3. 在“用户定义的运行时属性”下,单击“ +”按钮以添加关键路径。
  4. 将关键路径的类型设置为“颜色”。
  5. 输入键路径的值作为“ layer.borderUIColor”。[请记住,这应该是您在类别中声明的变量名称,而不是borderColor,这里是borderUIColor ]。
  6. 最后选择您想要的任何颜色。

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

生成并运行。编码愉快。:)


请不要针对多个问题发布相同的答案。发布一个好的答案,然后投票/标记以将其他问题重复进行关闭。如果问题不是重复的,请定制对问题的答案
josliber

1

这是一个Swift实现。您可以进行扩展,以便其他视图可以使用它。

extension UIView {
    func addBorderAndColor(color: UIColor, width: CGFloat, corner_radius: CGFloat = 0, clipsToBounds: Bool = false) {
        self.layer.borderWidth  = width
        self.layer.borderColor  = color.cgColor
        self.layer.cornerRadius = corner_radius
        self.clipsToBounds      = clipsToBounds
    }
}

这样称呼: email.addBorderAndColor(color: UIColor.white, width: 0.5, corner_radius: 5, clipsToBounds: true)

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.