Programmatically create UIButtons on CircleImage

Question

I need to create Arch shaped UIButtons, on a circle image.(the O/p need to look like Concentric Circles),

At present I am using 5 images, but in future I may add some more Images, Dynamically I need to fil the circle Image with the added images.

I had a sample Piece of code and O/P is the below image

int numberOfSections = 6;
    CGFloat angleSize = 2*M_PI/numberOfSections;
 for (int j = 0; j < numberOfSections; ++j) {
        UIButton *sectionLabel = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 150.0f, 2.0f)];
sectionLabel.backgroundColor = [UIColor redColor];
 sectionLabel.layer.anchorPoint = CGPointMake(1.0f, 0.5f);
        sectionLabel.layer.position = CGPointMake(container.bounds.size.width/2.0, container.bounds.size.height/2.0); // places anchorPoint of each label directly in the center of the circle.
        sectionLabel.transform = CGAffineTransformMakeRotation(angleSize*j);
        [container addSubview:sectionLabel];
    }

Image for Above Code

I have tried with this piece of code and the O/P is the below image

 int numberOfSections = 5;
    CGFloat angleSize = 2*M_PI/numberOfSections;
    for (int j = 0; j<numberOfSections; ++j) {
        UIImage *imageframe = [imagesArray objectAtIndex:j];
OBShapedButton *button = [[OBShapedButton alloc] initWithFrame:CGRectMake(0.0f, 150.0f, 150.0f, 128.0f)];
button.transform = CGAffineTransformMakeRotation(angleSize*j);
[container addSubview:button];
}

2nd Image

I need my output as the below image 3rd Image

How can i Achieve that

O/P after I Tried with Sarah Zuo's code

Sarah Zuo Code

same width and height buttons Sarah Zuo code 2nd answer
AnyKind of Help is more Appreciated

will the new images get added in the same circle reducing the current arc of the existing imageviews?? — AppleDelegate, Sep 25 '12 at 09:19
@AppleDelegate : Yes, we will be giving the images count so that it makes the division — Srinivas, Sep 25 '12 at 09:40

score 4 · Answer 1 · answered Sep 25 '12 at 09:47

4

I can answer only last part,

If you are able to get images for buttons, then you can refer this tutorial. This might help you. Provided, your image formed is having transparent background.

answered Sep 25 '12 at 09:47

DivineDesert

6,924
1
29
61

@CrazyCreator : I am just placing the images for the button background , but how can i get the buttons in circle type. – Srinivas Sep 25 '12 at 11:05
U can never create a circular shaped button, this is the hack you need. keep other parts transparent, and ur button will look like circular. – DivineDesert Sep 25 '12 at 11:08

Sarah Zuo · Answer 2 · 2012-09-26T06:02:12.820

2

float radius = container.bounds.size.width / 2;
int numberOfSections = 5;
CGFloat angleSize = 2*M_PI/numberOfSections;
for (int j = 0; j<numberOfSections; ++j) {
    UIImage *imageframe = [imagesArray objectAtIndex:j];
    OBShapedButton *button = [[OBShapedButton alloc] initWithFrame:CGRectMake(0.0f, 150.0f, 150.0f, 128.0f)];

    button.transform = CGAffineTransformMakeRotation(2*M_PI-angleSize*j);
    button.center = CGPointMake(radius + radius * sin(angleSize * j) / 2, radius +  radius * cos(angleSize * j) / 2);
    [container addSubview:button];
}

Try this code.

edited Sep 26 '12 at 06:02

answered Sep 25 '12 at 09:57

Sarah Zuo

41
3

Now when i tried with ur code , i got inside part as pentagon – Srinivas Sep 25 '12 at 10:12
when i am trying with this piece of code, i am getting the inner part as the pentagon, where the buttons are coming to outer part of the circle – Srinivas Sep 25 '12 at 11:18
I have updated my answer Can u please check the last screenshot in the Question – Srinivas Sep 26 '12 at 05:30
It seems I used wrong value for button.center and button.transform. I fixed the center value, but slices of button is confused. – Sarah Zuo Sep 26 '12 at 06:00
yeah i hope, can u check that once if possible, i am trying that with different values, i am not getting the right output could u check that – Srinivas Sep 26 '12 at 06:29

score 1 · Answer 3 · edited May 23 '17 at 12:07

1

You can use your UIImageView instead. You can give different tag to image view and add Gesture Recognizer. Now you can get touch events like button click event on image views.

edited May 23 '17 at 12:07

Community

1
1

answered Sep 25 '12 at 09:18

Maulik

19,348
14
82
137

The Circle Image is one UIImageView, – Srinivas Sep 25 '12 at 09:44

Sarah Zuo · Answer 4 · 2012-09-26T07:18:01.460

1

If all buttons' image look like the one (same direction), the transform value may be work.

button.transform = CGAffineTransformMakeRotation(2*M_PI-angleSize*j);
button.center = CGPointMake(radius + radius * sin(angleSize * j) / 2, radius +  radius * cos(angleSize * j) / 2);

button slice

edited Sep 26 '12 at 07:18

answered Sep 26 '12 at 06:12

Sarah Zuo

41
3

though the buttons have the same widtha dn height i am getting same type, i shall i add that image too, please check the image lastly added in 2 mins – Srinivas Sep 26 '12 at 06:31
@Srinivas , anything going to be better? – Sarah Zuo Sep 26 '12 at 09:42

Programmatically create UIButtons on CircleImage

4 Answers4