iOS Tutorial: How To Make A Photo Editing App Like Retrica [Part 1]

0
Shares
iOS Tutorial: How To Make A Photo Editing App Like Retrica [Part 1]
4.3 (85%) 4 votes

Have you ever used famous photo editing apps like Instagram, Pixlr, Facetune, or Retrica? After seeing the success of these apps, you might have thought that it must have required a lot of time to develop it successfully.

Well, in reality, developing photo editing apps isn’t that much complex as you think.

Let’s take a Retrica as an example.

We will guide you how you can make an app like Retrica. It’s as simple as 1-2-3.

All you need to have is a basic coding experience.

In this iOS tutorial, we’re going to cover the process of using built-in camera of iPhone or iPad/iPod to capture a photo. Plus, we’ll include the process of how to access the photo library and allow users to select a photo.

In order to access the camera, we’ll need to use the class ‘UIImagePickerController’ from an iOS library. This class is responsible for the user interface to manage the user interaction with a camera and/or photo library.

Let’s get started with the steps.

Step: 1

Open Xcode and create a New Project. Remember, choose the template ‘Single View Application’ shown as below and click on ‘Next’.

ImagePicker1

Step: 2

In the next step, enter ‘SOPhotoEditing’ as the product name and set ‘com.extension’ as the company identifier field. Then, select ‘Swift’ as a language and ‘iPhone’ as a device and click on ‘Next’ button.

ImagePicker2

Step: 3

Once you finish the above steps, Set the UI of your project according to your needs or you can just do as we’ve done.

ImagePicker3

 

Step: 4

Now, we’ll need to set a delegate to deal with the user interaction with camera and photo library. To do that, select ‘ViewController.Swift’ file from left side tab and set the delegate as shown in below image.

ImagePicker5

Step: 5

After setting the delegates, create an outlet of ‘UIImageView’ and add action to capture an image and get an image from photo library as shown below.

@IBOutlet weak var imgView: UIImageView!

@IBAction func actionClickOnCamera(sender: AnyObject) {

}

@IBAction func actionClickOnGallery(sender: AnyObject) {

}

Step: 6

When you click on “Photo From Camera”, following method will be called.

//Action for capture image from Camera

@IBAction func actionClickOnCamera(sender: AnyObject) {

//This condition is used for check availability of camera

if UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.Camera){

let imagePicker = UIImagePickerController()
imagePicker.allowsEditing = true;
imagePicker.sourceType = UIImagePickerControllerSourceType.Camera
imagePicker.delegate = self
presentViewController(imagePicker, animated: true, completion: nil)
}else{
let alert = UIAlertController(title: "Alert", message: "You don't have a camera for this device", preferredStyle: UIAlertControllerStyle.Alert)
alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Default, handler: nil))
self.presentViewController(alert, animated: true, completion: nil)
}
}

For open a camera UIImagePickerControllerSourceType should be “Camera”.
If you need to allow user to edit photo during capture image then you have to set

imagePicker.allowsEditing = true;

By if-else condition, we check device compatibility for the camera.

if UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.Camera){
}

Step: 7

Next, when you click on “Photo From Gallery”, it will call the following method.

//Action for fetch image from Gallery

@IBAction func actionClickOnGallery(sender: AnyObject) {
let imagePicker = UIImagePickerController()
imagePicker.allowsEditing = true;
imagePicker.sourceType = UIImagePickerControllerSourceType.PhotoLibrary
imagePicker.delegate = self
presentViewController(imagePicker, animated: true, completion: nil)
}

To open camera UIImagePickerControllerSourceType should be “PhotoLibrary”.

NOTE: if you need to show all the albums of your Gallery you can use UIImagePickerControllerSourceType “SavedPhotosAlbum”.

Delegate Methods of UIImagePickerController

// When picking image then this delegate method will call

func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
imgView.image = info[UIImagePickerControllerEditedImage] as? UIImage
dismissViewControllerAnimated(true, completion: nil)
}

If you want to differentiate the type of picking photo you can do it by following code keep in “didFinishPickingMediaWithInfo”

if picker.sourceType == .Camera {

// Image captured from Camera

}
else {

// Image, taken from another resource(Photo Gallery, Photo Album)

}

// When user cancels, this delegate will be call

func imagePickerControllerDidCancel(picker: UIImagePickerController)
{
dismissViewControllerAnimated(true, completion: nil)
}

Once, you follow these steps, your app will be ready and it can be tested on a physical device. If you’ll try to run this app on a simulator, it will show you our predefined error message “You don’t have a camera for this device”. You’ll be only able to choose a photo from photo library when testing on a simulator. Better use an actual physical device to test this application.

In the 2nd part of this series, we have explained how you can crop an image captured from a camera or selected from the photo library. Do remember to read it. Get ready to create an app like Retrica.

If you face any type of problem during this iOS app tutorial, you can just contact our experienced developers for help. Our iOS app developers have already worked on an app like Retrica named ‘Slide Show Maker’. You can check photo apps developed by our iOS developers.

If you want to download the entire source code, click the following button.

And, if you have your own app idea like Retrica and looking for a mobile app development company to add some new features, contact us.

 
0
Shares
 

LET'S TALK VALIDATE YOUR IDEA!