使用Storyboard设置UITextField的边框颜色

Question

如果可能的话，我希望能够使用Storyboard设置边框颜色。我在这里看到了答案：UITextField border color

并且我按照答案在Storyboard中进行了设置：

所有属性都已设置，但TextField并未显示边框。有什么建议吗？

- katit

---

你可以查看如何在Storyboard中添加边框。 - iHulk

Answer 1

正如Bogdan所指出的，您可以通过简单的子类化和只需少量代码来实现这一点。之后，所有内容都可以在Storyboard中进行编辑。

1. 子类化UITextField
2. 创建两个属性，一个用于边框宽度，另一个用于边框颜色
3. 使这些变量IBInspectable并将整个类设置为IBDesignable
4. 您将能够实时更改边框的颜色和宽度，并查看更改。

说明代码（Swift 3.1）：

@IBDesignable
class FormTextField: UITextField {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            layer.borderColor = borderColor?.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
}

编辑：您将在属性检查器中看到此内容

- Markus

---

我不得不添加self.以使其变为self.layer.borderColor才能进行更改。但是当我这样做时，cornerRadius变为零。好像在尝试进行此更改时，该层的所有属性都被重置或创建了一个新层。 - David Rector

Answer 2

正如Bogdan所指出的那样，你无法在Storyboard中找到layer.borderColor属性，因为它是运行时的东西。

但是仍然可以通过一点编码，在任何视图（或UIView子类）上设置borderColor而不使用IB_DESIGNABLE。

以下是实现它的步骤：

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 3.1:

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

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

最后进入你的故事板/XIB，按照以下步骤进行：

5. 点击你想要设置边框颜色的视图对象。
6. 在“Utility”（屏幕右侧）面板中点击“Identity Inspector”（第三个选项）。
7. 在“User Defined Runtime Attributes”下，点击“+”按钮添加一个键路径。
8. 将键路径类型设置为“Color”。
9. 将键路径的值设置为“layer.borderUIColor”。[记住这应该是类别中声明的变量名称，而不是这里的borderColor，它是borderUIColor]。
10. 最后选择任何你想要的颜色。

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

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

- Rameswar Prasad

---

对于 Swift 3，您只需要在 Swift 2 版本中将所有 CGColor 实例替换为 cgColor 即可。 - CAD97

Answer 3

除了 Markus 之外，还需要添加完整的代码：

import UIKit //IMPORTANT
@IBDesignable
class BorderTextField: UITextField {
 @IBInspectable var borderColor: UIColor? {
    didSet {
        layer.borderColor = borderColor?.cgColor
    }
 }
 @IBInspectable var borderWidth: CGFloat = 0 {
    didSet {
        layer.borderWidth = borderWidth
    }
 }
}

- Gerardo Salazar Sánchez

Answer 4

我不确定您是否可以在Storyboard中更改UITextfield的边框颜色。您可以通过以下方式以编程方式更改它：

UITextField *myTextField = (UITextField *)[self.view viewWithTag:1];
myTextField.borderStyle = UITextBorderStyleLine;
myTextField.layer.borderWidth = 2;
myTextField.layer.borderColor = [[UIColor redColor] CGColor];

希望这能帮到您。

- Gismay

---

@katit - 这有帮助吗，还是你已经找到了在Storyboard中完成它的方法？ - Gismay

Answer 5

这是对@rameswar答案的改良，我认为它是正确的。由于我们正在应用UIColor，所以我认为最好为UITextField编写一个扩展（UI的东西在一起）：

extension UITextField {

  var borderColor : UIColor? {
    get {
      if let cgcolor = layer.borderColor {
        return UIColor(CGColor: cgcolor)
      } else {
        return nil
      }
    }
    set {
      layer.borderColor = newValue?.CGColor

      // width must be at least 1.0
      if layer.borderWidth < 1.0 {
        layer.borderWidth = 1.0
      }
    }
  }
}

运行时属性将是 borderColor（这样您就不需要键入 layer.，我认为它比 borderUIColor 更清晰）。 CALayer 的 borderColor 是可选的，因此它是该属性。当设置为 nil 时，它变为黑色。

最后，layer.borderWidth 设置为最小值 1.0，因为否则颜色未设置。

- FranMowinckel

Answer 6

由于 layer.borderColor 属性的缘故，它不显示任何边框。它是 CGColor 类型，运行时属性默认不支持它，因此，设置一个属性错误将禁用其他属性。

从 storyboard 中完成它，还涉及一些代码和子类化，您可以使用此方法：

子类化 UITextField 并制作一个 IB_DESIGNABLE UIColor 属性，然后将其转换为 CGColor 并应用于 self.layer.borderColor。

- Bogdan Raducan