In some iOS apps, displaying images in a single view would make the UI lose its uniformity. It would be difficult to manage images of different resolution and impossible to keep track of thousand of images without using Grid View in iPhone.
This is just like a “Grid View” application. Here we will explore how to display images, programmatically in “Grid view” on an iPhone.
Here We Go…
Step 1:
- Open Xcode
- Create a View base application
- Give the application name “ImageGrid”.
Step 2:
The directory structure is automatically created by the Xcode which also adds up essential frameworks to it. Now, explore the directory structure to check out the contents of the directory.
Step 3:
Here you need to add one ‘NSObject’ class to the project.
- Select project -> New File -> Cocoa Touch -> Objective-C class
- Give the class name “Images”.
Step 4:
Then add an image to the project and give the image name “icon.png”.
Step 5:
- Open “ImageGridViewController” file and add ‘UITableViewDelegate’ and ‘UITableViewDataSource’
- Define ‘UITableView’ and ‘NSMutableArray’ classes as well as the buttonPressed: method
- Import the ‘Image.h’ class and make the following changes.
[sourcecode]#import <UIKit/UIKit.h>
#import "Image.h"
@interface ImageGridViewController:UIViewController <UITableViewDelegate, UITableViewDataSource> {
IBOutlet UITableView *tableView;
NSMutableArray *sections;
}
@property (nonatomic, retain) UITableView *tableView;
@property (nonatomic, retain) NSMutableArray *sections;
-(IBAction)buttonPressed:(id)sender;
@end[/sourcecode]
Step 6:
- Double click the ‘ImageGridViewController.xib’ file and open it in the Interface Builder.
- First drag the ‘TableView’ from the library and place it in the view window.
- Select ‘tableview’ from the view window and bring up connection inspector and connect ‘dataSource’ to the ‘File’s Owner’ and delegate to the ‘File’s Owner’ icon.
- Now save the .xib file and go back to Xcode.
Step 7:
In the ‘ImageGridViewController.m’ file, make the following changes:
[sourcecode]#import "ImageGridViewController.h"
#import "Item.h" @implementation ImageGridViewController
@synthesize tableView,sections;
-(void)loadView{
[super loadView];
sections = [[NSMutableArray alloc] init];
for(int s=0;s<1;s++) { // 4 sections
NSMutableArray *section = [[NSMutableArray alloc] init];
for(int i=0;i<12;i++) {// 12 items in each section
Image *item = [[ Image alloc] init];
item.link=@"New Screen";
item.title=[NSString stringWithFormat:@"Item %d", i];
item.image=@"icon2.png";
[section addObject:item];
}
[sections addObject:section];
}
}
– (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return [sections count];
}
– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 1;
}
– (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {
NSMutableArray *sectionItems = [sections objectAtIndex:indexPath.section];
int numRows = [sectionItems count]/4;
return numRows * 80.0;
}
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
NSString *sectionTitle = [NSString stringWithFormat:@"Section %d", section];
return sectionTitle;
}
– (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *hlCellID = @"hlCellID";
UITableViewCell *hlcell = [tableView dequeueReusableCellWithIdentifier:hlCellID];
if(hlcell == nil) {
hlcell = [[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault reuseIdentifier:hlCellID] autorelease];
hlcell.accessoryType = UITableViewCellAccessoryNone;
hlcell.selectionStyle = UITableViewCellSelectionStyleNone;
}
int section = indexPath.section;
NSMutableArray *sectionItems = [sections objectAtIndex:section];
int n = [sectionItems count];
int i=0,i1=0;
while(i<n){
int yy = 4 +i1*74;
int j=0;
for(j=0; j<4;j++){
if (i>=n) break;
Image *item = [sectionItems objectAtIndex:i];
CGRect rect = CGRectMake(18+80*j, yy, 40, 40);
UIButton *buttonImage=[[UIButton alloc] initWithFrame:rect];
[buttonImage setFrame:rect];
UIImage *buttonImageNormal=[UIImage imageNamed:item.image];
[buttonImage setBackgroundImage:buttonImageNormal forState:UIControlStateNormal];
[buttonImage setContentMode:UIViewContentModeCenter];
NSString *tagValue = [NSString stringWithFormat:@"%d%d", indexPath.section+1, i];
buttonImage.tag = [tagValue intValue];
//NSLog(@tag….%d", button.tag);
[buttonImage addTarget:self
action:@selector(buttonPressed:)forControlEvents:UIControlEventTouchUpInside];
hlcell.contentView addSubview:buttonImage];
[buttonImage release];
UILabel *label = [[[UILabel alloc]initWithFrame:CGRectMake((80*j)-4, yy+44, 80, 12)] autorelease];
label.text = item.title;
label.textColor = [UIColor blackColor];
label.backgroundColor = [UIColor clearColor];
label.textAlignment = UITextAlignmentCenter;
label.font = [UIFont fontWithName:@"ArialMT" size:12];
[hlcell.contentView addSubview:label];
i++;
}
i1 = i1+1;
}
return hlcell;
}
-(IBAction)buttonPressed:(id)sender {
int tagId = [sender tag];
int divNum = 0;
if(tagId<100)
divNum=10;
else
divNum=100;
int section = [sender tag]/divNum;
section -=1;// we had incremented at tag assigning time
int itemId = [sender tag]%divNum;
NSLog(@"…section = %d, item = %d", section, itemId);
NSMutableArray*sectionItems = [sections objectAtIndex:section];
Image *item = [sectionItems objectAtIndex:itemId];
NSLog(@"Image selected…..%@, %@", item.title, item.link);
}
-(void)viewDidLoad{
[super viewDidLoad];
}
-(void)didReceiveMemoryWarning{
[super didReceiveMemoryWarning];
}
-(void)viewDidUnload{
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}
-(void)dealloc{
[super dealloc];
}
@end[/sourcecode]
Step 8:
Open the ‘Image.h’ file and make the following changes:
[sourcecode]#import <Foundation/Foundation.h>
@interface Image:NSObject{
NSString*title;
NSString*link;
NSString*image;
}
@property(nonatomic, copy)NSString*title;
@property(nonatomic, copy)NSString*link;
@property(nonatomic, copy)NSString*image;
@end[/sourcecode]
Step 9:
Make the changes in the ‘Item.m’ file:
[sourcecode]#import "Image.h"
@implementation Item
@synthesize title, link, image;
@end[/sourcecode]
Step 10:
Now save it and compile it in the Simulator.
It would be smart to use Grid View to display a number of images in a single view because it enables to manage multiple images efficiently. Users are also facilitated to keep track of their images. It becomes eye soothing and looks great on the iPhone mobile devices.
Keep visiting regularly to Andolasoft blog to know our upcoming article about the process to show your android Smartphone captured images dynamically in “Grid View” Layout.