Circle button on iOS

Question

Is it possible to create two button shown as below image? It may seem like you should use UIButton or UIImageView but if i click to area 1, it stills acts as clicked to button 1. Button 2 should be fired when I click to the area 1 as well!

Answer 1

Failing the above responses being acceptable, you could implement a custom subclass of UIButton that overrides pointInside:withEvent:.

Assuming your view is exactly square and the graphic exactly circular and filling the entire 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 circular button by cutting the layer and set radius of you button.

[[button layer] setCornerRadius:8.0f];

you can also try with change radius.

Answer 3

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

Answer 4

I have created two round rect buttons for this purpose, one of them is long and thin, and the other one is more wide. Together they build a shape like a chubby plus sign, which is pretty close to a circle, considering apple accepts 44 px as the minimum confortably pressable size. If you want the image to change, set another image to its imageView for highlighted state and connect several actions (touchup wont be sufficient if you want to immitate buttons highlighted state on the image view)of the two buttons. Alternatively you can add observers and alter highlighted state of the imageview according to the buttons

Answer 5

A clean way to deal with pointInside on a circular button is this:

- (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 ditch the 'isInside' variabe, but this way is easier to test.

Answer 6

Yes, of course is possible.

You can connect a single action with more than one selector through IB.
You can also call directly the method fired by button2 from inside the method fired by button1.

Answer 7

It quite tricky, but possible: You can use only one button, but put some verification after event touchUpInside. You should calculate if this touch point are inside the circle of "button1". For this task you need to have some mathematic knowledge - How do I calculate a point on a circle’s circumference?