Draw dotted line at bottom of UITextField

Question

I am trying to draw a dotted line at bottom of UITextField, but not got success. Below is what i tried so far. Please guide.

func addDashedBorder() {


    let color = UIColor.white.cgColor
        let width = CGFloat(2.0)

        let shapeLayer:CAShapeLayer = CAShapeLayer()
        let frameSize = self.frame.size
        let shapeRect = CGRect(x: 0, y: frameSize.height, width: frameSize.width, height: 2.0)

        shapeLayer.bounds = shapeRect
        shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height - width)
        shapeLayer.fillColor = UIColor.darkGray.cgColor
        shapeLayer.strokeColor = color
        shapeLayer.lineWidth = 2.0
       // shapeLayer.lineJoin = kCALineJoinRound
        shapeLayer.lineDashPattern = [6,3]
        shapeLayer.path = UIBezierPath(rect: shapeRect).cgPath//UIBezierPath(roundedRect: shapeRect, cornerRadius: 0).cgPath

        self.layer.addSublayer(shapeLayer)
    }
}

Output getting is:

Expected is:

Set the `shapeRect`. `height` to 1 instead of 2? It seems it's correctly drawing, but drawing again on the second point line (in y) with an offset that gives that weird result. — Larme, Oct 13 '17 at 14:03

Prashant Gaikwad · Answer 1 · 2017-10-13T14:59:28.237

Try this

Use dot image :

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

Updated:

Use extension below

mytextfield.addDashedLine(strokeColor:.red,lineWidth:1)

extension UIView {
    func addDashedLine(strokeColor: UIColor, lineWidth: CGFloat) {
        backgroundColor = .clear
        let shapeLayer = CAShapeLayer()
        shapeLayer.name = "DashedTopLine"
        shapeLayer.bounds = bounds
        shapeLayer.position = CGPoint(x:30, y: 40)
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = strokeColor.cgColor
        shapeLayer.lineWidth = lineWidth
        shapeLayer.lineJoin = kCALineJoinRound
        shapeLayer.lineDashPattern = [4, 4]

        let path = CGMutablePath()
        path.move(to: CGPoint.zero)
        path.addLine(to: CGPoint(x:500, y: 0))
        shapeLayer.path = path
        layer.addSublayer(shapeLayer)
    }
}

Ohh just saw your answer. You also did same. great. Happy coding — Prashant Gaikwad, Oct 13 '17 at 15:08

score -1 · Answer 2 · answered Oct 13 '17 at 14:11

Finally fixed:

extension UIView {
func addDashedLine(strokeColor: UIColor, lineWidth: CGFloat) {

    backgroundColor = .clear

    let shapeLayer = CAShapeLayer()
    shapeLayer.name = "DashedTopLine"
    shapeLayer.bounds = bounds
    shapeLayer.position = CGPoint(x: frame.width / 2, y: frame.height * 1.2)
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = strokeColor.cgColor
    shapeLayer.lineWidth = lineWidth
    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineDashPattern = [6, 4]

    let path = CGMutablePath()
    path.move(to: CGPoint.zero)
    path.addLine(to: CGPoint(x: frame.width, y: 0))
    shapeLayer.path = path

    layer.addSublayer(shapeLayer)
}

}

Got help from here: [drawing dashed line using CALayer

]1

Draw dotted line at bottom of UITextField

2 Answers2