0

I'm trying to setup a new feature walkthrough for my users, and as part of that I'd like to draw a circle around a relevant UI element. I'm trying to draw a circle around a UIBarButtonItem in the upper right of the NavigationBar, but when I translate the frame coordinates to the main window, something in the math isn't right and the red circle is offset too far to the right.

In the screenshot, I'm trying to draw a red circle around the second button (the one the popover is pointing at), but when I translate the coordinates, it actually draws around the 3rd button. When I run the same code on the first button (the search magnifying glass) it works just fine and the red circle is drawn correctly.

Nav bar image with four buttons, third one with a red circle around it, and popover arrow pointing to second button

In my code, I'm just grabbing the barButtonItem from the popover, and I've verified it points to the correct button.

if let buttonItem = self.popoverPresentationController?.barButtonItem {
        
    if let view = buttonItem.value(forKey: "view") as? UIView,
        let mainView = containingViewController?.navigationController?.view {

        let viewFrame = view.frame
        print("viewFrame: \(viewFrame)")
            
        // This should be translating coords to the main window.
        let windowRect = view.convert(viewFrame, to: nil)
 
        print("Window RECT \(windowRect)")

        let circlePath = UIBezierPath(ovalIn: windowRect)
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circlePath.cgPath
                
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.lineWidth = 3.0
        mainView.layer.addSublayer(shapeLayer)
     }
  }

I print out the view's frame, and those numbers seem correct, but the translated windowRect is off when it's not the left most button in the navbar.

For the search button (the left most one in the screenshot):

viewFrame: (0.0, 0.0, 46.0, 44.0)
Window RECT (617.0, 27.0, 46.0, 44.0)

For the second button (the one pointed to by the popover in the screenshot), Window RECT is offset by 108 instead of 54 as expected:

viewFrame: (54.0, 0.0, 46.0, 44.0)
Window RECT: (725.0, 27.0, 46.0, 44.0)

Each UIBarButtonItem is 46 wide, and I assume spacing in between of 8. That gives the starting x of 54.0 in the second set of numbers. But when translated to the Window coordinates, somehow that becomes a difference of 108; so it's offset by a whole button. I've tried to target the 3rd and 4th buttons, and it's always off by one full button width. As you can see the red circle is centered on the 3rd button, but that's not the one I'm trying to highlight.

I've tried to translate to mainView instead of to: nil when doing view.convert, but it doesn't make any difference. The numbers come back exactly the same. Any thoughts on what I'm doing wrong, or is this a but (known or otherwise) and I'm going to have to do crazy things in my code to make it work right?

Updated to add: If I remove the translation, and just put the layer in the superview of the view I found:

let circlePath = UIBezierPath(ovalIn: viewFrame)
 // code to create shapelayer
view.superview?.layer.addSublayer(highlightItemLayer!)

Then it's displaying in the correct location. I'd like it to be higher in the view hierarchy so I can draw it on top of other things; so still want to be able to do the translation if possible.

N.W
  • 672
  • 2
  • 8
  • 19
  • You sure it's not a retina thing? – Paul Janssens Aug 31 '20 at 08:27
  • I'm testing in the simulator on an ipad pro 11" using iOS 13.3. How would I determine if it was a retina thing? Another field I'm trying to draw around is also coming out shifted down and to the right a bit on the same simulator. It's making me think the translation isn't taking into account a margin or something. I've done other similar translations when the user taps on the screen though and those have been fine. – N.W Aug 31 '20 at 16:25
  • When I remove the translation on the 2nd field (not a UIBarButtonItem) its working perfectly. something is definitely off in how I'm doing the translation, or how the translation is happening. – N.W Aug 31 '20 at 16:38

1 Answers1

0

I think I've solved this. I changed the convert line from let windowRect = view.convert(viewFrame, to: nil) to use the superview instead of just on the view:

let windowRect = view.superview?.convert(viewFrame, to: nil)

and now the red circle is showing up in the appropriate location (note I've also increased the size of it by using translatedFrame.insetBy(dx: -10, dy: -10) on the windowRect before creating the path.

red circle on correct icon

N.W
  • 672
  • 2
  • 8
  • 19