Welcome to Day 22 of the 31 Days of iOS. Yesterday, we talked about how to use the camera from your applications. We covered the default controls that come with the camera and discussed how you might add your own custom UI on top of the camera. Lastly we showed how to display a picture from the camera into the UI of your app. Today we’re going to look at something very similar: how to pull photos out of the photo gallery and display them in your app. The code for this is very similar to using the camera but in order to be more separate (and make it easier for you to get all of the details of the specific topic you want) we’re going to walkthrough all of it here. We’ll be starting with a brand new project, but if you’d like to follow along with the completed code, you can access it here.
Creating our project and handling the UI
Open up Xcode and choose File, New, Project. We’ll use a Single View Application and name it DayTwentyTwo:
Open up MainStoryboard.storyboard and let’s handle our initial UI. Drag a round rect button to the top and place an image beneath it. When you’re done, the UI will look like this:
Now open the Assistant Editor in the top right of Xcode and control + click and drag from the button and image over to the view controller code behind. For the button you’ll want to create an action and for the image, an outlet. Before we switch away from our header file, we’ll also want to make the ViewController class implement UIImagePickerControllerDelegate. When we’re done, the header file will look like this:
Now we can implement the class.
Getting into the photo gallery
Open up ViewController.m. We’ll implement the tappedGetPhoto method first to make it open the photo gallery. To do so, we create a new instance of UIImagePickerController and set it’s sourceType to either UIImagePickerControllerSourceTypeSavedPhotosAlbum or UIImagePickerControllerSourceTypePhotoLibrary. The difference is that the PhotosAlbum will take you directly to the album for the pictures taken with the camera (the Camera Roll) while PhotoLibrary will take you to the albums list (of which Camera Roll is one of the albums if the device has a camera). Either way, you should see something like one of the two images below (the left is the library and the right is the photos album):
Now if you tap a photo you’ll just return to your app and nothing will happen. What we want to happen is for the image we took to appear on the screen where we put an image. To make this happen, we need to add the UIImagePickerControllerDelegate’s didFinishPickingMediaWithInfo method:
The first thing we’ll do is pull the UIImagePickerControllerOriginImage property out of the NSDictionary that is sent into the method. This property is of the type UIImage which is what we can then use to set our imageView’s image property using setImage. Lastly, we have to call dismissViewControllerAnimated on the view controller. If we don’t do this, the preview won’t go away and our app won’t return (even though it returned on it’s own when we didn’t implement the method). Now when we run our app, select a photo, and approve it, we should see the image view set:
Conclusion
Today we reviewed how to use the photo gallery. Combined with yesterday’s article on using the camera, you should now have the knowledge to use both the camera and the gallery. This means you can give users the ability to take their own images or pull from ones they already created. You can download the completed code from today’s walkthrough here.
