CODEWITHSUNDEEP
iosuiimage
Seraph J. Lin
Seraph J. Lin

Reputation: 123

How do I make an image expand to full screen when touched?

I'd like to make a Facebook-like iOS app, which makes a picture from the timeline full screen when the user taps on it.

Update:

I'm using UICollectionView to display image in cell, so seems I should using collectionView:didSelectItemAtIndexPath: method? and the imageView is in the cell, so can I still expand to full screen directly?

Attached a couple images below:

enter image description here

enter image description here

Upvotes: 8

Views: 11064

Answers (4)

Ravi_Parmar
Ravi_Parmar

Reputation: 12329

You you are right, Use UICollectionView's delegate method:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
  //get UIImage from source 
  //show (add subView) UIImageView with full screen frame
  //add gesture for double tap on which remove UIImageView
}

Upvotes: 0

TomSwift
TomSwift

Reputation: 39512

Here's a fairly basic solution. It assumes that your collection cell has a UIImageView as the only subview of the UICollectionViewCell contentView.

#import <objc/runtime.h> // for objc_setAssociatedObject / objc_getAssociatedObject

...

- (void) collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell* cell = [collectionView cellForItemAtIndexPath:indexPath];

    UIImageView* iv = cell.contentView.subviews.lastObject;

    UIImageView* ivExpand = [[UIImageView alloc] initWithImage: iv.image];
    ivExpand.contentMode = iv.contentMode;
    ivExpand.frame = [self.view convertRect: iv.frame fromView: iv.superview];
    ivExpand.userInteractionEnabled = YES;
    ivExpand.clipsToBounds = YES;

    objc_setAssociatedObject( ivExpand,
                              "original_frame",
                              [NSValue valueWithCGRect: ivExpand.frame],
                              OBJC_ASSOCIATION_RETAIN);

    [UIView transitionWithView: self.view
                      duration: 1.0
                       options: UIViewAnimationOptionAllowAnimatedContent
                    animations:^{

                        [self.view addSubview: ivExpand];
                        ivExpand.frame = self.view.bounds;

                    } completion:^(BOOL finished) {

                        UITapGestureRecognizer* tgr = [[UITapGestureRecognizer alloc] initWithTarget: self action: @selector( onTap: )];
                        [ivExpand addGestureRecognizer: tgr];
                    }];
}

- (void) onTap: (UITapGestureRecognizer*) tgr
{
    [UIView animateWithDuration: 1.0
                     animations:^{

                         tgr.view.frame = [objc_getAssociatedObject( tgr.view,
                                                                    "original_frame" ) CGRectValue];
                     } completion:^(BOOL finished) {

                         [tgr.view removeFromSuperview];
                     }];
}

Upvotes: 12

Ravi_Parmar
Ravi_Parmar

Reputation: 12329

What i understood is that you have your image in UIWebView This is what i have at the moment, set the UIWebViews Delegate to self then add this:

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
   if (navigationType == UIWebViewNavigationTypeLinkClicked) {
        NSURL *URL = [request URL];          
        ImageViewer *imageView = [[[ImageViewer alloc] initWithNibName:@"ImageViewer" bundle:nil] autorelease];
        imageView.imageURL = URL;
        [self presentModalViewController:imageView animated:YES];
        return NO; 
   } else {
        return YES;
   }
}

Just make the image a link in the html like you would normally. If you have other links that you don't want to load in a model then you can mod the code to detect if the link being pressed is going to an image otherwise just return YES;

I'm having a little problem with my webview which i have posted here (just incase you get the some problem!!) Code.

Hope this helps!

Upvotes: 0

Balu
Balu

Reputation: 8460

use UITapGestureRecognizer ,and Don't forget to set imageView.userInteractionEnabled = YES; because by default image not having UserInteraction.

UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
[singleTap setNumberOfTapsRequired:1];

[imageView addGestureRecognizer:singleTap];


-(void)handleSingleTap:(id)sender {
// push you view here
//code for full screen image
}

Upvotes: 5

Related Questions