Hi,
I am going to explain you here how to create Grid view of image view and buttons that allows us to select any images,mark selected and recognize which image was selected.I am using NOT using UITableView,just using UIImageViews and UIButtons to create Grid.
Here is the grid you will see before you select any image :
Next,the grid you will see after you select any images :
Lets start,
1.Create a master details navigation project or any project.I used storyboard in sample.
2.Drag and drop any images into your project to present those in grid.
We are creating grid with uiimages and uibuttons programmatically adding it onto the uiview setting x,y coordinates.We are adding scroll view as because we may have thousands of images to display.
3.Go to DetailViewController.h, where you want to create grid and add following,
#import <UIKit/UIKit.h>
@interface DetailViewController : UIViewController <UISplitViewControllerDelegate>
{
UIScrollView *myScrollView;
UIImageView *image;
NSMutableArray *arr_Images;
NSMutableArray *arr_isImagesChecked;
UIButton *btn_imageBackground;
}
@property (strong, nonatomic) id detailItem;
@property (nonatomic,retain) UIScrollView *myScrollView;
@property (nonatomic,retain) UIImageView *image;
@property (nonatomic,retain) UIButton *btn_imageBackground;
@property (weak, nonatomic) IBOutlet UILabel *detailDescriptionLabel;
- (IBAction)btnImageClicked:(id)sender;
@end
Here we are declaring controls.
4.Open DetailViewController.m and add,
#import "DetailViewController.h"
@interface DetailViewController ()
@property (strong, nonatomic) UIPopoverController *masterPopoverController;
- (void)configureView;
@end
@implementation DetailViewController
@synthesize myScrollView;
@synthesize image;
@synthesize btn_imageBackground;
#pragma mark - Managing the detail item
- (void)setDetailItem:(id)newDetailItem
{
if (_detailItem != newDetailItem) {
_detailItem = newDetailItem;
// Update the view.
[self configureView];
}
if (self.masterPopoverController != nil) {
[self.masterPopoverController dismissPopoverAnimated:YES];
}
}
- (void)configureView
{
// Update the user interface for the detail item.
self.myScrollView.backgroundColor=[UIColor blackColor];
int x=10,y=10;
for (int i=0; i<[arr_Images count]; i++) {
//NSLog(@"IN FOR index i = %d",i);
//NSLog(@"Array count %d",[arr_Images count]-1);
if (x > 300) {
x=10;
y=y+50;
image =[[UIImageView alloc]initWithImage:[UIImage imageNamed:[arr_Images objectAtIndex:i]]];
image.frame=CGRectMake(x, y, 45, 45);
btn_imageBackground=[UIButton buttonWithType:UIButtonTypeCustom] ;
btn_imageBackground.frame=CGRectMake(x, y, 45, 45);
[btn_imageBackground addTarget:self action:@selector(btnImageClicked:) forControlEvents:UIControlEventTouchUpInside];
x=x+50;
}
else {
image =[[UIImageView alloc]initWithImage:[UIImage imageNamed:[arr_Images objectAtIndex:i]]];
image.frame=CGRectMake(x, y, 45, 45);
btn_imageBackground=[UIButton buttonWithType:UIButtonTypeCustom] ;
btn_imageBackground.frame=CGRectMake(x, y, 45, 45);
[btn_imageBackground addTarget:self action:@selector(btnImageClicked:) forControlEvents:UIControlEventTouchUpInside];
x=x+50;
}
image.tag=i;
btn_imageBackground.tag=i;
[self.myScrollView addSubview:image];
[self.myScrollView addSubview:btn_imageBackground];
[self.view addSubview:myScrollView];
}
}
- (IBAction)btnImageClicked:(id)sender
{
if ([[arr_isImagesChecked objectAtIndex:[sender tag]] intValue]) {
//image selected so deselect it
[sender setImage:[UIImage imageNamed:@""] forState:UIControlStateNormal];
[arr_isImagesChecked replaceObjectAtIndex:[sender tag] withObject:[NSNumber numberWithUnsignedInteger:0]];
}else{
//image not selected so select it by adding checked image onto the UIbutton
[sender setImage:[UIImage imageNamed:@"Overlay.png"] forState:UIControlStateNormal];
[arr_isImagesChecked replaceObjectAtIndex:[sender tag] withObject:[NSNumber numberWithUnsignedInteger:1]];
NSLog(@"%@",arr_isImagesChecked );
}
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//Initialize array of images with images
arr_Images =[[NSMutableArray alloc]initWithObjects:@"images-1.jpeg",@"images-2.jpeg",@"images-3.jpeg",@"images-4.jpeg",@"images1.jpg",@"images2.jpg",@"images3.jpg",@"images4.jpg",@"images-1.jpeg",@"images-2.jpeg",@"images-3.jpeg",@"images-4.jpeg",@"images1.jpg",@"images2.jpg",@"images3.jpg",@"images4.jpg",@"images-1.jpeg",@"images-2.jpeg",@"images-3.jpeg",@"images-4.jpeg",@"images1.jpg",@"images2.jpg",@"images3.jpg",@"images4.jpg",nil];
arr_isImagesChecked = [[NSMutableArray alloc] init];
CGRect screenBounds = [[UIScreen mainScreen] bounds];
myScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, screenBounds.size.height)];
myScrollView.contentSize = CGSizeMake(1, [arr_Images count]*10);
// Initialize array of flag to 0
for (int i=0; i<[arr_Images count]; i++) {
[arr_isImagesChecked insertObject:[NSNumber numberWithUnsignedInteger:0] atIndex:i];
}
[self configureView];
}
@end
that's it.Just run the code you will get the output.You can download the code from
here.
If you need help,feel free to comment.Happy coding :)
