How can I add a UIBezierPath to a UIView that uses auto layout? - swift

Question

In my project I want to add a line to a UIView (this UIView uses auto layout).
I'm using UIBezierPath and CAShapeLayer to draw the line.
This is my code:
let myView = UIView()
self.view.addSubView(myView)
myView.translatesAutoresizingMaskIntoConstraints = false
myView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
myView.heightAnchor.constraint(equalToConstant: 40).isActive = true
myView.widthAnchor.constraint(equalToConstant: 100).isActive = true
myView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: myView.frame.height/2))
path.addLine(to: CGPoint(x: myView.frame.width, y: myView.frame.height/2))
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineWidth = 11.0
myView.layer.addSublayer(shapeLayer)
But my problem is no line shows in viewController.
When I use this code everything is OK and the line shows perfectly:
let myView = UIView(frame: CGRect(x: 0, y: 160, width: 100, height: 40))
self.view.addSubView(myView)
How can I solve this problem? I must use auto layout.

Answer 1

Your best bet is to use a custom UIView subclass and set your layer's path in layoutSubviews(). That way you get the proper frame when needed.
Here's a simple example:
class LineView: UIView {
let shapeLayer: CAShapeLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
layer.addSublayer(shapeLayer)
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineWidth = 11.0
}
override func layoutSubviews() {
super.layoutSubviews()
let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: bounds.midY))
path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.midY))
shapeLayer.path = path.cgPath
}
}
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let myView = LineView()
myView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(myView)
NSLayoutConstraint.activate([
myView.topAnchor.constraint(equalTo: self.view.topAnchor),
myView.heightAnchor.constraint(equalToConstant: 40),
myView.widthAnchor.constraint(equalToConstant: 100),
myView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
])
// if you want to see the frame of myView
//myView.backgroundColor = .yellow
}
}
Result - with yellow background so we can see the frame, and with your constraints (you probably want to use safeArea...):

Answer 2

I think I found your problem. You have defined a UIView with a frame of (0, 0, 0, 0). If you then draw a line in that view with the coordinates of that line related to that view, you get no line.
I assume that you want your view to be on 0, 160 with the height of 40 and width of 100. The line should then run from (0, 20) to (100, 20).
In that respect are your constraints not rightly set, since your view ends up in the top right outside the screen.
I made the following code that might help. You set your constraints how you like it.
Make a custom view (MyLineView) like this:
import UIKit
class MyLineView: UIView {
private let lineColor = UIColor.black
override func draw(_ rect: CGRect) {
let path = UIBezierPath()
lineColor.setStroke()
path.lineWidth = 11
path.move(to: CGPoint(x: self.frame.origin.x, y: self.frame.size.height / 2))
path.addLine(to: CGPoint(x: self.frame.size.width, y: self.frame.size.height / 2))
path.stroke()
print(self.frame)
}
}
Then you can code your view controller like this:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// let myView = UIView(frame: CGRect(x: 0, y: 160, width: 100, height: 40))
let myView = MyLineView()
let viewPositionX: CGFloat = 0
let viewPositionY: CGFloat = 160
let viewWidth: CGFloat = 100
let viewHeight: CGFloat = 40
let topConstraint = viewPositionY + viewHeight - self.view.frame.size.height
let widthConstraint = viewWidth - self.view.frame.size.width
myView.backgroundColor = UIColor.green
self.view.addSubview(myView)
myView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint(item: myView, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1, constant: viewPositionX).isActive = true
NSLayoutConstraint(item: myView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: viewPositionY).isActive = true
NSLayoutConstraint(item: myView, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: topConstraint).isActive = true
NSLayoutConstraint(item: myView, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1, constant: widthConstraint).isActive = true
}
}
I just added the green background color to see where the view is. This works on my phone. Hope this helps.