UITextView / UITextField的虚线/破折号边框

Question

我希望为我的UITextField和UITextView设置虚线/破折号边框。我该怎么做？我知道可以使用以下代码设置边框：

```swift textField.layer.borderWidth = 1 textField.layer.borderColor = UIColor.black.cgColor ```

但是如何设置虚线/破折号边框呢？

[self.textFieldCardTitle.layer setBorderWidth:1.0];
[self.textFieldCardTitle.layer setBorderColor:[[UIColor whiteColor] CGColor]];  

---

注意：我已经有了在UITextView后面添加UIImageView并设置一个带虚线边框的图片的想法。但我不想用这种方式解决问题。

- brush51

Answer 1

您可以尝试以下方法来实现边框效果：

1）创建代表您的边框的图像（例如：一个点和空格）。

2）将图像添加到项目中。

3）设置边框（如您问题中的代码所示），并使用图案设置颜色。

[self.textFieldCardTitle.layer setBorderWidth:6.0];
[self.textFieldCardTitle.layer setBorderColor:[[UIColor colorWithPatternImage:[UIImage imageNamed:@"dashed_white.png"]] CGColor]];

由于边框沿着4个面（左、右、底部、顶部）绘制，因此您应该使用正方形图像：例如，在中心的像素为黑色，周围的像素为透明。因此该图像的副本将放置在视图周围。

- Nekto

---

我知道可以使用CoreText绘制虚线。但这对你的情况没有帮助。 - Nekto

当我使用你的方法时，它可以工作（只需添加CGColor以消除警告）。但是UITextView的左右边框不是虚线。图片在左右边框上没有旋转。如何解决这个问题？有什么想法吗？ - brush51

嗯，是的，我忘记了左右两侧。尝试将图像变成正方形：例如，中间的像素为黑色，周围的像素为透明。 - Nekto

哇，这是一个不错的练习。谢谢你。请将以下代码添加到您的答案中，以便我可以将其标记为正确答案：[self.textFieldCardTitle.layer setBorderWidth:6.0]; [self.textFieldCardTitle.layer setBorderColor:[[UIColor colorWithPatternImage:[UIImage imageNamed:@"dashed_white.png"]] CGColor]]; 请注意，方形图像也已包含在答案中，以便其他人在尝试相同操作时可以节省时间。 - brush51

如果有人使用此方法无法显示底部边框，我必须调整边界以将我的边框大小的一半添加到高度中... [myView.layer setBounds:CGRectMake(myView.bounds.origin.x, myView.bounds.origin.y, myView.bounds.size.width, myView.bounds.size.height+{您的边框大小的一半})]; - marcfrodi

Answer 2

只需使用以下代码为UIView或UITextField或任何其他视图添加点状/虚线边框：

CAShapeLayer * _border = [CAShapeLayer layer];
_border.strokeColor = [UIColor redColor].CGColor;
_border.fillColor = nil;
_border.lineDashPattern = @[@4, @2];
[YOURVIEW.layer addSublayer:_border];

//for a square effect
_border.path = [UIBezierPath bezierPathWithRect:YOURVIEW.bounds].CGPath;
//for a rounded effect
//_border.path = [UIBezierPath bezierPathWithRoundedRect:YOURVIEW.bounds cornerRadius:txtUserName.frame.size.height / 2].CGPath;

_border.frame = YOURVIEW.bounds;

更多细节，请参考此答案。

希望这是你要找的内容。如有任何疑问，请与我联系。 :)

- Meet Doshi

---

你的回答是最好的：简单、清晰、优美。谢谢！毫无疑问，它应该被接受为答案。 - mkll

Answer 3

下面是我使用Swift的做法：

self.textFieldCardTitle.layer.borderWidth = 3
self.textFieldCardTitle.layer.borderColor = (UIColor(patternImage: UIImage(named: "dot")!)).CGColor

免费赠送的奖励，我已经附上了图片。除非StackOverflow更改它的背景，否则您可能看不到它们，因为它们是白色背景上的白色正方形，所以您也可以在下面找到URL链接。

点图示： 2倍点图示： 3倍点图示： 链接如下：

• http://i.stack.imgur.com/X7PfM.png -> 将其重命名为dot.png
• http://i.stack.imgur.com/IemhF.png -> 将其重命名为[e-mail]
• http://i.stack.imgur.com/CSjZT.png -> 将其重命名为[e-mail]

- Arnaud

---

我喜欢这个实现。可定制，简短。我正在尝试修改代码和图像，以使自己更具虚线效果而不是点状效果。这个实现是否可以实现？你有尝试过这样做吗？ - levibostian

@levibostian 我没有尝试过，但是将PNG点转换为线条并查看其外观应该非常容易 :) - Arnaud

Answer 4

针对@ Meet Doshi的回答，Swift 5

class CustomTextField: UITextField{

   let dashBorder = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: .zero)
        
        dashBorder.strokeColor = UIColor.lightGray.cgColor
        dashBorder.fillColor = nil
        dashBorder.lineDashPattern = [4, 2]
        layer.addSublayer(dashBorder)
    
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        dashBorder.path = UIBezierPath(roundedRect: bounds, cornerRadius: 5).cgPath
        dashBorder.frame = bounds
    }

}

- dengST30