1. Guia Rápido

O Tema Interativo para personalização do SDK iOS é uma plataforma essencial que permite a seleção de cores, bordas, arredondamento de bordas e sombreamento. Isso simplifica a geração de código, possibilitando a fácil implementação no seu Liveness 3D.

Aprenda a personalizar o Liveness 3D iOS e integrar as propriedades customizadas em seu código de forma simples e ágil.

Siga os passos para interagir com o Tema Interativo.

Antes de começar

Primeiramente, é essencial seguir algumas etapas sequenciais.

• Será necessário importar as fontes desejadas para uma pasta de fontes do seu ambiente Swift, criando uma pasta para as fontes e em seguida com o botão direito na pasta clique em "Add Files to [Nome do Projeto]"

• Após efetuar essa importação você deve criar a propriedade caso não exista chamada de Fonts provided by application com as fontes desejadas no seu arquivo info.plist utilizando o "value" como nome da fonte.

Telas para customização

O Tema Interativo apresenta três telas de customização que orientam o usuário durante a execução do Liveness 3D:

• Na primeira tela, encontramos as instruções para a preparação do usuário, sendo o ponto inicial de interação com o Liveness 3D.
• A segunda tela é destinada à retentativa. Caso o usuário precise refazer a jornada, essa tela fornece diretrizes, incluindo um exemplo de foto ideal.
• A terceira tela consiste na tela de resultado. Nela, o usuário recebe a mensagem de conclusão do processo de Liveness.

Propriedades customizáveis

As propriedades destinadas à customização estão localizadas na segunda coluna do iframe. Nesta coluna, é possível encontrar o nome da propriedade (1) e sua respectiva descrição (2).

Para exportar o código das customizações

Passo 1: visualize o código

Após concluir todas as personalizações, é necessário clicar no botão "código" (1) para visualizar todas as modificações realizadas e, em seguida, exportá-las para incorporação no seu projeto iOS.

Passo 2: inicie a classe do Liveness3DTheme()

Utilize o exemplo a seguir para iniciar o builder do tema com a classe Liveness3DTheme() do módulo OILiveness3D:

var theme = Liveness3DTheme(.light)

Passo 3: identifique e implemente as propriedades

A classe inclui uma série de propriedades que podem ser customizadas, divididas em categorias como Botões, Ready e Retry Screen, entre outras.

O código das propriedades customizadas também reflete essa série mencionada anteriormente. Identifique e implemente de acordo com as respetivas customizações.

2. Tema Interativo

Use a plataforma para iniciar as customizações do Liveness 3D.

3. Propriedades customizáveis

Abaixo, estão mapeadas as propriedades para customização do Liveness3DTheme.

Elementos comuns

1. Botão de cancelar

public enum CancelButtonLocation: Int {
    case topLeft = 0
    case topRight = 1
    case disabled = 2
}

2. Frame

3. Overlay

4 .Feedback Bar

5. Oval

6. Botões

8. Guidance

Tela de pronto para começar

1. Header

2. Subtext

3. Textos

Observação:
As propriedades abaixo só serão aplicadas em telas pequenas.

Tela de resultado

1. Animação de carregamento

public enum ResultAnimationStyle {
    case blob(appearance: BlobAnimationAppearance)
    case spinner(appearance: SpinnerAnimationAppearance)
    case image(appearance: ImageAnimationAppearance)
    case custom(delegate: CustomResultAnimationDelegate)
}

Mais detalhes na seção Animação

A propriedade resultScreenCustomizationAnimationStyle customiza ambos os itens 1 e 3.

2. Barra de carregamento

4. Mensagem de sucesso

Tela de tente novamente

1. Header

2. Subtext

4. Imagem

Animação

A animação da tela de resultado pode assumir três valores: blob(appearance:), spinner(appearance:), image(appearance:) ou custom(delegate:), esses valores são atribuídos a propriedade resultScreenCustomizationAnimationStyle do Liveness3DTheme. Caso nenhum valor seja atribuído a essa propriedade o valor spinner será aplicado por padrão.

var theme = Liveness3DTheme(.light)

theme.resultScreenCustomizationAnimationStyle = .blob(appearance: CustomAppearance())
theme.resultScreenCustomizationAnimationStyle = .spinner(appearance: CustomAppearance())
theme.resultScreenCustomizationAnimationStyle = .image(appearance: CustomAppearance())
theme.resultScreenCustomizationAnimationStyle = .custom(delegate: CustomDelegate())

Blob Animation

Descrição	Animação	Customização
Exemplo da Animação		A customização da animação de Blob é feita através do objeto do tipo BlobAnimationAppearance.

BlobAnimationAppearance

Código de customização

let appearance = BlobAnimationAppearance(
    blobColor: .blue,
    checkmarkForegroundColor: .systemPink,
    checkmarkBackgroundColor: .yellow
)
theme.resultScreenCustomizationAnimationStyle = .blob(appearance: appearance)

Resultado

Spinner Animation

Descrição	Animação	Customização
Exemplo da Animação		A customização da animação de Spinner é feita através do objeto do tipo SpinnerAnimationAppearance.

SpinnerAnimationAppearance

Código de customização

let appearance = SpinnerAnimationAppearance(
    spinnerColor: .red,
    indicatorForegroundColor: .yellow,
    indicatorBackgroundColor: .blue
)
theme.resultScreenCustomizationAnimationStyle = .spinner(appearance: appearance)

Resultado

Custom Animation

Descrição	Animação	Customização
Exemplo da Animação		A animação personalizada é feita através de um objeto que deve estar em conformidade com o protocolo CustomResultAnimationDelegate.

CustomResultAnimationDelegate

Código de customização

class CustomResultAnimation: CustomResultAnimationDelegate {
    func createActivityIndicatorView() -> UIView? {
        let activityIndicator = UIView()
        activityIndicator.backgroundColor = .red
        return activityIndicator
    }
    
    func createSuccessAnimationView() -> UIView? {
        let successAnimation = UIView()
        successAnimation.backgroundColor = .blue
        return successAnimation
    }
}

theme.resultScreenCustomizationAnimationStyle = .custom(delegate: CustomResultAnimation())

Resultado