This post will guide “How to create a grid kind of Table View?”
In this post following major points are covered.

  • TableView
  • Custom UITableViewCell
  • Array of images.
  • HJCache for asynchronous image loading.

1) Copy paste(import) HJCacheClasses library into project.

2) Select .pch file and then add the following code

1
2
3
    #import "HJManagedImageV.h"
    #import "ImageGridAppDelegate.h"
#define GlobalCacheManager [(ImageGridAppDelegate*)[[UIApplication sharedApplication] delegate] objMan]

3) Select application delegate header file(ImageGridAppDelegate.h)

  • 1
    #import "HJObjManager.h"
  • 1
    @property (nonatomic, retain) HJObjManager* objMan;

4) Select application delegate method file(ImageGridAppDelegate.m) and following code insert into“didFinishLaunchingWithOptions” method.

1
2
3
4
5
6
7
8
9
self.objMan = [[HJObjManager alloc] initWithLoadingBufferSize:6 memCacheSize:20];
NSString* cacheDirectory = [NSHomeDirectory() stringByAppendingString:@"/Library/Caches/imgcache/ImageGrid/"] ;
HJMOFileCache* fileCache = [[HJMOFileCache alloc] initWithRootPath:cacheDirectory] ;
self.objMan.fileCache = fileCache;
// Have the file cache trim itself down to a size & age limit, so it doesn't grow forever
fileCache.fileCountLimit = 100;
fileCache.fileAgeLimit = 60*60*24*7; //1 week
[fileCache trimCacheUsingBackgroundThread];

5) Add new Empty xib file name as CCell.xib more further refer following image.

 

6) Select buttons and choose property and give the tag number start first button with 0(zero).
7) Select ImageGridViewController.xib then insert UITable them.
8) Select ImageGridViewController.h and following code tobe their.

1
2
3
4
5
#import <UIKit/UIKit.h>
@interface ImageGridViewController : UIViewController <UITableViewDelegate,UITableViewDataSource>
@property (nonatomic, retain) IBOutlet UITableView *tableView;
@property (nonatomic, retain) NSArray *tableArray;
@end

9) Select ImageGridViewController.m and implement further code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
NSUInteger devide=[self.tableArray count] / 3;
    if ([self.tableArray count] % 3 >0 ) {
        devide+=1;
    } else {
        devide=devide;
    }
    return devide;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    if(cell==nil){
        cell=[[[NSBundle mainBundle] loadNibNamed:@"CCell" owner:self options:nil] objectAtIndex:0];
        UIButton *imgV1=(UIButton*)[cell viewWithTag:1];
        UIButton *imgV2=(UIButton*)[cell viewWithTag:2];
        UIButton *imgV3=(UIButton*)[cell viewWithTag:3];
        [imgV1 addTarget:self action:@selector(btnTapped:) forControlEvents:UIControlEventTouchDown];
        [imgV2 addTarget:self action:@selector(btnTapped:) forControlEvents:UIControlEventTouchDown];
        [imgV3 addTarget:self action:@selector(btnTapped:) forControlEvents:UIControlEventTouchDown];
        HJManagedImageV *img1=[[HJManagedImageV alloc] initWithFrame:CGRectMake(0, 0, imgV1.frame.size.width, imgV1.frame.size.height)];
        HJManagedImageV *img2=[[HJManagedImageV alloc] initWithFrame:CGRectMake(0, 0, imgV2.frame.size.width, imgV2.frame.size.height)];
        HJManagedImageV *img3=[[HJManagedImageV alloc] initWithFrame:CGRectMake(0, 0, imgV3.frame.size.width, imgV3.frame.size.height)];
        img1.tag=img2.tag=img3.tag=10000;
        img1.backgroundColor=img2.backgroundColor=img3.backgroundColor=[UIColor clearColor];
        [imgV1 addSubview:img1];
        [imgV2 addSubview:img2];
        [imgV3 addSubview:img3];
    }
    int x=indexPath.row;
    x=x*3;
    UIButton *imgV1=(UIButton*)[cell viewWithTag:1];
    UIButton *imgV2=(UIButton*)[cell viewWithTag:2];
    UIButton *imgV3=(UIButton*)[cell viewWithTag:3];
    HJManagedImageV *img1=(HJManagedImageV*)[imgV1 viewWithTag:10000];
    HJManagedImageV *img2=(HJManagedImageV*)[imgV2 viewWithTag:10000];
    HJManagedImageV *img3=(HJManagedImageV*)[imgV3 viewWithTag:10000];
    [img1 clear];
    [img2 clear];
    [img3 clear];
    [imgV1 setTitle:[self.tableArray objectAtIndex:x] forState:UIControlStateDisabled];
    img1.url=[NSURL URLWithString:[self.tableArray objectAtIndex:x]];
    [img1 showLoadingWheel];
    [GlobalCacheManager manage:img1];
    if((x+1) >= self.tableArray.count){
        imgV2.hidden=imgV3.hidden=YES;
        [imgV2 setBackgroundImage:nil forState:UIControlStateNormal];
        [imgV3 setBackgroundImage:nil forState:UIControlStateNormal];
    } else if( (x+2)>=self.tableArray.count) {
        img2.url=[NSURL URLWithString:[self.tableArray objectAtIndex:x+1]];
        [img2 showLoadingWheel];
        [GlobalCacheManager manage:img2];
        imgV1.hidden=imgV2.hidden=YES;
        imgV3.hidden=YES;
        [imgV2 setTitle:[self.tableArray objectAtIndex:x+1] forState:UIControlStateDisabled];
        [imgV3 setBackgroundImage:nil forState:UIControlStateNormal];
    } else {
        [img2 showLoadingWheel];
        [img3 showLoadingWheel];
        img2.url=[NSURL URLWithString:[self.tableArray objectAtIndex:x+1]];
        [GlobalCacheManager manage:img2];
        img3.url=[NSURL URLWithString:[self.tableArray objectAtIndex:x+2]];
        [GlobalCacheManager manage:img3];
        imgV2.hidden=imgV3.hidden=NO;
        [imgV2 setTitle:[self.tableArray objectAtIndex:x+1] forState:UIControlStateDisabled];
        [imgV3 setTitle:[self.tableArray objectAtIndex:x+2] forState:UIControlStateDisabled];
    }
    return cell;
}
1
2
3
4
5
- (void)btnTapped:(UIButton*)sender{
    NSString *string = [sender titleForState:UIControlStateDisabled];
    //performing code here when Image is tapped.
    NSLog(@"index is %i",[self.tableArray indexOfObject:string]);
}

Output of Application

Grab the sample code from here.

Thanks & Best Regards,
Nimit Parekh.

Advertisements