Zoom in and Zoom out an Image

In this post we will see how to zoom in and zoom out an image with the help of UIScrollView and a UIImageView.

Design Phase: The design phase is quite simple we will be having a UIScrollView which will contain the UIImageView and here’s a look at our final output

Step 1: Open Xcode and create a window based application and then add UIViewController subclass to your project with the name myviewController, so now you will be having two files into your class  group that’s myviewController.h and myviewController.m. Now find an image file from your hard disk and add it in your project.

Step 2: Now its time to go to the myviewController.h file and then add this piece of code

@interface myviewController : UIViewController {

 UIScrollView *myscrollView;

 UIImageView *myimageView;

}

@end

In the above code we have just declared the objects of UIScrollView and UIImageView and we will be giving frames to these objects in the .m file of myviewController

Step 3: Go to the init method and add this piece of code

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {

    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {

        // Custom initialization

//setting the frame of the scroll view

myscrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 30, 320, 345)];

//setting the maximum and minimum zoom scale for the contents of the scroll view

myscrollView.maximumZoomScale = 4.0;

myscrollView.minimumZoomScale = 1.0;

//setting the delegate property of scroll view to self

myscrollView.delegate = self;

//setting the frame of UIImageview

myimageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 13, 320, 293)];

//setting the image of the image

myimageView.image = [UIImage imageNamed:@"goku.png"];

    }

    return self;

}

Code Explanation: In the above code we have set the frame for both the controls and set the delegate property to self for the UIScrollView, UIScrollView has a property called maximum and minimum zoom scale which will set the maximum and minimum scale for the scroll view's content.

Step 4: Now copy a delegate method named 

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

from the documentation for UIScrollView and add this piece of code in the .m file of the myviewController

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

{

return myimageView;

}

Code Explanation: The above delegate method will scale the UIView whenever zooming occurs in the UIScrollView. The UIView in this case is the UIImageView's object that's myimageView.

Step 5: search for the loadView method in the .m file and add this views to the self view

-(void) loadView

{

[super loadView];

// add the image view to the scroll view

[myscrollView addSubview:myimageView];

//finally add the scroll view to the self view

[self.view addSubview:myscrollView];

}

Now its time to add the view to the window so select the AppDelegate.m file of your project and add this piece of code

#import "MultitouchAppDelegate.h"

#import "myviewController.h"

@implementation MultitouchAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch

//create the object of myviewController

myviewController * obj = [[myviewController alloc]init];

//add the object to the window

[window addSubview:obj.view];

        [window makeKeyAndVisible];

}

Press build and go and you are done, try zooming in and zooming out 

Zoomed in image

i hope this post helped you ...

Load image from the server in a ImageVIew

In this post we will see how to load an image in a UIImageView and that image will be present in a different server. Later part of the same post shows, how to save image to iPhone Gallery.

Design Phase: For this application we will just require an object of UIImageView that’s all nothing else and here’s a look at our final output

Step 1: Open Xcode and create a window based application and add a UIViewController subclass to your project with the name myviewController now you have added two files with the same name but different extensions that’s myviewController.h and myviewController.m

Step 2: Declare the object of UIImageView in the .h file here’s a view to the code 

@interface myviewController : UIViewController {

UIImageView *myimageView;

}

@end

and in the .m file locate the init method where we will give frames and add the logic of adding an image to the image view from a different server so here’s how the code looks like

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {

    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {

myimageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 480)];

//create a NSURL object which will hold the Image URL 

NSURL *imageurl = [NSURL URLWithString:@"http://www.hdwallpapers.in/walls/the_taj_mahal_at_sunset_india-normal.jpg"];

//create a NSData object and init it with the image url path

NSData *imagedata = [[NSData alloc]initWithContentsOfURL:imageurl];

//UIImage has a class method called imageWithData supply it with the NSData object and your done

myimageView.image = [UIImage imageWithData:imagedata];

    }

    return self;

}

As you can see I have explained the code with the help of comments so understanding the code should not be a problem for you.

Step 3: Don’t forget to add the image view in the self view with the help of loadView method.

Step 4: Now every thing is set all you have to do now is go to the AppDelegate.m file of your project which is present in the class group and add this view to the iPhone simulator window here’s how will you do that

#import "ImageLoadAppDelegate.h"

#import "myviewController.h"

@implementation ImageLoadAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch

myviewController * myVC = [[myviewController alloc]init];

[window addSubview:myVC.view];

    [window makeKeyAndVisible];

}

Step 5: Press Build and Go and you are done to see the output which looks like this

How to Save Image to the iPhone gallery ?

Now lets say you want to save the above image in the iPhone gallery then in that case what you can do is use the below function.

UIImageWriteToSavedPhotosAlbum(UIImage *image, id completionTarget, SEL completionSelector>, void *contextInfo)

Here’s the code which will help you to do this

-(void) SaveImage

{

//The URL of the image

NSString *str = @"http://www.ching-lee.com/blog/wp-content/uploads/2009/08/LINKINPARK.jpg";

//NSURL variable which will store the URL location of the image

NSURL *imageURL = [NSURL URLWithString:str];

NSData *imageData = [[NSData alloc]initWithContentsOfURL:imageURL];

//show the image in the UIImageView

imageView.image = [UIImage imageWithData:imageData];

//Creating the UIImage object and initializing it with the image from a URL

UIImage *tempImage = [[UIImage alloc]initWithData:imageData];

//save the image in the gallery

UIImageWriteToSavedPhotosAlbum(tempImage, nil, nil, nil);

}

In the above code the function saves the image to the user’s Saved photos album. Check out this link for the explanation of the parameters used in the function.

I hope this post was useful for you