Installation and usage of Transformations UI for iOS

Learn how to integrate Transformations UI in iOS using Swift Package Manager or Binary Frameworks.

Overview

In this tutorial we will explain how to integrate Transformations UI into a new iOS app using 2 installation methods: One based on Swift Package Manager, and another method using prebuilt Binary Frameworks using Apple’s XCFramework format.

Please notice that the Swift Package Manager release only contains support for Standard Modules, whether as the Binary Frameworks release includes support for both Standard and Premium Modules (to find out more about modules features, please check Modules Features.)

Requirements

In order to complete this tutorial, you will need Xcode 12 or later and your device or simulator must be running iOS 11.0 or later.

Installation

  1. Open Xcode and create a new project (File -> New Project), select iOS as the platform and App as the template.

  2. Name your project Transformations-UI-Demo, leaving all other settings as default.

  3. Right-click the following image and save it locally on your Mac. We will need it for our tutorial.

  4. Drag & drop the image you just downloaded into Assets.xcassets:

Integration using Swift Package Manager

  1. In Xcode, select the project Transformations-UI-Demo and activate tab Swift Packages.

  2. Click the plus (+) button and enter the package repository URL https://github.com/filestack/transformations-ui-ios using the default proposed rules.

  3. Make sure TransformationsUI package is checked and press Finish to finish the package import process.

Integration using Binary Frameworks

  1. In Xcode, from the project navigator, create a New Group and name it Dependencies.

  2. Go to https://github.com/filestack/transformations-ui-ios/releases and download the latest binary release available (at the time of writing this was TransformationsUI-XCFrameworks-1.0.0.zip).

  3. Unzip TransformationsUI-XCFrameworks-1.0.0.zip and select everything inside it from the Finder.

  4. Drag & drop your selection into Dependencies making sure that Copy items if needed is checked.

  5. Now, select the Transformations-UI-Demo target, expand Frameworks, Libraries, and Embedded Content and set all the added frameworks to Embed & Sign.

Basic Usage with Standard Modules

  1. Open ViewController.swift and add the following import:

    import TransformationsUI
  2. Add the following declaration:

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
    
        guard let image = UIImage(named: "original") else { return }
    
        let transformationsUI = TransformationsUI()
    
        transformationsUI.delegate = self
    
        if let editorVC = transformationsUI.editor(with: image) {
            editorVC.modalPresentationStyle = .fullScreen
            present(editorVC, animated: true)
        }
    }
  3. And finally, add conformance to TransformationsUIDelegate

    extension ViewController: TransformationsUIDelegate {
        func editorDismissed(with image: UIImage?) {
            if let image = image {
                // TODO: Do something with resulting image...
            }
        }
    }

Usage with Premium Modules

Prerequisites

  • You must have completed the previous step before.
  • You must use the integration method based on Binary Frameworks, since premium modules are only included in this release of Transformations UI.
  • Your Filestack account must have permissions to use Transformations UI, otherwise TransformationsUI will be configured to use Standard Modules.

Steps

  1. Import TransformationsUIShared and TransformationsUIPremiumAddOns:

    import TransformationsUI
    import TransformationsUIShared /* newly added */
    import TransformationsUIPremiumAddOns /* newly added */
  2. Replace the existing viewDidAppear(_:) implementation with this one, making sure to set your Filestack API key accordingly:

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
    
        guard let image = UIImage(named: "original") else { return }
    
        let modules: TransformationsUIShared.EditorModules
    
        do {
            modules = try PremiumModules(apiKey: "YOUR-API-KEY-HERE")
        } catch {
            modules = StandardModules()
        }
    
        let config = Config(modules: modules)
        let transformationsUI = TransformationsUI(with: config)
    
        transformationsUI.delegate = self
    
        if let editorVC = transformationsUI.editor(with: image) {
            editorVC.modalPresentationStyle = .fullScreen
            present(editorVC, animated: true)
        }
    }

End Notes

That’s all for this tutorial!

If you would like to know how to enable/disable modules or setup module features, please follow the following resources:

  • https://github.com/filestack/transformations-ui-ios#enabling-or-disabling-modules
  • https://github.com/filestack/transformations-ui-ios#enabling-or-disabling-module-features

Other Resources