How to create a grid of UIButtons with dynamic values in iOS? - ios

Question

I am trying to create a grid of UIButtons . The row and column values are dynamic.I know how to create a grid .However making it using dynamic values is the problem.
-(void)makeLayoutWithMinRow:(int)minRow maxRow:(int)maxRow minColumn:(int)minColumn maxColumn:(int)maxColumn {
NSInteger intLeftMargin = 10; // horizontal offset from the edge of the screen
NSInteger intTopMargin = 10; // vertical offset from the edge of the screen
NSInteger intYSpacing = 30; // number of pixels between the button origins (vertically)
NSInteger intXTile;
NSInteger intYTile;
NSInteger width;
width = ((self.layoutView.frame.size.width-(maxColumn * 5))/maxColumn);
for (int y = minRow; y < maxRow; y++)
{
for (int x = minColumn; x < maxColumn; x++)
{
intXTile = (x * width) + intLeftMargin;
intYTile = (y * intYSpacing) + intTopMargin;
UIButton *buttons[x][y] = [[UIButton alloc] initWithFrame:CGRectMake(intXTile, intYTile, width, 15)];
//Here I get error : Variable-sized object may not be initialised.
[self.layoutView addSubview:buttons[x][y]];
}
}
}
I did try the option as suggested by Cornelius below to store the button in array.
sButton = [[UIButton alloc] initWithFrame:CGRectMake(intXTile, intYTile, width, 15)];
[buttons addObject:sButton];
How to add these buttons to view in this case?
for (UIButton *obj in buttons) {
[self.layoutView addSubview:obj]; //Doesn't work
}

Answer 1

Here is the one which replaces UICollectionView.I have tried
PSTCollectionView and it gives you the expected results. Try this.
You can use PSTCollectionView.

Answer 2

Use UICollectionView to create such grid.
Here is a tutorial. For your case, it's UIButton instead of UIImageView in this tutorial.

Answer 3

It seems all you're trying to achieve here is a lookup for the buttons later.
So you will need a variable (or property) on your instance to hold the references, not just a local variable during creation.
There are many ways of solving your problem, one simple yet efficient way to store the references is a 'NSMutableDictionary'.
Declare a property in your class:
#property (nonatomic, strong) NSMutableDictionary *buttonDictionary;
Set it up in your loop:
_buttonDictionary = [[NSMutableDictionary alloc] init];
In your loop, encode the x/y position, for example using an NSIndexPath, abusing row/section:
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:y inSection:x];
Create button and add to your dictionary and superview:
UIButton *freshButton = [UIButton buttonWithType:...]; // Much better than initWithFrame
freshButton.frame = ...;
_buttonDictionary[indexPath] = freshButton;
[self.layoutView addSubview:freshButton];
If you want to look up a button later by x/y indices, just do
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:y inSection:x];
UIButton *requestedButton = _dictionary[indexPath];
Please note that I'm using the [] syntax on dictionaries here - you may use the classic methods objectForKey: and setObject:forKey: instead.

Answer 4

You can use UICollectionView and set the dynamic values as you desired or customized as per your requirement. This is very easy and effective way to develop grid view. Here I explained a simple code for grid view:
Like this :
#interface DashboardViewController : AbstractController <UICollectionViewDataSource, UICollectionViewDelegate>{
NSMutableArray *dataSource;
}
#property (nonatomic, strong) UICollectionView *dashboardCollectionView;
#property (nonatomic, strong) ModulesDataModel *modulesDataModel;
#end
/*****************.m********************/
- (void)viewDidLoad {
[super viewDidLoad];
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
_dashboardCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 135, 1024, 537) collectionViewLayout:layout];
[_dashboardCollectionView setDataSource:self];
[_dashboardCollectionView setDelegate:self];
[_dashboardCollectionView registerClass:[CellMaster class] forCellWithReuseIdentifier:#"Reuse"];
[_dashboardCollectionView setBackgroundColor:[UIColor clearColor]];
[self.view addSubview:_dashboardCollectionView];
dataSource = [NSMutableArray arrayWithArray:#"your objects"];
}
#pragma mark - Collection View Datasource and Delegate Methods
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake( 22.0, 22.0, 22.0, 22.0);
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return 22.0f;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 15.0f;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(312,150);
}
- (NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return dataSource.count;
}
- (UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// Find the enum for this module and load the correct tile
self.modulesDataModel = [dataSource objectAtIndex:indexPath.item];
CellMaster * cell;
cell = (CellMaster *)[collectionView dequeueReusableCellWithReuseIdentifier:#"Reuse" forIndexPath:indexPath];
cell.tag = indexPath.item;
cell.iconImage.image = [UIImage imageNamed:#""];
cell.lblModuleName.text = self.modulesDataModel.moduleName;
cell.lblModuleName.textColor = self.modulesDataModel.color;
cell.btnInfo.tag = indexPath.item;
[cell.btnInfo addTarget:cell action:#selector(didPressInfoIcon:) forControlEvents:UIControlEventTouchUpInside];
cell.delegate = self;
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
// Enum for tile that was clicked
self.modulesDataModel = [dataSource objectAtIndex:indexPath.item];
}
Hope it would help you.

Answer 5

I made a little tweaks to your code and made it work with this:
You must manually initialize that array: meaning you have to say how big it's gonna be
#interface ViewController ()
#property (nonatomic) UIView *layoutView;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.layoutView = [[UIView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.layoutView];
[self makeLayoutWithMinRow:0 maxRow:5 minColumn:0 maxColumn:5];
}
- (UIColor *)randomColor {
CGFloat hue = ( arc4random() % 256 / 256.0 ); // 0.0 to 1.0
CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from white
CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from black
UIColor *color = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];
return color;
}
-(void)makeLayoutWithMinRow:(int)minRow maxRow:(int)maxRow minColumn:(int)minColumn maxColumn:(int)maxColumn {
NSInteger intLeftMargin = 10; // horizontal offset from the edge of the screen
NSInteger intTopMargin = 10; // vertical offset from the edge of the screen
NSInteger intYSpacing = 30; // number of pixels between the button origins (vertically)
NSInteger intXTile;
NSInteger intYTile;
NSInteger width;
id buttons[maxRow][maxColumn];
width = ((self.layoutView.frame.size.width-(maxColumn * 5))/maxColumn);
for (int y = minRow; y < maxRow; y++)
{
for (int x = minColumn; x < maxColumn; x++)
{
intXTile = (x * width) + intLeftMargin;
intYTile = (y * intYSpacing) + intTopMargin;
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(intXTile, intYTile, width, 15)];
button.backgroundColor = [self randomColor];
buttons[x][y] = button;
[self.layoutView addSubview:buttons[x][y]];
}
}
}
#end

Answer 6

You are trying to create a button-array or something like that here?
UIButton *buttons[x][y] = [[UIButton alloc] initWithFrame:CGRectMake(intXTile, intYTile, width, 15)];
What you really want to do is create the button object and then add it to an array (if you want to access it afterwards, otherwise it's enough to add it as a subview):
// Outside the for loop, probably as an instance variable or property:
NSMutableArray *buttons = [[NSMutableArray alloc] init];
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(intXTile, intYTile, width, 15)];
[buttons addObject:button];
You may even need to put that buttons array inside another array to get the multidimensional aspect right, or use a NSMutableDictionary with corresponding keys.