show an image as enlarged on clicking an image view in iPhone

Question

I have implemented async image view to load images on my custom cell views, but the images are showing as small on cells. So I need to show an enlarged form of that image when clicking on that image views. How can I achieve this?

This is my code:

 if (cell == nil) {
     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

     //create new cell
     cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

     //common settings
     cell.selectionStyle = UITableViewCellSelectionStyleNone;
     cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
     cell.layer.cornerRadius = 10; 
     cell.layer.masksToBounds = YES;

     cell.imageView.contentMode = UIViewContentModeScaleAspectFit;
     cell.imageView.frame = CGRectMake(10.0f, 10.0f, 60.0f, 44.0f);
     cell.imageView.backgroundColor = [UIColor colorWithRed:73 green:73 blue:73 alpha:1];

     cell.imageView.image = [UIImage imageNamed:@"Placeholder.png"];
     imgBtn=[cell imageView];
     objectAtIndex:indexPath.row]objectForKey:@"Name"];
     cell.imageView.imageURL =  [NSURL URLWithString:[[detailsList objectAtIndex:indexPath.row]objectForKey:@"image_url"]];
}

I want to enlarge the image upon touching the image view inside the cell. Any ideas? Thanks in advance.

Dhaval Panchal · Answer 1 · 2012-07-10T06:40:56.680

3

You can add image with gesture recognizer as follows:-

UITapGestureRecognizer *tapped = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imageTapped:)];           
tapped.numberOfTapsRequired = 1;
[image setUserInteractionEnabled:YES];
image.tag = indexPath.row;
[image addGestureRecognizer:tapped];   
[cell.contentView addSubview:image];

And your imagetapped function will be:-

 - (void)imageTapped:(UITapGestureRecognizer *)gesture 
{
    UIImageView *img = (UIImageView *)[gesture view];
    BigimgView.image = img.image
    [self.view addSubview:BigimgView];
    UITableViewCell *cell = [MyTableView cellForRowAtIndexPath:[NSIndexPath indexPathWithIndex:img.tag]];

}

and BigimgView can be iboutlet of imageview with big size.

edited Jul 10 '12 at 06:40

answered Jul 09 '12 at 11:19

Dhaval Panchal

2,529
1
25
36

tapping on the image view is not calling the image tapped method.wat may be the reason? – iOS Developer Jul 09 '12 at 11:49
@alpz I modified my answer make userinteraction enabled to imageview. – Dhaval Panchal Jul 09 '12 at 15:37
but the bigger image is always showing at the same position.I need to show that enlarged image on that particular cell of the table view itself.so an identifier for the cell is also required.is it? – iOS Developer Jul 10 '12 at 04:56
I added tag to image when creation at cellforrow and used at tapped function. – Dhaval Panchal Jul 10 '12 at 06:41

score 1 · Answer 2 · edited May 23 '17 at 12:08

You want to receive a message, when you tap on the imageView? A possible solution is to create a custom UITableViewCell, maybe in an own xib file.

Then your problem would be to make the UIImageView on your custom UITableViewCell clickable. Please have a look at this question: here

A simpler solution is to use a UIButton, not a UIImageView. You can set an image/backgroundImage to a UIButton.

score 1 · Accepted Answer · answered Jul 09 '12 at 11:27

1

Try using a UIButton:

UIButton * b = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f , cell.imageView.frame.size.width, cell.imageView.frame.size.height)];
b.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[b addTarget:self action:@selector(changeSize:) forControlEvents:UIControlEventTouchUpInside];
[cell.imageView addSubview:b];

-(IBAction)changeSize:(UIButton *)sender
{
    UIImageView * imageView = (UIImageView *)[sender superview];
    imageView.frame = //Your larger frame goes here
}

answered Jul 09 '12 at 11:27

llama591

453
5
15

i added the btn like this.but it is not calling the change size method – iOS Developer Jul 09 '12 at 11:33
make sure cell.imageView.userInteractionEnabled = YES – llama591 Jul 09 '12 at 12:14

score 1 · Answer 4 · edited Mar 16 '16 at 14:09

in your custom cell add the button.

@interface custom : UITableViewCell
{
    UIButton *button1
}

and then add the button in xib also.then give connection to that button.

come to the tableview datasource methods.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    static NSString *CellIdentifier = @"CellIdentifier";

    // Dequeue or create a cell of the appropriate type.
    /// UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    custom *cell=(custom *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) 
    {
        // cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        NSArray *topView=[[NSBundle mainBundle]loadNibNamed:@"custom" owner:self options:nil];

        for(id currentobject in topView)
        {
            if ([currentobject isKindOfClass:[UITableViewCell class]])
            {
                cell=(custom *)currentobject;
                //cell.backgroundView.backgroundColor=[UIColor clearColor];

                 break;
             }
         }
    }   
    //  0.0f, 0.0f , cell.imageView.frame.size.width,        cell.imageView.frame.size.height
    [cell.button1 addTarget:self action:@selector(changeSize) forControlEvents:UIControlEventTouchUpInside];
}

now click the button.it will go to that method.,., try it.,.,

-(IBAction)changeSize:(UIButton *)sender
{
    UIImageView * imageView = (UIImageView *)[sender superview];
    imageView.frame = //Your larger frame goes here
}

u need to give the background image for the cell.button1 it may help u.,.

i am learning.,

show an image as enlarged on clicking an image view in iPhone

4 Answers4