Draw grid of circles

Question

What would be the best way on iOS to achieve drawing a grid of circles with fixed columns and rows ?. I would want to identify each circle when the user taps on it. I tried using collection views but it seems CoreGraphics is meant for tasks like these.

Answer 1

You can create buttons dynamically as follows :

- (void)drawSheet
{
    int numberOfRow=5;
    int numberOfColumn=4;
    float x = 1,
            y = 20,
            padding = 5,
            width = (self.view.frame.size.width-(padding*(numberOfColumn-1)))/numberOfColumn,
            height = (self.view.frame.size.height-(padding*(numberOfRow-1)))/numberOfRow;
    int counter = 0;
    for (int i=0; i<numberOfRow; i++) {
        for (int j=0; j<numberOfColumn; j++) {
            UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(x, y, 74, 74)];
            btn.layer.cornerRadius = btn.frame.size.width/2;
            btn.layer.borderColor = [UIColor grayColor].CGColor;
            btn.layer.borderWidth = 2.0;
            [btn addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchUpInside];
            btn.clipsToBounds = YES;
            btn.tag = counter;
            [self.view addSubview:btn];
            x = x + width + padding;
            counter = counter + 1;
        }
        x = 0;
        y = y + height + padding;
    }
}

When you tap on it, you will get tag of it :

- (IBAction)buttonPress:(UIButton *)sender{
    NSLog(@"%ld",sender.tag);
}

Answer 2

hi Please check the below code. i have added 3 circles in a row, you could use more if you want.

   - (void)viewDidLoad {
        [super viewDidLoad];
        UIView *circleView;
        int x = 10;
        int y = 20;
        static int tagNum = 0;
        for (int row=0; row < 5;) {
            for (int cirNum =0 ; cirNum <3;) {

                circleView = [[UIView alloc] initWithFrame:CGRectMake(x,y,100,100)];
                circleView.alpha = 0.5;
                circleView.layer.cornerRadius = 50;
                circleView.backgroundColor = [UIColor blueColor];
                circleView.tag = tagNum;
                NSLog(@"tagNum is %d", tagNum);
                [self.view addSubview:circleView];

                cirNum ++;
                x = x + 100;
                tagNum ++;
                //y = y + 20;

            }
            row++;
            y = y + 100;
            x = 10;
        }
        // Do any additional setup after loading the view, typically from a nib.
    }


    -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint location = [[touches anyObject] locationInView:self.view];
    CGRect fingerRect = CGRectMake(location.x-5, location.y-5, 10, 10);

    for(UIView *view in self.view.subviews){
        CGRect subviewFrame = view.frame;

        if(CGRectIntersectsRect(fingerRect, subviewFrame)){
            //we found the finally touched view
            //NSLog(@"Yeah !, i found it %@",view);
            NSLog(@"view tag touched is %ld",view.tag);

        }

    }

}

output would look like this