JPEGmini iOS SDK Tutorial | Integrate & Optimize on iOS

JPEGmini

Pricing

Download Free Trial

JPEGmini

Pricing

Download Free Trial

JPEGmini iOS SDK

Collection View

In this section we'll setup a new project with a collection view displaying built in images.

Create Xcode Project

Launch Xcode and create a new project using the Single View template. Set the following options:

Project Name: JPEGmini Tutorial
Set Team, Organization Name and Organization Identifier to the appropriate values to you.
Language: Swift
User Interface: Storyboard
Leave the rest of the checkboxes unchecked

Setup Collection View in the storyboard

The single view project comes with a single view controller, we won't be needing that so let's delete "ViewController.swift". Now let's go into Main.storyboard and delete the existing view controller from there as well. Add a UICollectionViewController to the storyboard, make sure to check the Is Initial View Controller option on the new view controller. Select the Collection View in the outline on the left and set the cell size in the Size Inspector to 130 on 130. Also choose None in the Estimate Size popup. Now select the cell in the outline and choose Custom in the Size popup menu, the width and height should set automatically to 130. Now switch to the Attributes Inspector and set identifier to "imageItem".

From the Library, drag a UIImageView into the cell and size it to fill the cell. Bring up the Add New Constraints popover and mark the constraints in all four sides in the widget at the top. Press the Add 4 Constraints button to add the autoresizing constraints.

In the Attributes Inspector choose Aspect Fill for the Content Mode option and set Tag to 100

Gallery View controller

Add a new file to the project using the Cocoa Touch Class template.

Name the class

GalleryViewController

Make it a subclass of

UICollectionViewController

Language is, of-course, Swift. Also make sure to uncheck Also create XIB file as we are using a storyboard and not nibs with this project. Go back to Main.storyboard and select the Collection View Controller (make sure you select the actual view controller and not one of the views inside it). In the Identity inspector, set its Class to GalleryViewController.

Model class and dummy data

Out app core functionality is to take images from various sources (Camera, Photos Library or Files) optimize them using JPEGmini and allow the user to see both the original image and the optimized image for comparison. We will implement the core functionality of the app with our model class StoredImage stored image. As we progress through this tutorial we will add more features to this class but to get us started lets start with a mock implementation that will allow us to test our collection view. First, let's add some mock data to our app. Download download the sample-images package, unzip the images folder and drag it to your project. Check the Copy items if needed option and click Finish. Create a new file with Swift File template and call it "StoredImage". Set its contents to the following:

import UIKit

class StoredImage {
    var itemID : String

    init(withID anID: String) {
        itemID = anID
    }

    var originalImage : UIImage? {
        get {
            return UIImage(named: "img-\(itemID).jpeg")
        }
    }
    class var allImages : [StoredImage] {
        var images = [StoredImage]()
        for i in 1...10 {
            images.append(StoredImage(withID: String(i)))
        }
        return images
    }
}

Each instance of StoredImage represents an image which can have multiple versions. You can access the image version via properties. You can get an array of all available images from the allImages class property. The implementation here just wraps the images contained in the project and allows you to access only one version of the image (originalImage). While this implementation is a dummy implementation an has very little to do with the final implementation it nonetheless embodies the core principle that the image or image data is not stored in the class instance. Instead the class instance stores an id (itemID) which serves as a key to access the image data. When requested to return an image via the originalImage property it uses the id to access the data and creates a UIImage image object. Now that we have a dummy model class we can implement the collection view controller to display that model. Go to CollectionViewController.swift and set the reuseIdentifier to "imageItem"

During its execution, the application prints out the following information:

Application version
Name and size of input JPEG file
Name and size of output JPEG file
Recompression ratio: The ratio between the input and output file sizes, and the difference between them in percent.

Below is an example of a typical printout for a file processed by JPEGmini.

During its execution, the application prints out the following information:

Application version
Name and size of input JPEG file
Name and size of output JPEG file
Recompression ratio: The ratio between the input and output file sizes, and the difference between them in percent.

Below is an example of a typical printout for a file processed by JPEGmini.

private let reuseIdentifier = "imageItem"

Go to viewDidLoad() and remove the call to register(_, forCellWithReuseIdentifier:) Replace the implementations of numberOfSections(in:), collectionView(_: numberOfItemsInSection:) and collectionView(_: cellForItemAt:) with the following implementations:

override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return StoredImage.allImages.count
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)

        (cell.viewWithTag(100) as! UIImageView).image = StoredImage.allImages[indexPath[1]].originalImage

        return cell
    }

What this does is to make the collection view display a cell for each of the images returned by allImages.

Run the app and you should see the collection view.