Overview of UI Customization Options

1 Colors
2 Images
3 Typography
4 Text

Colors

We provide a global color palette GiniColors.xcassets which you are free to override.
For example, if you want to override Accent01 color you need to create an Accent01.colorset with your wished value in your main bundle (or in a custom bundle if you set customResourceBundle in GiniConfiguration).

The custom colors are then applied to all screens.

Find the names of the color resources in the color palette:

Images

Customizing of images is done via overriding of drawable resources.

If you want to override specific SDK images:

Create an asset catalog for images called GiniImages.xcassets in your app.
Add your own images to GiniImages.xcassets using the image names from the SDK's UI customization guide. It is important to name the images you wish to override exactly as shown in the UI customization guide, otherwise overriding won’t work.

Typography

We provide global typography based on text appearance styles from UIFont.TextStyle.

Preview our typography and find the names of the style resources:

To override them in your application, use GiniConfiguration.updateFont(_ font: UIFont, for textStyle: UIFont.TextStyle), for example:


    // If you need to scale your font, use our method `scaledFont()`.
    let configuration = GiniBankConfiguration.shared
    let customFontToBeScaled = UIFont.scaledFont(UIFont(name: "Avenir", size: 20) ?? UIFont.systemFont(ofSize: 7, weight: .regular), textStyle: .caption1)
    configuration.updateFont(customFontToBeScaled, for: .caption1)

    // If you would like to pass us already scaled font.
    let customScaledFont = UIFontMetrics(forTextStyle: .caption2).scaledFont(for: UIFont.systemFont(ofSize: 28))
    configuration.updateFont(customScaledFont, for: .caption2)

Text

Text customization is done via overriding of string resources. If you plan to use a custom name for localizable strings, set it in GiniConfiguration.localizedStringsTableName.