Generate grid of buttons with two parameters for iOS - ios

Question

I need to generate a grid of buttons for an iOS app. Each button needs two parameters: the number of the column and the number of the row. A button will also have two states, activated and deactivated.
When the app is loaded I want there to be like 21 rows and 16 columns. And somewhere on the screen there will also be a button that says "add columns" and this would add 4 extra columns every time it's clicked.
Any suggestions how I should do this? I could start by adding the first 21*16 buttons with the IB but will that allow me to extend it with extra columns later on, and how?
Edit: the bounty was only started to reward mbm30075, no new answers necessary

Answer 1

I believe this is a more complete solution. Here's the .h/.m pair I wrote up for testing:
ViewController.h
#import <UIKit/UIKit.h>
#interface ViewController : UIViewController
#property (assign, nonatomic) int numColumns;
#property (assign, nonatomic) int numRows;
#property (strong, nonatomic) NSMutableArray *buttonsArray;
#property (strong, nonatomic) IBOutlet UIScrollView *scrollView;
#property (strong, nonatomic) IBOutlet UIButton *addButtons;
#property (strong, nonatomic) IBOutlet UIView *buttonsView;
- (IBAction)addFourMoreColumns;
#end
ViewController.m
#import "ViewController.h"
#implementation ViewController
#synthesize addButtons;
#synthesize buttonsArray;
#synthesize buttonsView;
#synthesize numColumns;
#synthesize numRows;
#synthesize scrollView;
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self setButtonsArray:[NSMutableArray array]];
[self setNumColumns:16];
[self setNumRows:21];
[self layoutButtons];
}
- (void)layoutButtons {
static int width = 100;
static int height = 37;
static int buffer = 8; // space between buttons (horiz. & vert.)
static int margin = 20;
CGPoint topLeft = CGPointMake(margin,margin); // standard "top left" in iOS
// Since you appear to be wanting to modify the number of columns,
// I'm going to make the multi-dimension array an array of columns,
// with each column containing an array of buttons (representing the rows)
// Iterate through how many columns SHOULD exist ([self numColumns])
for (int i = 0; i < [self numColumns]; i = i + 1) {
// Check if this "column" exists (does this index exist in [self buttonsArray]?)
if (i >= [[self buttonsArray] count]) {
// It doesn't exist, so we need to add a blank array
[[self buttonsArray] addObject:[NSMutableArray array]];
}
NSMutableArray *column = [[self buttonsArray] objectAtIndex:i];
// Now, we iterate through how many rows/buttons SHOULD exist ([self numRows])
for (int j = 0; j < [self numRows]; j = j + 1) {
// Check if this "row"/"cell"/"button" exists
if (j >= [column count]) {
// It doesn't exist, so we need to add a new button AND PLACE IT!
// Of course, you need to make your button type correctly
// This is just standard button code...
UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn setFrame:CGRectMake(topLeft.x,topLeft.y,width,height)];
// Do whatever else you need to do with the button...
// Set title...
[btn setTitle:[NSString stringWithFormat:#"(%d,%d)", i + 1, j + 1] forState:UIControlStateNormal];
// Add target actions...
[btn addTarget:self action:#selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
// Add the button to the view
[[self buttonsView] addSubview:btn];
// Add the button to the array
[column addObject:btn];
}
// Increment topLeft to the next "row" for correct button placement...
topLeft = CGPointMake(topLeft.x, topLeft.y + height + buffer);
}
// Increment topLeft to the next "column" for correct button placement...
topLeft = CGPointMake(topLeft.x + width + buffer, margin);
}
// So, I'm assuming your "add columns" button will be placed equivalent to
// "(columnCount + 1, 1)", or at the top of the screen, just to the right
// of the right-most column of buttons
// [self addButtons] is the property to the UIButton that calls [self addFourMoreColumns]
[[self addButtons] setFrame:CGRectMake(topLeft.x, topLeft.y, [[self addButtons] frame].size.width, [[self addButtons] frame].size.height)];
// Now, update the view that holds the buttons to give it a new size (based on the buttons added)
CGRect viewFrame = CGRectMake(0, 0, CGRectGetMaxX([[self addButtons] frame]) + buffer, 20 + ([[self buttonsArray] count] * (height + buffer)));
[[self buttonsView] setFrame:viewFrame];
[[self scrollView] setContentSize:viewFrame.size];
// Redraw the view...
[[self view] setNeedsDisplay];
}
- (IBAction)addFourMoreColumns {
[self setNumColumns:[self numColumns] + 4];
[self layoutButtons];
}
// Shows in the log which button you pressed: "(col, row)"
- (void)buttonPressed:(id)sender {
for (int i = 0; i < [[self buttonsArray] count]; i = i + 1) {
NSMutableArray *col = [[self buttonsArray] objectAtIndex:i];
for (int j = 0; j < [col count]; j = j + 1) {
if (sender == [col objectAtIndex:j]) {
NSLog(#"button (%d,%d) pressed", i + 1, j + 1);
break;
}
}
}
}
#end
Xib setup is basic with:
View // tied to [ViewController view]
|
--->ScrollView // tied to [ViewController scrollView]
|
--->View // tied to [ViewController buttonsView]
|
--->UIButton // tied to [ViewController addButtons]

Answer 2

this can be achieved using the scroll view UIScrollView and using two for loops to add required buttons at run time like
for(int col = 0; col < [max column]; col++)
{
for(int row = 0; row < [max row]; row++)
{
//add buttons assigning them proper frame size
}
}

Answer 3

You will need to add buttons programmatically using 2 loops. Also to identify the buttons assign them tags which are a number made by combination of column number and row number.
Eg:- button at row 1 and column 1 may have tag as 11.
Using the tag values you can identify which button is clicked and perform corresponding action.