How to create buttons around circle with some radius

129 views Asked by At

i try to create programmatically a number of buttons. I what that buttons will created around the circle like on image 1. Now i have some results, i can rotate buttons, but don't know how to set offset between them. Now i have this result: image 2 Here is my code. And thanks for any help!

viewDidload in ViewController

 CGPoint point = self.view.center;

NSArray *arrayWithImages = @[@"red", @"pink", @"green", @"blue", @"purple", @"orange", @"yellow"];
NSArray *arrayWithAngle = @[@(0), @(M_PI / 3.8f), @(M_PI / 1.8), @(M_PI / -6), @(M_PI / 6), @(M_PI / -1.8), @(M_PI / -3.8)];

NSMutableArray *arrayWithPlacePoint = [self generatePointForRound:point andAngle:arrayWithAngle andRadius:25.0f];
NSLog(@"array with place point = %@", arrayWithPlacePoint);

for (NSInteger i = 0; i < [arrayWithImages count]; i++) {

    PetalObject *petal = [[PetalObject alloc] initWithImageName:arrayWithImages andRotation:arrayWithAngle andIndex:i andPointsArray:arrayWithPlacePoint andCentrPoint:point];
    [self.view addSubview:petal.petalButton];

}

I try to generate some x,y point which should be a creation point of each new button

- (NSMutableArray *)generatePointForRound:(CGPoint )centrPoint andAngle:(NSArray *)arrayAngle andRadius:(float)radiusValue {

CGPoint currentPoint;
NSMutableArray *array = [[NSMutableArray alloc] init];

for (int i = 0; i < [arrayAngle count]; i++) {

    CGFloat x1 = centrPoint.x + (radiusValue * sin([[arrayAngle objectAtIndex:i] doubleValue]));
    CGFloat y1 = centrPoint.y + (radiusValue * cos([[arrayAngle objectAtIndex:i] doubleValue]));

    currentPoint = CGPointMake(x1, y1);
    [array addObject:[NSValue valueWithCGPoint:currentPoint]];

}

return array;
}

And here is my PetalObject in which i create my buttons

-(id)initWithImageName:(NSArray *)imageNameArray andRotation:(NSArray *)angleArray andIndex:(NSInteger )index andPointsArray:(NSMutableArray *)pointsArray andCentrPoint:(CGPoint )centerPoint {

    self.isRecorded = NO;
self.isComplited = NO;

UIImage *image = [UIImage imageNamed:imageNameArray[index]];
CGPoint point = [[pointsArray objectAtIndex:index] CGPointValue];

self.petalButton = [[UIButton alloc] initWithFrame:CGRectMake(point.x - 43 , point.y - 180, 86, 168)];

//self.petalButton.transform = CGAffineTransformMake(cos(angle),sin(angle),-sin(angle),cos(angle),boundsPoint.x-boundsPoint.x*cos(angle)+boundsPoint.y*sin(angle),boundsPoint.y-boundsPoint.x*sin(angle)-boundsPoint.y*cos(angle));

[self.petalButton setBackgroundImage:image forState:UIControlStateNormal];
CGFloat angle = [[angleArray objectAtIndex:index] floatValue];
[self.petalButton setTransform:CGAffineTransformMakeRotation(angle)];

    return self;
}

Image 1:

image 1

Image 2:

image 2

1

There are 1 answers

2
Leo On BEST ANSWER

Screenshot

enter image description here

And code:

- (void)viewDidLoad {
    [super viewDidLoad];
    for (NSInteger index = 0; index < 6; index ++) {
        UIButton * button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 50, 20)];
        button.layer.anchorPoint = CGPointMake(-0.5, 0.5);
        button.backgroundColor = [UIColor greenColor];
        button.center = CGPointMake(self.view.center.x + CGRectGetWidth(button.frame) / 2.0, self.view.center.y);
        button.transform = CGAffineTransformMakeRotation(M_PI * 2 * index / 6.0);
        [self.view addSubview:button];
    }
}

The key point is anchorPoint, you set all the button with same anchorPoint and frame, then apply different transform.