Welcome to Day 21 of the 31 Days of iOS. Yesterday, we wrapped up a two-article series on using maps in iOS applications. We’re going to continue on discussing how to make use of built-in features today by talking about using the Camera. One of the best known examples of an iOS app that uses the camera has to be Instagram and it’s also one of the most popular iOS apps (or was before the terms of service fiasco). We probably won’t cover all of the information necessary to build the next Instagram, but we’ll talk about the basics today. 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 DayTwentyOne:
Open up MainStoryboard.storyboard and let’s handle our initial UI. Drag a round rect button to the top and then 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.
Using the camera
Open up ViewController.m. We’ll implement the tappedUseCamera method first and make it bring up the camera. To do so, we create a new instance of UIImagePickerController and set it’s sourceType to UIImagePickerControllerSourceTypeCamera. Then after setting it’s delegate to the ViewController class (self) we can call presentViewController on self and pass in our UIImagePickerController:
If you try to run the app right now in the simulator, it’s going to crash when you tap the button. The reason this happens is that the camera isn’t available on the simulator. We can prevent the crash by checking to see if the camera is an available source type before using it by calling the UIImagePickerController’s isSourceTypeAvailable method like this:
In this situation, we’d probably want to do something different like show the user a button to pick from the gallery instead of using the camera but you should be able to handle that on your own. Now if you run your app in the simulator and tap the button, nothing will happen. For testing purposes, we’ll assume for the rest of the article that you have, and are testing on, a physical device with a camera. Switch the device you’re going to run from the simulator over a device using the drop down in the top left of Xcode:
Once you’ve done that you can run your app. This wills start it up on the device. Tap the Use Camera button and you should see the camera come up on the screen:
As you can see, the default camera has buttons to turn on and off auto flash, flip the camera (if you have a front and rear facing camera), take a picture, and cancel. You can remove all of these buttons by setting the UIImagePickerController object’s showsCameraControls property to NO. However, if you do this, you’ll need to manually then put your own buttons on the camera (for the user to take a picture). This is done by setting the cameraOverlayView property on the UIImagePIckerController. Doing so requires you to create your own custom view. However, this enables you to let the user take multiple pictures, add filters, or anything else you might want to do. Returning to the camera, if you take a picture, you’ll then be presented with the photo preview page:
Hitting Retake will take you back to the camera screen. Tapping Use will return to your app. However, 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, take a picture, and approve it, we should see the image view set:
Conclusion
Today we talked about the basics of using the camera. We saw how to present it to the user as well as how to pull the image data out after an image is taken and show it to the user in an image view. Lastly, we briefly touched on how you could hide the default controls and show your own. Using the lessons from the other articles in this series, you should be capable of creating another view to layer on top as the controls. You can download the completed code from today’s walkthrough here.
