12

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!

ohho
  • 50,879
  • 75
  • 256
  • 383

4 Answers4

15

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.

Community
  • 1
  • 1
Sixten Otto
  • 14,816
  • 3
  • 48
  • 60
  • A one-touch gesture (like a circular slider). – ohho Jan 05 '11 at 04:21
  • Then there's not so much in the way of a canned solution, from Apple anyway. As Alexsander Akers suggests, writing your own recognizer may be the way to go. Will edit in a little more to my answer shortly. – Sixten Otto Jan 05 '11 at 04:23
  • 1
    I like the donut solution a lot!! :D –  Aug 15 '12 at 02:44
  • Over a year on, surely someone has come up with a working solution. Seems I can't find anything on GitHub or anywhere. @ohho did you do anything ? Anything you can share ? – Daniel Aug 20 '12 at 17:18
  • FWIW, there was a session at this year's WWDC about writing gesture recognizers: https://developer.apple.com/videos/wwdc/2012/?id=233 Still not canned code, though. – Sixten Otto Aug 20 '12 at 21:05
  • 1
    I have created my own subclass, anyone is free to check it out but please if you spot an omission or can improve please do, open source ! https://bitbucket.org/danielphillips/dpcirculargesturerecognizer – Daniel Aug 20 '12 at 22:27
  • 2
    @Daniel, I used [KTOneFingerRotationGestureRecognizer][1] in my [app][2]. [1]: https://github.com/kirbyt/KTOneFingerRotationGestureRecognizer [2]: http://itunes.apple.com/app/minimalist-timer/id487145086?mt=8 – ohho Aug 21 '12 at 01:45
  • Oh great, looks like this is pretty simple. lacks a velocity which I have though, will use it for inspiration. I need a velocity for momentum animation when you let go. Got you app by the way. – Daniel Aug 21 '12 at 02:33
  • I made my own gesture recognizer in the end, check it out http://stackoverflow.com/a/12046115/662605 – Daniel Oct 09 '12 at 21:29
  • I'm implementing my own solution using a pan gesture recognizer. Here are the steps: 1) Note the starting touch location. 2) Calculate an average touch location from all the touches during the gesture. 3) Note the ending finger location. The result is a triangle, with one side from start to ending touch. Direction to average touch indicates the direction to the center of rotation. I will find the nearest valid point on that side of the line. The side also indicates the direction of rotation. – Victor Engel Nov 17 '18 at 16:00
7

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

Daniel
  • 23,129
  • 12
  • 109
  • 154
  • 1
    Hey Daniel, thanks for the code. It would be great if there were a license file, or licenses include in the code, just for bookkeeping purposes. – Farski Apr 22 '13 at 19:50
  • @Daniel - great, I've just tried it and it works totally ok!:) – sabiland Nov 21 '14 at 11:24
0

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

Alexsander Akers
  • 15,967
  • 12
  • 58
  • 83
0

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.

Sagar Ranglani
  • 5,491
  • 4
  • 34
  • 47