Creating a quater-circle button?

Question

An app I'm doing requires a big round segmented button in the middle. Like this...

What! We are not allowed to attach or embed images?

OK you can see an examaple here:
h t t p s : / / w p h o s t . s p i d e r - e . c o m / n o n - w p / s p l o b _ f r e k k e r . p n g

(If you take out all the spaces.)

I'm wondering how you would layout the central segmented button?

It's a large circle. The circle is split into four equal quadrants, and each quadrant is a separare button. I guess I could just do 5-different full size images (one for each possible button press, and one for no-button-preseeed) and then do some kind of hit test to see which area of the circle had been clicked.

Or is there a way to draw a control which is non-linear in shape, like a quarter circle?

1.1k

Posted by

SpiderKenny

Reply

Add a Comment

Answer 1

Could you test what are the active area of each quarter circle ? I mean, do you need to click on the buttons label or in the full quarter circle ?

You can draw control of any shape.

Depending on what you want, you have several options.

The simplest:

put buttons inside the drawing and adjust their size to the maximum possible inside each quarter or not to overlap central part.

2. draw a view with subviews and attach tap gestures on each subview (2 subviews for the up and down).

3. Most complex, but best: Create a full blown custom control where you will test exactly the hit zone ; it will then return a code for the area : 1 to 4 for the quadrants, 5 and 6 for up and down arrows. And manage the hilite when you hit any subview for great user feedback.

I'll try to develop it, for fun and show when ready.

Posted by

Claude31

Add a Comment

Answer 2

Could you test what are the active area of each quarter circle ? I mean, do you need to click on the buttons label or in the full quarter circle ?

You can draw control of any shape.

Depending on what you want, you have several options.

The simplest:

put buttons inside the drawing and adjust their size to the maximum possible inside each quarter or not to overlap central part.

2. draw a view with subviews and attach tap gestures on each subview (2 subviews for the up and down).

3. Most complex, but best: Create a full blown custom control where you will test exactly the hit zone ; it will then return a code for the area : 1 to 4 for the quadrants, 5 and 6 for up and down arrows. And manage the hilite when you hit any subview for great user feedback.

I'll try to develop it, for fun and show when ready.

Posted by

Claude31

Add a Comment

Answer 3

No, attaching images does not work.

I did promise some code, here it is.
For sure it can be optimised, but this draws the control you want and can be parmeterized in IB.

You get the action selected returned in actionToExecute by attaching to the touchUpInside event:

Code Block     @IBAction func quadrantAction(_ sender: QuadrantControl) {
        print(sender.actionToExecute)
    }

Here is the class for the control ; i post in a file

Posted by

Claude31

Add a Comment

Answer 4

Code for control

Part 2: the attached file

Posted by

Claude31

Add a Comment

Answer 5

Hey - thanks!
Thanks for the detailed response - it's a great solution.

Posted by

SpiderKenny

Add a Comment

Answer 6

Hope the code worked well for you.

take care, if the ViewController is presented in Automatic Presentation (allowing for dismissing with swipe down), tapping in a control will scroll the view and not get you to cancel the control action.

A solution is to disable the VC vertical swipe if needed, with a call to a function as:

Code Block     func setPresentationModeOfParent(toModal: Bool) {
        
        let parent = self.parentViewController!
        parent.presentationController?.presentedView?.gestureRecognizers?[0].isEnabled = toModal
    }

I can show code if you need.

Posted by

Claude31

Add a Comment

Creating a quater-circle button?

Accepted Reply

Replies