" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
|
While reading a tip about creating a Grid View in I-Phone through customization of Scroll View, a question popped up in my mind. Is there an alternative way of doing that with less customization?
Sure enough, after some research I found that, yes, Grid View can be made using TableView. In fact even multiple Grid Views can be made on a single view .
|
|
Here is how:
The following code makes multiple grids of images.
1. Make a class derived from UIViewController with .xib and put a UITableView on the view of that class from Interface Builder.
2. Declare two functions for returning UIImageView and UILabel for a passed CGRect parameter.
|
#import <UIKit/UIKit.h>
@interface ImageGridView : UIViewController <UITableViewDelegate, UITableViewDataSource>
{
IBOutletUITableView* _tableView;
//this array will hold the arrays of images corrosponding to a grid.
NSMutableArray* _grids;
}
-(UIImageView *)gridImageRect:(CGRect)rect forImage:(UIImage *)image;
-(UILabel *)descriptionOfImage:(int)imageNumber inRect:(CGRect)rect;
@end
3. In the implementation class write the function for initializing the _grids Array.
-(void)initandFillGridArray
{
_grids = [[NSMutableArrayalloc] init];
// for creating 3 grids on view
for(int i = 0 ; i < 3; ++i)
{
NSMutableArray *imageArray = [[NSMutableArrayalloc] init];
for(int i = 0; i< 12 ; ++i)
{
// 12 items in each grid
[imageArray addObject:[UIImage imageNamed:@"icon.png"]];
}
[_grids addObject:imageArray];
}
}
4.Write function for loading the view
// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView
{
[super loadView];
[selfinitandFillGridArray];
}
5. Write delegate and datasource functions for table
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return [_grids count];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSArray* items = [_grids objectAtIndex:indexPath.section];
//number of rows in one grid if one row will have 4 items
int numberOfGridRows = items.count/4;
//height of table row
return numberOfGridRows * 80.0;
}
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
return [NSString stringWithFormat:@"Grid %d", section];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString* cellIdentifier = @"gridCell";
UITableViewCell *gridCell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if(gridCell == nil)
{
gridCell = [[[UITableViewCellalloc] initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:cellIdentifier] autorelease];
gridCell.accessoryType = UITableViewCellAccessoryNone;
gridCell.selectionStyle = UITableViewCellSelectionStyleNone;
}
NSArray* items = [_grids objectAtIndex:indexPath.section];
int imageIndex = 0;
int yOffset = 0;
while (imageIndex < items.count)
{
int yPos = 4 + yOffset * 74;
for(int i = 0; i < 4; ++i)
{
CGRect rect = CGRectMake((18 + i * 80), yPos, 40, 40);
UIImageView* imageView = [self gridImageRect:rect forImage:[items objectAtIndex:imageIndex]];
[gridCell.contentView addSubview:imageView];
[imageView release];
rect = CGRectMake(((80 * i)-4), (yPos+44), 80, 12);
UILabel* label = [self descriptionOfImage:imageIndex inRect:rect];
[gridCell.contentView addSubview:label];
[label release];
++imageIndex;
}
++yOffset;
}
return gridCell;
}
6. Define functions declared in .h class
-(UIImageView *)gridImageRect:(CGRect)rect forImage:(UIImage *)image
{
UIImageView* imageView = [[UIImageView alloc] initWithFrame:rect];
imageView.image = image;
return imageView;
}
-(UILabel *)descriptionOfImage:(int)imageNumber inRect:(CGRect)rect
{
UILabel *label = [[UILabel alloc] initWithFrame:rect];
label.text = [NSString stringWithFormat:@"Image %d", imageNumber + 1];
label.textColor = [UIColorblackColor];
label.backgroundColor = [UIColorclearColor];
label.textAlignment = UITextAlignmentCenter;
label.font = [UIFont fontWithName:@"ArialMT" size:12];
return label;
}
7. Dealloc the class variables.
- (void)dealloc
{
[_gridsrelease];
[super dealloc];
}
@end
So instead of customizing the whole view, the desired effect can be achieved by just adding subviews to the table cells.