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 apartado OILiveness3D ou monolítico FaceCaptcha:

var theme = Liveness3DTheme(Liveness3DThemeType.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

7. Frame Background

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. Activity

public enum ResultAnimationStyle {
    case blob
    case spinner(SpinnerAnimationCustomization)
    case custom(CustomResultAnimationDelegate)
}

public struct SpinnerAnimationCustomization {
    let spinnerColor: UIColor
    let indicatorForegroundColor: UIColor
    let indicatorBackgroundColor: UIColor
}

public protocol CustomResultAnimationDelegate {
    func createActivityIndicatorView() -> UIView?
    func createSuccessAnimationView() -> UIView?
}

2. Barra de carregamento

3. Animação

4. Mensagem de sucesso

Tela de tente novamente

1. Header

2. Customização do Subtext

4. Imagem

Animação

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

var theme = Liveness3DTheme(.light)

theme.resultAnimationStyle = .blob
theme.resultAnimationStyle = .spinner(customization)
theme.resultAnimationStyle = .custom(delegate)

Blob Animation

Código de customização

theme.resultScreenCustomizationActivityIndicatorColor = .blue
theme.resultScreenCustomizationResultAnimationForegroundColor = .systemPink
theme.resultScreenCustomizationResultAnimationBackgroundColor = .yellow
theme.resultAnimationStyle = .blob

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 SpinnerAnimationCustomization.

SpinnerAnimationCustomization

Código de customização

let customization = SpinnerAnimationCustomization(
    spinnerColor: .red,
    indicatorForegroundColor: .yellow,
    indicatorBackgroundColor: .blue
)
theme.resultAnimationStyle = .spinner(customization)

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.resultAnimationStyle = .custom(CustomResultAnimation())

Resultado