CODEWITHSUNDEEP
iosobjective-cuitextfielduitextviewborder
brush51
brush51

Reputation: 5781

Dotted / Dashed border for UITextView / UITextField

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.

Upvotes: 5

Views: 8149

Answers (4)

dengST30
dengST30

Reputation: 4037

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
    }

}

Upvotes: 0

Meet Doshi
Meet Doshi

Reputation: 4259

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. :)

Upvotes: 8

Arnaud
Arnaud

Reputation: 17757

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

Upvotes: 4

Nekto
Nekto

Reputation: 17877

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.

Upvotes: 9

Related Questions