How to Create Button in in multiple row and column in iOS?

Question

I am stuck in this position from last 3 days. I am unable to find out how to solve this. I have multiple data in a array. According to data I have to create a route in my Application. I am creating the button in a for loop. but its coming one row by row. But my requirement is like, in every row it should be a opposite direction.

This is my requirement.

This purple color is my buttons, and red colors are path.

int x_pos = 40;
int y_pos = 50;
for (int i = 0; i < 5 ; i ++)
{
    UIButton *courseBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    courseBtn.frame = CGRectMake(x_pos, y_pos, 40, 40);
    courseBtn.backgroundColor = [UIColor purpleColor];
    [self.courseMapScroll addSubview:courseBtn];

    courseBtn.layer.cornerRadius = courseBtn.frame.size.height/2;
    courseBtn.layer.masksToBounds = YES;

    NSLog(@"x_pos == %d",x_pos);
    x_pos = x_pos + (SCREEN_WIDTH - 120);

    if (x_pos > 320)
    {
        x_pos = 40;
        y_pos = y_pos + 100;
    }
    [self.courseMapScroll setContentSize:CGSizeMake(SCREEN_WIDTH, y_pos + 70)];
}

My code is like this

Please anybody can help me. Please

Thanks alots

Answer 1

Here it is, exactly how you asked for it (with the green line that you requested in chat). Have fun tweaking the values :)

int numButtons = 6;
int yInterval = 100;
int leftX = 50;
int rightX = self.view.frame.size.width - leftX*2;
int lineWidth = 6;
int buttonRadius = 40;
int topMargin = 60;   

for (float i = 1; i < numButtons+1 ; i++) {
    float yPos = (ceil(i/2)-1)*yInterval+topMargin;
    BOOL isRightDirection = (fmod(ceil(i/2),2) == 1);
    BOOL isEven = (fmod(i,2) == 0);
    BOOL isOnLeft = (isRightDirection != isEven);
    float xPos = (isOnLeft) ? leftX : rightX;

    if (i != numButtons) {
        double nextUnlockedDecimal = (double)nextPercentUnlocked/100;
        UIView *redLine = [[UIView alloc] initWithFrame:CGRectZero];
        redLine.backgroundColor = [UIColor redColor];
        UIView *greenLine = [[UIView alloc] initWithFrame:CGRectZero];
        greenLine.backgroundColor = [UIColor greenColor];
        if (isEven) {
            //Vertical
            int xToUse = (isRightDirection) ? rightX : leftX;
            redLine.frame = CGRectMake(xToUse + buttonRadius/2 - lineWidth/2, yPos + buttonRadius/2, lineWidth, yInterval);
            if (i == latestUnlocked) {
                greenLine.frame = CGRectMake(xToUse + buttonRadius/2 - lineWidth/2, yPos + buttonRadius/2, lineWidth, nextUnlockedDecimal * yInterval);
            } else if (i < latestUnlocked) {
                greenLine.frame = redLine.frame;
            }
        } else {
            //Horizontal
            redLine.frame = CGRectMake(leftX + buttonRadius/2, yPos + buttonRadius/2 - lineWidth/2, rightX-leftX, lineWidth);
            if (i == latestUnlocked) {
                double greenLineX = (isRightDirection) ? leftX + buttonRadius/2 : rightX + buttonRadius/2 - nextUnlockedDecimal * (rightX-leftX);
                greenLine.frame = CGRectMake(greenLineX, yPos + buttonRadius/2 - lineWidth/2, nextUnlockedDecimal * (rightX-leftX), lineWidth);
            } else if (i < latestUnlocked) {
                greenLine.frame = redLine.frame;
            }
        }

        greenLine.layer.cornerRadius = 2.5;
        [self.view addSubview:redLine];
        [self.view addSubview:greenLine];
    }

    UIButton *courseBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    courseBtn.backgroundColor = [UIColor purpleColor];
    courseBtn.layer.cornerRadius = buttonRadius/2;
    courseBtn.layer.masksToBounds = YES;
    courseBtn.frame = CGRectMake(xPos, yPos, 40, 40);
    NSString *numStr = [NSString stringWithFormat:@"%i",(int)i];
    [courseBtn setTitle:numStr forState:UIControlStateNormal];

    [self.courseMapScroll setContentSize:CGSizeMake(SCREEN_WIDTH, yPos + 70)];
    [self.courseMapScroll addSubview:courseBtn];
}

Answer 2

I don't know why I really did that... This should work, I haven't tested it though... I would recommend you to use a global mutable array (courseButtons) to store the buttons so you can check on the target their index against the array and know which one was clicked.

CGFloat buttonHorizontalMargin=40;
CGFloat buttonVerticalMargin=50;
CGFloat buttonSize=40;

CGFloat x_pos = buttonHorizontalMargin;
CGFloat y_pos = buttonVerticalMargin;

[self.courseMapScroll setContentSize:CGSizeMake(self.courseMapScroll.bounds.size.width, y_pos + buttonSize+buttonVerticalMargin*0.5)];

for (NSInteger i = 0; i < [_buttonPoints count] ; i ++)
{
    UIButton *courseBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [courseBtn setTitle:[NSString stringWithFormat:@"%ld",(long)i] forState:UIControlStateNormal];
    [courseBtn setTranslatesAutoresizingMaskIntoConstraints:YES];
    [courseBtn setAutoresizesSubviews:(((i+1)%2==0&&(i+1)%4!=0)||(i+1)%3==0)?UIViewAutoresizingFlexibleLeftMargin:UIViewAutoresizingRightMargin];
    [courseBtn addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
    courseBtn.frame = CGRectMake(x_pos, y_pos, buttonSize, buttonSize);
    courseBtn.backgroundColor = [UIColor purpleColor];
    [self.courseButtons addObject:courseBtn];
    [self.courseMapScroll addSubview:courseBtn];

    courseBtn.layer.cornerRadius = courseBtn.frame.size.height*0.5;
    courseBtn.layer.masksToBounds = YES;

    NSLog(@"x_pos == %d",x_pos);
    if((i+1)%4){
        x_pos = buttonHorizontalMargin;
    }else if((i+1)%3||(i+1)%2){
        x_pos = self.courseMapScroll.bounds.size.width-buttonHorizontalMargin-buttonSize;
    }else{
        x_pos = buttonHorizontalMargin;
    }

    if (i>0 && i%2==0){
        y_pos = y_pos + buttonSize+buttonVerticalMargin;
        [self.courseMapScroll setContentSize:CGSizeMake(self.courseMapScroll.bounds.size.width, y_pos + buttonSize+buttonVerticalMargin*0.5)];
    }
}