Circle Button on iOS

Question

Can I create the two buttons shown below? It might seem that you should use UIButton or UIImageView, but if I click on area 1, it still acts like the button 1 is clicked. Button 2 should be started when I click on area 1!

Answer 1

Failure to comply with the above answers is valid; you can implement a custom subclass of UIButton that overrides pointInside:withEvent:

Assuming your view is exactly square in value and the graphic is exactly circular and fills the whole square, an example might be:

 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { // check that the point is at least inside the normal rect if(![super pointInside:point withEvent:event]) return NO; // we'll assume a square view with an exact circle inside, so // the radius of the circle is just half the width CGFloat radius = self.bounds.size.width*0.5f; // the point (radius, radius) is also the centre of the view, so... CGFloat squareOfDistanceFromCentre = (radius - point.x)*(radius - point.x) + (radius - point.y)*(radius - point.y); // if the point is too far away, return NO if(squareOfDistanceFromCentre > radius*radius) return NO; // otherwise we've exhausted possible reasons for answering NO return YES; } 

Answer 2

You can make a circular button by cutting off the layer and setting the radius of your button.

[[button layer] setCornerRadius: 8.0f];

You can also try with a radius of change.

Answer 3

Yes, of course it is.

You can connect one action with more than one selector via IB.
You can also directly call the method launched by button2 inside the method launched by button1.

Answer 4

It is rather complicated, but possible: you can use only one button, but put some validation after the touchUpInside event. You must calculate whether this touch point is inside the circle "button1". For this task you need to have some mathematical knowledge - How to calculate a point on the circumference of a circle?

Answer 5

Set userInteractionEnabled to NO for the smaller button 1. All events will go to the larger button 2.

Answer 6

For this I created two round rectangular buttons, one of which is long and thin, and the other is wider. Together they build a shape resembling a puffy plus sign, which is pretty close to a circle, given that the apple takes 44 px as a minimum size with the possibility of compressibility. If you want the image to change, set another image in its View image for the selected state and connect a few actions (a touch will not be enough if you want the simulate buttons to display the state on the image) of the two buttons. Alternatively, you can add observers and change the highlighted state of the image according to the buttons

Answer 7

The clean way to deal with pointInside on a circular button is as follows:

 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { if (![super pointInside:point withEvent:event]) { return NO; } BOOL isInside = (pow((point.x-self.frame.size.width/2), 2) + pow((point.y - self.frame.size.height/2), 2) < pow((self.frame.size.width/2), 2)) ? YES:NO; return isInside; } 

You can cut the "isInside" variabe, but this method is easier to test.