1 / 20

Creating an image viewer

Creating an image viewer. CSE 391 Fall 2012 Tony Scarlatos. A caveat…. The purpose of this exercise is to continue to learn the process of developing applications for the iPhone , and to familiarize you with the development tools.

dasha
Télécharger la présentation

Creating an image viewer

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating an image viewer CSE 391 Fall 2012 Tony Scarlatos

  2. A caveat… • The purpose of this exercise is to continue to learn the process of developing applications for the iPhone, and to familiarize you with the development tools. • The program we will write is not scaleable or flexible. But it works fine for a limited number of images. To make it flexible, we would want to get a directory listing of all the .jpg or .png files in the application. To make it scaleable we could display the image file names in a scrolling table. More on this later…

  3. Develop resources • The first step is to prepare six images for inclusion in your app. img1.jpg, img2.jpg, etc. • In Xcode, create a Single View Application, save it and name it ImageViewer. • Control-click the project icon at the top left of the navigation palette (blue icon). In the drop-down that appears, choose New Group. Rename the folder that gets created to Resources. Drag and drop your 6 images into the Resources folder of the ImageViewer project window. • A dialog will appear, and you must check the checkbox to “Copy items into destination group’s folder (if needed)”.

  4. Define a variable We will be using a UIImage object in Interface Builder (IB) to display our images. We’ll need to operate on that object (refer to it) so we can change the image it displays – so we need to give it a name. We’ll use the keyword IBOutlet so IB will recognize the variable. Select the interface file (ViewController.h) from the ImageViewer folder in Xcode. Above the @end line type the following: @property (nonatomic, strong) IBOutletUIImageView *imageView;

  5. Define a method We will use a button to display each picture, so we need a method to respond to each button click. We’ll need six methods. You can write the first one, copy and paste it five times, and modify each one as appropriate. Below the line of code you just wrote, add these lines of code: -(IBAction)showImage1:(id)sender; -(IBAction)showImage2:(id)sender; -(IBAction)showImage3:(id)sender; -(IBAction)showImage4:(id)sender; -(IBAction)showImage5:(id)sender; -(IBAction)showImage6:(id)sender;

  6. The interface code Save the file. Your code should now look like this: #import <UIKit/UIKit.h> @property (nonatomic, strong) IBOutletUIImageView *imageView; -(IBAction)showImage1:(id)sender; -(IBAction)showImage2:(id)sender; -(IBAction)showImage3:(id)sender; -(IBAction)showImage4:(id)sender; -(IBAction)showImage5:(id)sender; -(IBAction)showImage6:(id)sender; @end

  7. Building the interface • Click on the Main.storyboard file in the Resources folder. In Interface Builder, drag a UIImageView object from the Library into the View window. • In the Size inspector, in the Width and Height fields, set the width of the object to 280 and the height to 405. Position the UIImageView at the top of the iPhone screen. • Now drag six UIButton objects into the View window. You can size, position, and align them visually, or use the Size and Position tab. Select each button and give each a title in the Attributes inspector. You can also set other attributes there.

  8. Make connections • Select ViewController from the left of the view window. Click and drag a line from the circle to the right of your one outlet called imageView (in the Connections inspector) to the UIImage object. • Under Received Actions, drag a connection to each of your six buttons. • Save the file.

  9. Connection Inspector

  10. Implement methods • Select the file ViewController.m from the ImageViewer folder. Just above the @end statement, write the following code: -(IBAction)showImage1:(id)sender { [selfanimateImageViewToImageNamed:@"img1.jpg"]; } • Copy and paste that block of code five times and edit as needed. Save the file. This is an assignment statement. In square brackets the code calls the animateImageViewToImageNamedmethod of the UIImage class. We pass one argument to that method – the name of the file to be used. This returns a UIImage object. We assign that image object to the image property of imageView.

  11. The implementation code -(void)animateImageViewToImageNamed:(NSString*)filename { UIImage * toImage = [UIImageimageNamed:filename]; [UIViewtransitionWithView:_imageViewduration:1.0foptions:UIViewAnimationOptionTransitionCrossDissolveanimations:^{ _imageView.image = toImage; } completion:nil]; }

  12. Success!

  13. Adding a button sound • You’ll need to get a short sound file - .wav, .aif, or .mp3 files will all work. • Add the sound to your project by dragging and dropping it into the Resources folder in Xcode. Again you will have to check the checkbox that asks if you want to copy the item to the destination folder. • Now you will have to add the framework for playing sound. Select the ImageViewer project icon (blue, upper left corner). Then select the project icon under Targets just to the right. Then select the Build Phases tab. Twirl down the “Link Binary With Libraries” item. Click on the plus icon (+) to add the AVFoundation.framework library.

  14. Linked Frameworks and Libraries

  15. Writing the button sound code • In the ViewController.h file, add the following line of code (right below the line that begins with #import) to import the AVFoundation framework: #import <AVFoundation/AVAudioPlayer.h> • Just below the @property statement, add the code: @property (nonatomic, strong) AVAudioPlayer *player;

  16. Button sound code continued • In the ViewController.m file we will need to implement the button action. Just above the @end statement add the following code: -(void)playSound { NSError *error = nil; NSURL *url = [NSURLfileURLWithPath:[[NSBundlemainBundle] pathForResource:@"loon"ofType:@"wav"]]; self.player = [[AVAudioPlayeralloc] initWithContentsOfURL:urlerror:&error]; if(error) NSLog(@"Error Initiating Player: %@", error.description); if([_playerplay]) NSLog(@"played"); } • Don’t forget to substitute the name of your file, and the file format, where I have used @”loon” and @”wav” above. • You will also have to connect the playSound action to each of your buttons in IB, just as you did with the showimg action. Save your file and click Run.

  17. Finishing touches – app icon & launch image • You will need to create a 120 X 120(pixel) image file for the icon. Save it as a .png. • You will also need a 640 X 1136 (4 inch screen) and 640 X 960 (3.5 inch screen) image for the splash screen. Also save it as a .png file. • In the Summary tab for the build target, drag and drop your app icon into the space for it, and also the launch image. Use a screen shot of your starting screen for the launch image.

  18. Project Summary

  19. Success!

  20. Wrapping up • Collect your own set of images and scale them. Maybe use nine images? • Build your own interface. Experiment with the look and feel. Maybe try to change the background color? (See previous exercise). • Create your own app icon and launch image. • Zip your project folder and email it to cse392@cs.stonybrook.edu with iOS Image Exercise as the subject line.

More Related