Preview Controllers

  • Preview controllers let you draw any image or video based Session object.

    For example, you can use the PreviewController class to display the contents of a session found in the savedSessions array (user Drafts) or even a Session you have just initialized. You configure a preview controller programmatically by adding its view as a subview to the view of your choosing. For video, you can also use methods of this class to start or stop the video and specify other playback parameters.

    The preview controller will also display programmatic edits that are made on a session in real-time.

    Figure 1 Preview controller

    Preview controller

    A preview controller uses the contentMode variable and the size of the media itself to determine how to display the media. The preview controller can scale your media to fit all or some of the available space. If the size of the preview controller changes, it automatically scales the media as needed.

    The presentation of the media is determined by the preview controllers contentMode property. The contentAspectFit and contentAspectFill values scale the media to fit or fill the space while maintaining the media’s original aspect ratio. The contentFill value scales the media without regard to the original aspect ratio, which can cause the media to appear distorted.

    The below example creates a preview controller, adds it as a child of your controller and as a subview of your view. It then anchors the preview controller 30 points from the left of your view and 100 points from the top of your view. The preview controller is also given a height of 200 points and a width of 200 points.

    override func viewDidLoad() {
        let controller = PreviewController()
        controller.view.translatesAutoresizingMaskIntoConstraints = false
        controller.view.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 30).isActive = true
        controller.view.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 100).isActive = true
        controller.view.heightAnchor.constraint(equalToConstant: 200).isActive = true
        controller.view.widthAnchor.constraint(equalToConstant: 200).isActive = true
        controller.session = <#Your Session#>
    See more



    public class PreviewController : UIViewController
  • The PreviewCropController handles cropping for media in the LibraryController.

    Figure 1 Preview crop controller

    Preview crop controller

    The crop controller can be accessed with the following:

    let cropController = containerController.libraryController.previewCropController

    The below examples demonstrate a few custom variations in cropping behavior.

    Allow only content of a specific aspect ratio. For example square content only:

    cropController.aspectRatio = CGSize(width: 1, height: 1)

    Allow only content of a maximum aspect ratio. This is the default functionality.

    cropController.maxRatioForPortraitMedia = CGSize(width: 3, height: 4)
    cropController.maxRatioForLandscapeMedia = CGSize(width: 16, height: 9)

    Set content initially zoomed in or out. For example initially zoomed out:

    cropController.defaultsToAspectFillForPortraitMedia = false
    cropController.defaultsToAspectFillForLandscapeMedia = false

    Apply no initial cropping, unless the user interacts with the cropper:

    cropController.maxRatioForPortraitMedia = CGSize(width: 1, height: .max)
    cropController.maxRatioForLandscapeMedia = CGSize(width: .max, height: 1)
    cropController.defaultsToAspectFillForPortraitMedia = false
    cropController.defaultsToAspectFillForLandscapeMedia = false

    Disable cropping from user interaction:

    cropController.userInteractionEnabled = false

    If the last two examples are combined, cropping will be disabled entirely.

    See more



    public class PreviewCropController : UIViewController