Skip to main content

UI Customization on iOS

Introduction​

Appearance for the UI elements provided by the SDK can be customized completely or partially by creating Appearance object, modifying its properties and applying it to Wallet.instance. Certain components offer complete appearance overrides, enabling you to detach their styles from the global appearance. While this approach requires more detailed configuration, it offers enhanced flexibility for creating unique designs.

Appearance​

var appearance = Appearance.defaultAppearance

appearance.cornerRadius = Appearance.CornerRadius(small: 1, medium: 4, large: 8)
appearance.fonts = Appearance.Fonts(text1: UIFont.italicSystemFont(ofSize: 14),
                                    text2: UIFont.boldSystemFont(ofSize: 14))
appearance.colors.background.base = .lightGray

Wallet.instance.setAppearance(appearance)

Appearance should be configured once before using any UI provided by the SDK.

Customize individual components​

Certain components offer complete appearance overrides, enabling you to detach their styles from the global appearance. Here's how you configure individual components style configurations.

Wallet.instance.setAppearance(Appearance.defaultAppearance)
Wallet.instance.setStyleConfigurations(
    .init(buttonStyleConfigurations: buttonStyleConfigs,
          textFieldStyleConfiguration: textFieldStyleConfig,
          checkboxStyleConfiguration: checkboxStyleConfig,
          linksLabelStyleConfiguration: linksLabelStyleConfig
    )
)

You can customize only some of the components if you want.

Wallet.instance.setAppearance(Appearance.defaultAppearance)
Wallet.instance.setStyleConfigurations(
    .init(buttonStyleConfigurations: buttonStyleConfigs,
          textFieldStyleConfiguration: textFieldStyleConfig
    )
)

Bellow are more details about each components customization.

Button​

The Button component provides the following customization options:

  • colors - Configure background, foreground, and border colors for various UI states, including normal, pressed, disabled, and loading.
  • font - Set the font used within the component.
  • cornerRadius - Adjust the cornerRadius to modify the button's shape.
  • borderWidth - Define the borderWidth for the button's outline.
  • contentEdgeInsets - Customize contentEdgeInsets to control padding within the button
let primaryButtonStyleConfig = StyleConfigurations.ButtonStyleConfiguration(
    titleTextStyle: .subtitle2,
    enabledColors: .init(background: .green, foreground: .white, border: .clear),
    pressedColors: .init(background: .systemGreen, foreground: .white, border: .clear),
    disabledColors: .init(background: .gray, foreground: .white, border: .clear),
    loadingColors: .init(background: .gray, foreground: .white, border: .clear),
    contentEdgeInsets: .init(top: 8, left: 16, bottom: 8, right: 16),
    cornerRadius: 2,
    borderWidth: 4
)
// ... secondaryButtonStyleConfig
let buttonStyleConfigs: StyleConfigurations.ButtonStyleConfigurations = .init(
    primary: primaryButtonStyleConfig,
    secondary: secondaryButtonStyleConfig
)

TextField​

The TextField component allows customizing the following:

Text Styles​

The TextField supports customization of text styles for various elements:

  • textFieldTextStyle - Defines the font style for the main text entered in the text field.
  • floatingLabelTextStyle - Specifies the font style for the floating label.
  • hintLabelTextStyle - Sets the font style for the hint label.
Colors​

You can customize the colors for different elements and states of the TextField:

  • Background View:
    • backgroundViewColor - Default background color.
      • backgroundViewFocusedColor - Background color when focused.
      • backgroundViewDisabledColor - Background color when disabled.
  • Text Field:
    • textFieldColor - Text color for enabled state.
    • textFieldDisabledColor - Text color for disabled state.
  • Hint Text:
    • hintTextColor - Color for the hint text.
    • hintTextDisabledColor - Color for the hint text when disabled.
  • Floating Label:
    • floatingLabelColor - Default floating label color.
    • floatingLabelDisabledColor - Floating label color when disabled.
    • floatingLabelErrorColor - Color for floating label in error state.
    • floatingLabelActiveColor - Color for floating label when active.
  • Other Colors:
    • errorTextColor - Color for error messages.
    • placeholderColor - Placeholder text color.
    • placeholderDisabledColor - Placeholder text color when disabled.
    • tintColor - Tint color for selection indicators.
Insets​

The TextField provides precise control over spacing and layout through insets:

  • Floating Label:
    • floatingLabelHorizontalOffset - Horizontal offset for the floating label.
    • floatingLabelTopOffset - Top offset for the floating label.
  • Hint Label:
    • hintLabelHorizontalOffset - Horizontal offset for the hint label.
    • hintLabelTopOffset - Top offset for the hint label.
    • hintLabelBottomOffset - Bottom offset for the hint label.
  • Other Insets:
    • textRectYOffsetDelta - Fine-tunes the vertical alignment of text within the field.
    • backgroundViewBottomOffset - Adjusts the spacing at the bottom of the background view.
    • textHorizontalOffset - Horizontal padding for text content.
    • textTopOffset - Top padding for text content.
    • placeholderLabelHorizontalOffset - Horizontal offset for the placeholder label.
    • iconsHorizontalOffset - Horizontal offset for icons.
    • iconsVerticalOffset - Vertical offset for icons.
Additional Properties​
  • leadingOrTrailingViewAlpha - Alpha transparency for leading/trailing views.
  • leadingOrTrailingViewDisabledAlpha - Alpha transparency for leading/trailing views when disabled.
  • backgroundViewCornerRadius - Corner radius for the background view.

CheckBoxButton​

The CheckBoxButton component allows customizing the following:

  • viewSize - Set the viewSize of the checkbox.
  • onImage and offImage: Customize the images used to draw the checkbox.
  • tintColors - Define tintColors to control colors for different states - enabledAndSelected, enabledAndNotSelected, notEnabledAndSelected and notEnabledAndNotSelected.
let checkboxStyleConfig = StyleConfigurations.CheckboxStyleConfiguration(
    tint: .init(enabledAndSelected: .blue,
                enabledAndNotSelected: .gray,
                notEnabledAndSelected: .blue.withAlphaComponent(0.7),
                notEnabledAndNotSelected: .gray.withAlphaComponent(0.7))
)
note

It is recommended that you only override the Global appearance. This way, you'll ensure that your app experience will be the same in every flow. Having a semantic color palette will maintain consistency and ensure accessibility across the product's visual identity. However, you may give a unique look to the components mentioned above, following the examples.