Thursday, February 10, 2011

Get the Images from iPhone Gallery

In this post we will learn how to fetch the image from the iPhone gallery and use that image in our application, For achieving this functionality you will need an instance of UIImageView, UIButton and a class called as the UIImagePickerController class.

UIImagePickerController class description: The UIImagePickerController class manages system-supplied user interfaces for choosing and taking pictures and movies on supported devices. The class manages user interactions and delivers the results of those interactions to the delegate object you’ve associated with the image picker.

Design View: Here’s a view at the final output that we will achieve.

Step 1: Open Xcode and select windows based application and then add UIViewController subclass file to it with the name myviewController (or any name of your choice), now their might be two files that will be added in your project with the extension .h and .m called myviewController.h and myviewController.m.

Step 2: Now select the myviewController.h file and declare the objects of UIImagePickerController, UIButton and UIImageView, also add a function which will be called when the button will be touched here’s a view at the code

@interface myviewController : UIViewController {

UIImagePickerController *imagePickerController;
UIImageView *imgv;
UIButton *showImageGalleryButton;
-(void) displayImageGallery;

After declaring the objects select the myviewController.m file and then uncomment the init and loadView method and into the init method perform the initial settings for the controls like setting the frames and titles. Here’s a view at the code

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
        // Custom initialization
showImageGalleryButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[showImageGalleryButton setFrame:CGRectMake(33, 338, 240, 37)];
[showImageGalleryButton setTitle:@"Image Gallery" forState:UIControlStateNormal];
[showImageGalleryButton addTarget:self action:@selector(displayImageGallery) forControlEvents:UIControlEventTouchUpInside];
imgv = [[UIImageView alloc]initWithFrame:CGRectMake(33, 86, 240, 231)];
    return self;

Don’t forget to add these views into self view with in the loadView method 

- (void)loadView {
[super loadView];
[self.view addSubview:imgv];
[self.view addSubview:showImageGalleryButton];

 Now in order for the UIImagePickerController to work we must implement two protocols named

1. UIImagePickerControllerDelegate protocol.
2. UINavigationControllerDelegateProtocol.

@interface myviewController : UIViewController <UIImagePickerControllerDelegate,UINavigationControllerDelegate> {

UIImagePickerController *imagePickerController;
UIImageView *imgv;
UIButton *showImageGalleryButton;
-(void) displayImageGallery;

Step 3: Remember the function we declared its time to add code to the function here’s how it looks

-(void) displayImageGallery
imagePickerController = [[UIImagePickerController alloc]init];
imagePickerController.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;
imagePickerController.delegate = self;
[self presentModalViewController:imagePickerController animated:YES];
Code Explanation: In the first line I am giving memory to the imagePickerController and then since I will be using a delegate method of the UIImagePickerController that’s why I am specifying where is the delegate method of the ImagePicker, also I need to specify the source type like mostly this property says that “Ok fine boss your gona display an image but tell me from where the image is gona come like is it coming from camera or from the photo gallery”

Step 4: Its time to play with the delegate, the UIImagePickerController has a delegate method called as the 

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info

Copy and paste the delegate method in the myviewController.m file from the documentation of UIImagePickerControllerDelegate

Now in this delegate method we will bind the image property of the UIImageView instance with the image that is selected by the user from the image gallery

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
imgv.image = [info valueForKey:@"UIImagePickerControllerOriginalImage"];
[self dismissModalViewControllerAnimated:YES];

Different keys for the imagePicker can be seen in the documentation

Step 5: Finally select the AppDelegate.m file and then add the myviewController view to your iPhone window

#import "PickImageFromGalleryAppDelegate.h"
#import "myviewController.h"

@implementation PickImageFromGalleryAppDelegate
@synthesize window;

#pragma mark -
#pragma mark Application lifecycle

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    // Override point for customization after application launch.
myviewController *obj = [[myviewController alloc]init];
[window addSubview:obj.view];
        [window makeKeyAndVisible];
    return YES;

I hope this post helped you, Have a great Day and Happy iCoding

1 comment: