articles

Home / DeveloperSection / Articles / Sample on displaying device images into UIViewController in iOS

Sample on displaying device images into UIViewController in iOS

Tarun Kumar3517 09-Dec-2015

Previously we learn how to create Action Sheet on view controller :  Creating app using UIActionSheet in iOS 6

 

Here we will continue where we left in our previous article. We already see how to create Action Sheet and display it on our view controller. Now we are doing some changes in our Action Sheet because we will use it in our sample, we will add delete option on the top of the action sheet, for that add code in showActionSheet method in view controller on our previous code, give a name ‘Delete’ to your destructiveButtonTitle, like this:

destructiveButtonTitle:@"Delete"

after adding delete button code and run it the delete button will display in red color background, because it is an destructive button that's default use as a delete button works, it will looks like this:

Sample on displaying device images into UIViewController in iOS

 

Now, to fetch device images into view controller follow the steps:


1.    Create a new view controller on MainStoryboard and create an outlet of an UIImageView and named it as ‘imageView’ and drag a UIButton and set it as action and named it as ‘browseImage’.

Code will look like this:

@property (strong, nonatomic) IBOutletUIImageView *imageView;
- (IBAction)browseImage:(id)sender;


And image view controller will look like this: 


Sample on displaying device images into UIViewController in iOS


2.    Now select the ImageViewController in MainStoryboard and set class ‘ImageViewController’ in Identity Inspector. Like this:

       Sample on displaying device images into UIViewController in iOS

3.    Now, goto your ViewController.m file and import ImageViewController and add these code in actionSheet: clickedButtonAtIndex: method:

ImageViewController *imageViewController = (ImageViewController *)[mainStoryboard instantiateViewControllerWithIdentifier:@"ImageViewController"];

[self.navigationController pushViewController:imageViewController animated:YES];

After adding the code when we click on the ‘Images’ button of action sheet ImageViewController will open but It has no title, so to set title of ImageViewController select it and goto ‘Attribute Inspector’ set title like this:

Sample on displaying device images into UIViewController in iOS

4. Now, open the ImageViewController.m file and implement UIImagePickerControllerDelegate, UINavigationControllerDelegate in the interface of ImageViewController, like this:

@interface ImageViewController () <UIImagePickerControllerDelegate, UINavigationControllerDelegate>

5. Now add an image on your project and named it “image.jpg” and go to your viewDidLoad: method and add this code for your ImageViewController background-

self.imageView.image = [UIImage imageNamed:@"image.jpg"];  

6.    Now, the action method that we created currently “browseImage:” add some code here, these code will be responsible for opening the picker view to pick images from the device (images that are available on the device):

UIImagePickerController *pickerC = [[UIImagePickerController alloc] init];
pickerC.delegate = self;
[self presentViewController:pickerC animated:YES completion:nil]; 


7.    Now, add two methods of Picker view and add these code on this method:

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

First method will be responsible for identifying the image that the user will select from the device image library. And in this method we will write code which will display the selected image on the ImageViewController’s background image.

Second method will be responsible for cancelling the picker view when we click on cancel button.

  

That’s it.

Now, go to ‘Product’ in the top menu bar and click on Run to build and run the project in the simulator.

And after click on ‘Show Action Sheet’ button to bring up the action sheet. Now click on the Images button, a new view controller that has all the device images in a group “Saved Photos” will be open, now when we click on ‘Saved Photos’ a new view controller will be open that will show all the images of ‘saved photos’ group, now when we click on any image like I am, the selected image will be open on the ‘ImageViewController’ background image.

 
Here we are providing Step-By-Step screen shots:


 Sample on displaying device images into UIViewController in iOS Sample on displaying device images into UIViewController in iOS Sample on displaying device images into UIViewController in iOS Sample on displaying device images into UIViewController in iOS

 

 

Here is the Complete source code:
ViewController.h file

#import <UIKit/UIKit.h>

 

@interface ViewController : UIViewController<UIActionSheetDelegate>

- (IBAction)showActionSheet:(id)sender;

@end

 ViewController.m file

#import "ViewController.h"

#import "ImageViewController.h"

 

@implementation ViewController

 

- (void)viewDidLoad {

[super viewDidLoad];

}

 

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

}

 

-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{

UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:

@"MainStoryboard" bundle:nil];

if(buttonIndex == 0) {

NSLog(@"Delete Button Clicked");

}

else if(buttonIndex == 1) {

NSLog(@"Images Button Clicked");

ImageViewController *imageViewController = (ImageViewController *)

[mainStoryboard instantiateViewControllerWithIdentifier:

@"ImageViewController"];

[self.navigationController pushViewController: imageViewController

animated:YES];

}

else if(buttonIndex == 2) {

NSLog(@"Vedios Button Clicked");

}

else if(buttonIndex == 3) {

NSLog(@"Files Button Clicked");

}

else if(buttonIndex == 4) {

NSLog(@"Cancel Button Clicked");

}

}

 

- (IBAction)showActionSheet:(id)sender {

UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:

@"Action Sheet Sample"

delegate:self

cancelButtonTitle:@"Cancel"

destructiveButtonTitle:@"Delete"

otherButtonTitles:@"Images", @"Vedios", @"Files", nil];

[actionSheet showInView:self.view];

}

@end

 
ImageViewController.h file


#import <UIKit/UIKit.h>

 

@interface ImageViewController : UIViewController

 

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

- (IBAction)browseImage:(id)sender;

@end

 ImageViewController.m file

#import "ImageViewController.h"

 

@interface ImageViewController () <UIImagePickerControllerDelegate, UINavigationControllerDelegate>{

}

@end

 

@implementation ImageViewController

 

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

self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

if (self) {

// Custom initialization

}

return self;

}

 

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view.

self.imageView.image = [UIImage imageNamed:@"image.jpg"];

}

 

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

 

- (IBAction)browseImage:(id)sender {

UIImagePickerController *pickerC = [[UIImagePickerController alloc] init];

pickerC.delegate = self;

[self presentViewController:pickerC animated:YES completion:nil];

}

 

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

[self dismissViewControllerAnimated:YES completion:nil];

UIImage *gotImage = [info objectForKey:UIImagePickerControllerOriginalImage];

self.imageView.image = gotImage;

}

 

- (void)imagePickerControllerDidCancel:

(UIImagePickerController *)picker {

[self dismissViewControllerAnimated:YES completion:nil];

}

 

@end


Updated 07-Sep-2019

Leave Comment

Comments

Liked By