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

photo-editing-app-like-retrica

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’.

create-a-New-Project

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.

set-product-name

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.

Set-the-UI-of-your-project

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.

import UIKit

class ViewController: UIViewController,UIImagePickerControllerDelegate, UINavigationControllerDelegate {

Step: 1

Step 1:- Create IBOutlet Of ImageView

    //MARK: - IBOutlet Of ImageView
    @IBOutlet weak var imgView: UIImageView!

Step: 2

Create Button Action For Fetch Image In Camera

//MARK: - Action for fetch image from Camera
    @IBAction func actionClickOnCamera(_ sender: UIButton) {
        //This condition is used for check availability of camera
        if UIImagePickerController.isSourceTypeAvailable(UIImagePickerController.SourceType.camera){
            let imagePicker = UIImagePickerController()
            imagePicker.allowsEditing = true;
            imagePicker.sourceType = UIImagePickerController.SourceType.camera
            imagePicker.delegate = self
            present(imagePicker, animated: true, completion: nil)
        }else{
            let alert = UIAlertController(title: "Alert", message: "You don't have a camera for this device", preferredStyle: UIAlertController.Style.alert)
            alert.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))
            self.present(alert, animated: true, completion: nil)
        }
    }

Step: 3

Create Button Action For Fetch Image In Gallery

//MARK: - Action for fetch image from Gallery
    @IBAction func actionClickOnGallery(_ sender: UIButton) {
        let imagePicker = UIImagePickerController()
        imagePicker.allowsEditing = true;
        imagePicker.sourceType = UIImagePickerController.SourceType.photoLibrary
        imagePicker.delegate = self
        present(imagePicker, animated: true, completion: nil)
    }

Step: 4

Create UIImagePickerDelegate Methods

// MARK: - UIImagePickerControllerDelegate Methods
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let image = info[UIImagePickerController.InfoKey.originalImage]
        {
            imgView.image = image as? UIImage
        }
        else
        {
            //error
        }
        self.dismiss(animated: true, completion: nil)
    }
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        dismiss(animated: true, completion: nil)
    }
}

Output

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.

 
 

Have an App Idea?

Get your free consultation now

Leave a Reply

Your email address will not be published. Required fields are marked *