Skip to end of banner
Go to start of banner

Overview of UI Customization Options

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

This page shows how you can customize the user experience and adapt the user interface to suit your preferences.

Colors

We are providing a global color palette GiniColors.xcassets which you are free to override. The custom colors will be then applied on all screens. You can find the names of the colors in GiniColors.xcassets.

You can view our color palette here:

Images

Images customization is done via overriding of GiniImages.xcassets resources.

Typography

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

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

    // If you need to scale your font please use our method `scaledFont()`. Please, find the example below.
    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, you need to set it in GiniBankConfiguration.localizedStringsTableName.

You can find all the string resources in Localizable.strings.

Custom UI elements

Certain elements of the UI can be fully customized via UI injection. It utilizes view adapter interfaces which you can implement and pass to GiniBank when configuring the SDK. These interfaces declare the contract the injected view has to fulfill and allow the SDK to ask for your view instance when needed.

Top navigation bar

Colors, typography, and texts can be customized as described above.

To inject your own navigation bar view, you need to pass your navigation view controller to GiniBankConfiguration.shared.customNavigationController. The view from the custom navigation view controller will then be displayed on all screens as the top navigation bar.

Bottom navigation bar

You can opt to show a bottom navigation bar. To enable it, pass true to GiniBankConfiguration.shared.bottomNavigationBarEnabled.

The top navigation bar will still be used, but its functionality will be limited to showing the screen’s title and an optional close button. Please inject a custom top navigation bar if your design requires it even if you have enabled the bottom navigation bar.

For each screen, we provide the possibility to inject a custom bottom navigation bar. More details will be added below during the specific screen customization.

  • No labels