Docs
v7
v6
API Docs

Introduction

The PhotoEditor SDK can be customized to meet your requirements. There are global settings to set things like the background color of the app, but also closures that allow an in-depth customization. Please note that by default the tint color determines the color of the icons. Of course, you are free to override that behavior.

In order to configure the PhotoEditor SDK, you have to modify the default configuration. The Configuration class contains all global settings and nested configurations for each submodule. We decided to use a builder-pattern, that means that the properties of any configuration object are read-only. The constructor of each configuration class has a parameter for its dedicated builder. Hence, all default settings of our SDK are set in the default builder classes. To change the configuration of any module, you have to set up your own builder, as follows:

...
let configuration = Configuration() { builder in
    builder.backgroundColor = .red
}

let cameraViewController = CameraViewController(configuration: configuration)
...
...
PESDKConfiguration *configuration = [[PESDKConfiguration alloc] initWithBuilder:^(PESDKConfigurationBuilder * _Nonnull builder) {
  builder.backgroundColor = UIColor.redColor;
}];

PESDKCameraViewController *cameraViewController = [[PESDKCameraViewController alloc] initWithConfiguration:configuration];
...

In order to modify the options of any specific tool, you need to modify the corresponding options using the same pattern. For example, changing the background color of the transform tool can be done using the following code:

let configuration = Configuration { builder in
  builder.configureTransformToolController { options in
    options.backgroundColor = .darkGray
  }
}
PESDKConfiguration *configuration = [[PESDKConfiguration alloc] initWithBuilder:^(PESDKConfigurationBuilder * _Nonnull builder) {
  [builder configureTransformToolController:^(PESDKTransformToolControllerOptionsBuilder * _Nonnull options) {
    options.backgroundColor = UIColor.darkGrayColor;
  }];
}];

For more configuration examples, please refer to the examples shown below or take a look at the demo repository . Or take a look at our default configuration in action and check out our example app .

Using the closures

Most configuration objects offer closures to setup UI elements individually. In that case, they usually come with an array of actions that determine the available actions. These closures will also have a cell and a menuItem as parameters. This is due to the fact that most of our controllers use UICollectionViews. For example, the main tool bar presents all available tools like filters and transform. The closure is then called for each of these menu items. If you wish to change the transform button icon you have to check the menu item and set the image accordingly.

builder.configurePhotoEditorViewController { options in
  options.actionButtonConfigurationClosure = { cell, menuItem in
    switch menuItem {
      case .tool(let toolMenuItem):
        if toolMenuItem.toolControllerClass == TransformToolController.self {
          cell.imageView.image = ...
        }
      default:
        break
    }

    cell.captionTintColor = UIColor.red
  }
}
[builder configurePhotoEditorViewController:^(PESDKPhotoEditViewControllerOptionsBuilder * _Nonnull options) {
  options.actionButtonConfigurationBlock = ^(PESDKIconCaptionCollectionViewCell * _Nonnull cell, PESDKPhotoEditMenuItem * _Nonnull menuItem) {
    if ([menuItem.toolMenuItem.title isEqualToString:@"Transform"]) {
      cell.imageView.image = ...
    }

    cell.captionTintColor = UIColor.redColor;
  };
}];