DS Photo Editor SDK

A Photo Editor Built for Developers

White-Label SDK For iOS

User Interface Customization

All the customization can be passed into the view controller by one dictionary as below:

let dsPhotoEditorViewController = DSPhotoEditorViewController(image: image, toolsToHide:nil)
dsPhotoEditorViewController!.delegate = self

dsPhotoEditorViewController!.dsDataBundle = [
            DS_BACKGROUND_COLOR: UIColor.init(red: 0.3, green: 0.3, blue: 0.3, alpha: 0.3),
            DS_HEADER_COLOR: UIColor.init(red: 0.337, green: 1, blue: 0.51, alpha: 1),
            DS_TEXT_COLOR: UIColor.black

]

picker.present(dsPhotoEditorViewController!, animated: true, completion: nil)

1. Colors:

You can change colors by setting the color code for DS_BACKGROUND_COLOR, DS_HEADER_COLOR and DS_TEXT_COLOR as below:

]

2. Images for Header buttons:

The top buttons for applying or cancelling an operation can be customized to have different icons. All you need to do is to pass in the UIImage you would like to use.

DS_ICON_APPLY: UIImage(named: "custom_top_bar_apply"),
DS_ICON_CANCEL: UIImage(named: "custom_top_bar_cancel")

Please make sure the images have proper sizes & colors to fit into the user interface. We provide some dimensions for the top button images as below.

We recommend an icon with size 220x220 and 50px padding for "3x" in your xCode assets such as "Assets.xcassets" .

Screen Shot 2018-11-12 at 2.59.57 PM.png

3. Images for Footer buttons:

The bottom image editing tool buttons can also be customized by setting UIImage values to the following keys in the customization dictionary:

DS_ICON_FILTER: UIImage(named: "dark_filter"),
DS_ICON_FRAME: UIImage(named: "dark_frame"),
DS_ICON_ROUND: UIImage(named: "dark_round"),
DS_ICON_EXPOSURE: UIImage(named: "dark_exposure"),
DS_ICON_CONTRAST: UIImage(named: "dark_contrast"),
DS_ICON_VIGNETTE: UIImage(named: "dark_vignette"),
DS_ICON_CROP: UIImage(named: "dark_crop"),
DS_ICON_CIRCLE: UIImage(named: "dark_circle"),
DS_ICON_ORIENTATION: UIImage(named: "dark_orientation"),
DS_ICON_SATURATION: UIImage(named: "dark_saturation"),
DS_ICON_SHARPNESS:UIImage(named: "dark_sharpness"),
DS_ICON_WARMTH: UIImage(named: "dark_warmth"),
DS_ICON_PIXELATE: UIImage(named: "dark_pixelate"),
DS_ICON_DRAW: UIImage(named: "dark_draw"),
DS_ICON_STICKER: UIImage(named: "dark_sticker"),
DS_ICON_TEXT: UIImage(named: "dark_text"),

Buttons on Orientation page, such as left/right rotate and horizontal/vertical flip, can be customized too:

DS_ICON_ORIENTATION_LEFT: UIImage(named: "orientation_dark_rotate_left"),
DS_ICON_ORIENTATION_RIGHT: UIImage(named: "orientation_dark_rotate_right"),
DS_ICON_ORIENTATION_HORIZONTAL: UIImage(named: "orientation_dark_flip_horizontal"),
DS_ICON_ORIENTATION_VERTICAL: UIImage(named: "orientation_dark_flip_vertical"),

We recommend an icon with size 220x220 and 30px padding for footer buttons as below:

Screen Shot 2018-11-12 at 2.56.48 PM.png

4. Custom Stickers:

You can use your own stickers to replace our built-in sticker images. This will remove all of our built-in stickers, and display your stickers instead.

You can simply pass in an array of image assets into the SDK in order to use your own stickers as below, before you present the view controller:

dsPhotoEditorViewController!.setCustomStickers(["custom_sticker_1", "custom_sticker_2", "custom_sticker_3", "custom_sticker_4", "custom_sticker_5", "custom_sticker_6", "custom_sticker_7", "custom_sticker_8", "custom_sticker_9", "custom_sticker_10"], in: Bundle.main);

NOTES: please make sure to use images in your xcassets and scale your stickers properly, so that they can fit into the SDK user interface. The bundle is also required in order for the SDK to display custom stickers.

Please avoid using large images or adding too many stickers, which may use up limited memory on older devices or slow down your app performance. The stickers used in this sample project are around 640px by 640px.

5. Monetize with banner ad or small native ad:

You can monetize your app by adding an ad view into our SDK user interface. The banner ad will be displayed near the bottom of the screen, and you are responsible for constructing the ad view and following the ad network's implementation guide & policy. You can choose your preferred ad network to integrate, such as AdMob or Amazon Mobile Ads.

All you need to do is to pass the ad view you constructed by calling "setCustomView" before presenting the view controller. When you construct your ad view, please do NOT set your ad view's position or constraint, since the SDK will position the ad view properly in the user interface.

You can set the height of your ad view, but the width of the ad view will take the full screen's width.

let admobBannerView = self.constructAdView(dsPhotoEditorViewController)
dsPhotoEditorViewController?.setCustomView(admobBannerView)

We provide a sample method for "constructAdView" as below, which uses AdMob banner ad as an example.

/**
     * This method uses AdMob banner ad view as an example, but you can also use other kinds of ad views from your chosen ad network. The AdMob banner ad in this example is using AdMob test ad unit. For more info about AdMob Test Ads, please refer to https://developers.google.com/admob/ios/test-ads. Please make sure to use your own ad unit id when publishing to Apple App Store.
     *
     * IMPORTANT NOTES: Please do NOT set your ad view's position or constraint, since the SDK will position the ad view properly in the user interface.
     */
    func constructAdView(_ dsPhotoEditorViewController: DSPhotoEditorViewController!) -> GADBannerView {
        let bannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)
        bannerView.translatesAutoresizingMaskIntoConstraints = false
        bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
        bannerView.delegate = self

        bannerView.rootViewController = dsPhotoEditorViewController
        bannerView.load(GADRequest())
        return bannerView;
    }

It is also important to make sure that the ad view will be removed from user interface when it failed to load, otherwise there will be a blank space displayed on screen. For the example AdMob banner view above, the way to do this is to call "removeFromSuperview" in the delegate method:

func adView(_ bannerView: GADBannerView,

didFailToReceiveAdWithError error: GADRequestError) {
bannerView.removeFromSuperview()
}