How to detect circular gesture via Gesture Recognizer?

Question

I am trying to implement a volume-control-like round button. Currently I can detect swipes by the Gesture Recognizer. How can I detect a circular gesture (clockwise and anti-clockwise) on the button? Thanks!

Answer 1

Are you looking for a one-touch gesture (like a circular slider), or a two-touch gesture (like grabbing and turning a real-world knob)? If the latter, take a look at UIRotationGestureRecognizer.

If the former, you're pretty much on your own. You can certainly implement your solution as your own custom gesture recognizer: this is expected by Apple, and there's some documentation to get you started (though I haven't seen many working examples out there). See also How to correctly subclass UIGestureRecognizer.

As a general approach, I'd think of the region for the gesture as a donut shape: a zone with center c, inner radius r1, and outer radius r2. When the user touches down you can calculate the distance from c using the Pythagorean theorem, and the angle with your favorite trig function. With that, you can determine whether the touch is within the zone. As the user drags, you can update the control value based on the angle. At some point, they'll either touch up, or drag outside of the zone, and that will end the gesture. I suggest allowing the touch to stray pretty far inside r1 or outside of r2: fingers are imprecise tools.

Answer 2

As failing to find a solution, and by logical inspiration from @sixten's answer, I've gone and created something useful, it's not bullet proof, but it seems to do what I need for now.

Please anyone, fork it, clone it, use it, improve it, it's open source, here's my repo link:

https://bitbucket.org/danielphillips/dpcirculargesturerecognizer

Answer 3

Have you tried writing your own gesture recognizer? There are detailed instructions in the docs.

Answer 4

Best Way would be implement Custom Gesture Recognizer. I do not know if you wish to detect a Discreet Gesture (Event Handling method would be called once the full circle has been detected) or a Continues Gesture (Event Handling method would be called every time you move your finger on a circular Path).

Probably, the user may not draw a perfect circle, and the solution provided by @Sixten Otto would be good.