Dotted / Dashed border for UITextView / UITextField

Question

I want to set a Dotted / Dashed border for my UITextField and UITextView.

How can I do that? I know that, I can set border with this line of code:

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

Notice: I already have the idea to add a UIImageView behind the UITextView and set there an image with dashed border. But I don't want to solve it that way.

Nekto · Accepted Answer · 2012-05-30T12:07:37.683

9

You could try, for example, next approach:

1) Create image that will represent your border (for example: one dot and space)

2) Add image to project.

3) Set border (as in code in your question) and set color with pattern:

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

As border is drawn along 4 sides (left, right, bottom, top) you should use square image: for example, pixel in middle is black and pixels around it are transparent. So copies of that image will be placed around the view.

edited May 30 '12 at 12:07

answered May 30 '12 at 09:08

Nekto

17,837
1
55
65

thats great way to do that, i will try that and if it works i will let you know. my aim was not to draw any picture in photoshop, so i can implement dashed lines with code and without any image. – brush51 May 30 '12 at 09:13
I know that dashed lines could be drawn using CoreText. But it won't help you in your case – Nekto May 30 '12 at 09:19
when i use your method it works(just have to add CGColor to get out the warning). but the left and right border of `UITextView` is not dashed. the picture is not rotated on the left and right borders. how to solve that? any idea? – brush51 May 30 '12 at 09:39
1

Hmm, yeah, I've forgot about left and right sides. Try to make image square: for example, pixel in middle is black and pixels around it are transparent. – Nekto May 30 '12 at 11:08
2

wow, thats a nice practice. thank you. add this lines to your answer so i can mark it as right answer: `[self.textFieldCardTitle.layer setBorderWidth:6.0]; [self.textFieldCardTitle.layer setBorderColor:[[UIColor colorWithPatternImage:[UIImage imageNamed:@"dashed_white.png"]] CGColor]];` **Please also write the square image to the answer so others can save time when they try the same.** – brush51 May 30 '12 at 11:29
Done. It is awesome that it works =) Thank you for testing =) – Nekto May 30 '12 at 12:08
In case anyone gets a bottom border that doesn't show up with this method, I had to adjust the bounds to add half the size of my border to the height... [myView.layer setBounds:CGRectMake(myView.bounds.origin.x, myView.bounds.origin.y, myView.bounds.size.width, myView.bounds.size.height+{half your border size})]; – marcfrodi Nov 05 '12 at 21:20
Very nice solution! Thanks!! I ended up setting the border width to 2 and I created an image 5x3 pixels (WxH) with a 3x1 dash centered in the middle, worked perfect. – RyanG Nov 20 '12 at 15:10

score 8 · Answer 2 · edited May 23 '17 at 10:32

Just use following code for Dotted / Dashed Border around UIView or UITextField or any other view:-

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;

For more details, Refer this Answer.

Hope, this is what you're looking for. Any concern get back to me. :)

Your answer is the best: simple, concise, elegant. Thanks! Definetely, it should be accepted answer. — mkll, Jan 10 '16 at 20:57

Arnaud · Answer 3 · 2014-12-01T16:23:59.237

4

Here's what I did with Swift:

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

Free bonus, I attached the pics below. Unless StackOverflow changes its background, you probably won't see them as they are white squares on a white background, so you'll find the urls below as well.

dot dot@2x dot@3x

https://i.stack.imgur.com/X7PfM.png -> rename it to dot.png
https://i.stack.imgur.com/IemhF.png -> rename it to dot@2x.png
https://i.stack.imgur.com/CSjZT.png -> rename it to dot@3x.png

edited Dec 01 '14 at 16:23

answered Dec 01 '14 at 16:12

Arnaud

17,268
9
65
83

I like this implementation. Customizable, short. I am trying to alter the code and images to give myself more of a dashed effect rather then dotted effect. Is this possible with this implementation? Have you tried doing such a thing? – levibostian Jul 31 '15 at 23:43
@levibostian I haven't, but it should be quite easy to turn the png dots into lines and see what it looks like :) – Arnaud Aug 01 '15 at 21:46

score 0 · Answer 4 · answered Aug 28 '20 at 03:32

Swift 5, for @Meet Doshi's answer

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
    }

}

Dotted / Dashed border for UITextView / UITextField

4 Answers4

Linked