Knob gets clipped by control frame

[yarivadam]

When adding a UICircularRingValueKnobStyle to the valueKnobStyle property, the knob gets truncated by the control frame (see attached image - I added one where I set the backgroundColor of the UICircularProgressRing to orange for clarity).
I tried setting clipToBounds = false on the UICircularProgressRing but that didn't work. Clipping also happens when the knob is smaller.
How do I add a knob without it being clipped?

Thanks!

[Luis Padron]

This looks like a bug in the way we determine the frame for drawing. For now you can add some padding to the view (either enclose it in another view, or set proper constraints).

[yarivadam]

Thanks for the reply!
Perhaps it's just my lack of experience, but adding padding doesn't seem to be that easy... let me explain:
If I embed the view as a subview of another one (which it is anyway), the clipping will still occur. If I enlarge the control frame itself, the circle and the knob will just be enlarged themselves, and the knob is still clipped.
I thought that the "path" parameter to UICircularRingValueKnobStyle sets the path the knob makes around the circle, so I tried to set that to a BezierPath of a smaller circle within the view, but I realized I'm probably misunderstanding the role of that parameter.
Can you please let me know if I'm off in my understanding? Is there another way to avoid clipping? I'm using the onTop style for the ring.

[Luis Padron]

Could you see if #219 fixes the issue for you, may have to point to that branch for testing

[yarivadam]

It did solve the clipping issue - thanks! However, as you can see, this means the progress circle's radius is reduced, which means that you can no longer count on it being precisely inscribed in the frame you set for it. A solution allowing the knob image to extend beyond the frame without clipping would be preferable in my humble opinion, but hey, that's just a suggestion, not a complaint. I can now continue my app. Thanks again! Looking forward to this fix being included in the main Cocoapods distribution!

[Luis Padron]

Glad it worked! As for making the knob be outside the frame, I believe this might be problematic since then it requires setting proper constraints to account for this instead of simply making the view bigger. Also, I did not reply to your other points the other day but the path parameter is used if you wanted to draw something custom. Let's say you wanted a square instead of an oval you could return UIBezierPath(roudedRect: rect, cornerRadius: 8) for example, and it will draw that shape instead of an oval. You can also set the size of the knob in that call.

Since this is now fixed I will close this, will get it pushed to the cocoapods trunk asap.

[yarivadam]

Luis,
I noticed a weird issue that I think may have something to do with the fix you implemented. I think you may want to look into it.
When switching states in my application I use some animations when removing some UI controls. So when I switch from a "playing" state to "stopped", for example, I want the progress ring to fade, and then I remove it, using something like this:

`UIView.animate(withDuration: 0.4, delay: 0.0, options: .curveEaseOut, animations: {

             self.progressRing.alpha = 0.0

            }) { (success) in

                self.progressRing.resetProgress()
                self.progressRing.removeFromSuperview()

`

However, when I do that, the animation block never gets to the completion block! what I see is that the alpha property was set on the progress ring (it disappears), but the knob remains visible and is unaffected. I'm not sure what's going on, but because of the strange behavior of the knob not getting the alpha set to 0 I'm assuming it may have something to do with your code change.

I wasn't sure if to write this here (for context) or open a new issue.

Regards,

Yariv.

[Luis Padron]

Available in 6.5.0