UIView subview being placed in unexpected position (Swift 4)

Question

I am attempting to add 4 UIView subviews to a UIImageView. These subviews are to act as nodes where a user can tap them and connect to other nodes. For example, they should look like this. Instead, they are looking like this.

My code for calculating the node positions is as follows:

func initializeConnectionNodes() {
        let imageCenter = self.imageView.center
        let xOffset = self.imageView.bounds.width/2 //distance from origin x-wise
        let yOffset = self.imageView.bounds.height/2 //distance from origin y-wise
        self.leftConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageCenter.x - xOffset, y: imageCenter.y))
        self.rightConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageCenter.x + xOffset, y: imageCenter.y))
        self.topConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageCenter.x, y: imageCenter.y + yOffset))
        self.bottomConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageCenter.x, y: imageCenter.y - yOffset))

        self.imageView.addSubview(self.leftConnectionNode!)
        self.imageView.addSubview(self.rightConnectionNode!)
        self.imageView.addSubview(self.topConnectionNode!)
        self.imageView.addSubview(self.bottomConnectionNode!)
}

My code for initialization of the UIView class is as follows:

class ConnectionNodeView: UIView {

var connectionPoint: CGPoint
fileprivate var circleLayer: CAShapeLayer?

init(connectionPoint: CGPoint) {
    self.connectionPoint = connectionPoint
    super.init(frame: CGRect(x: connectionPoint.x, y: connectionPoint.y, width: 0, height: 0))

    let circlePath = UIBezierPath(arcCenter: connectionPoint, radius: CGFloat(8), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)
    self.circleLayer = CAShapeLayer()
    self.circleLayer?.path = circlePath.cgPath
    self.circleLayer?.fillColor = UIColor.yellow.cgColor
    self.circleLayer?.strokeColor = UIColor.yellow.cgColor
    self.circleLayer?.lineWidth = 3.0
    self.layer.addSublayer(circleLayer!)
}

It is interesting to note that if I just add the CAShapeLayer as a sublayer to my UIImageView, it looks like it should. However, I need to implement it as a UIView so that I can use gesture recognizers easily. I found a dirty way of fixing it by dividing the coordinates by 100 in the initializer like this:

super.init(frame: CGRect(x: connectionPoint.x/100, y: connectionPoint.y/100, width: 0, height: 0))

However, I would rather do it correctly. What am I missing here? Thank you for your help.

Answer 1

You’re adding the views to your image view, but the imageCenter point is given according to the superview of the image view.

Replace the beginning of the initializeConnectionNodes function with the following:

let xCenter = imageView.bounds.width / 2
let yCenter = imageView.bounds.height / 2

leftConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: 0, y: yCenter))
rightConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: imageView.bounds.width, y: yCenter))
topConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: xCenter, y: 0))
bottomConnectionNode = ConnectionNodeView(connectionPoint: CGPoint(x: xCenter, y: imageView.bounds.height))

Also, you should replace the arc center of circlePath in your ConnectionNodeView subclass with CGPoint.zero, since it works with the coordinate system of the node view itself:

let circlePath = UIBezierPath(arcCenter: .zero, radius: 8, startAngle: 0, endAngle:CGFloat(Double.pi * 2), clockwise: true)