Thursday, February 28, 2013

Pick Image From Gallery iPhone Tutorial


In this app we will pick photo from Camera Roll (Image Gallery) and use it on UIImageView.
So stay with me, and do it step by step by ..

PHASE - I (Create New Project)

Let's Fire Xcode!!

Go to File --> New --> Project

Now we can a Window for selecting our application templet 

So make sure you select Application in iOS option on your Left hand side.
then select Single View Application as shown in below picture and Go for Next..



In this Next Window we need to put Our Project Details this way

Product Name : PickGalleryImage
Organization Name :RDCWorld
Company Identifier : com.rdcworld

Class Prefix :  (leave it blank for now)

Devices : iPhone

Note : Don't forget to Make Tick mark on "Use Automatic Reference Counting" option.



Go to Next --> Create.

Here is our project structure look like




PHASE - II (Design UI)

We need to add Image view and button on our screen.

UIImageView : for showing picked image.
UIButton : for open camera Roll to capture image.

So, Just open ViewController.xib file you can see default blank layout

Now drag on UIImage View and UIButton to Our Layout from Object Lib ( Object Lib you can see in Bottom Right corner)

See our layout looking like



PHASE - III (Create IBOutlets and IBAction )

We are going to create IBOutlet for UIImageView and IBAction method for UIButton.

Okay, Now select Assistant Editor on Top Right side




You can see our ViewController.xib (Left side) + ViewController.h (Right side) opened together.

1. Fist is First, Create IBOutlet for UIImageView

So now just Select UIImageView --> Right Click on it 



Click on "New Referencing outlet" option and drag cursor to ViewController.h(right side) file, when your cursor is between @interface and @end you can see like this.




Now you will get Popup Window 

just put Name : "imageView" and click on Connect.




2. Create IBAction for UIButton.

Right click on UIButton on Layout

Select "Touch Up Inside" in Send Event option and drag to header file this way



Now you will get Popup Window 
just put the Name : openCameraRoll

and click on Connect button.



Done!! now agin back to Standard Editor




PHASE - III (Writing Code)

Now Save app, and open ViewController.h file 

add these two delegates to @interface

<UIImagePickerControllerDelegate,UINavigationControllerDelegate>

So Finally our ViewController.h file look like

-----------------------------------------------------------------------------------------------------------------------------------------
///
//  ViewController.h
//  PickGalleryImage
//
//  Created by RDC on 2/28/13.
//  Copyright (c) 2013 RDCWorld. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIImagePickerControllerDelegate,UINavigationControllerDelegate>

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

- (IBAction)openCameraRoll:(id)sender;

@end

-----------------------------------------------------------------------------------------------------------------------------------------


Now come to ViewController.m file , open it

add synthesize for imageView  just below to @implementation

@synthesize imageView;


update openCameraRoll method code this way

- (IBAction)openCameraRoll:(id)sender {
    
    UIImagePickerController * picker = [[UIImagePickerController alloc] init];
picker.delegate = self;
    
    picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    
    //start camera view
    [self presentViewController:picker animated:YES completion:nil];
    
}

Add UIImagePickerController's delegate method to handle camera event

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    
    
    [picker dismissViewControllerAnimated:YES completion:nil];
    
imageView.image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
}



So Finally our ViewController.m file look like

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  ViewController.m
//  PickGalleryImage
//
//  Created by RDC on 2/28/13.
//  Copyright (c) 2013 RDCWorld. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize imageView;

#pragma mark - ViewController's life cycle methods

- (void)viewDidLoad
{
    [super viewDidLoad];

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    
}

//Open Camera Roll button click method
- (IBAction)openCameraRoll:(id)sender {
    
    UIImagePickerController * picker = [[UIImagePickerController alloc] init];
picker.delegate = self;
    
    picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    
    //start camera view
    [self presentViewController:picker animated:YES completion:nil];
    
}

#pragma mark - UIImagePickerController's delegate method

//this method get called when we click on USE button after capturing image

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    
    
    [picker dismissViewControllerAnimated:YES completion:nil];
    
imageView.image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
}
@end
-----------------------------------------------------------------------------------------------------------------------------------------


PHASE - IV (Run App)


Okay wrap it up this application. let's Run it.

Note : Make you have to Run application using Apple's Real Device (iPhone, iPod, and iPad etc.), you can't test camera app in simulator.

Here is the output 

I clicked on Open Camera Roll Button

Note : We need to Allow to Access your photos here





then I Picked up one photo



Cheers!! we did it. It was so simple because Apple doing everything for us.
we just made it alive.

You can find complete project source code zip file here : PickGalleryImageiPhone


I Would love to here your thought !! 

No comments:

Post a Comment