Liveness 3D - Tema Interativo
Plataforma interativa de customizações do Liveness3DTheme() para dispositivos iOS
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
Atributo | Tipo | Descrição |
---|---|---|
cancelButtonCustomizationCustomImage | UIImage | Cancela a operação e retorna para view anterior. |
cancelButtonCustomizationLocation | CancelButtonLocation | Enum que determina a posição do botão. Esquerda, deireita ou desabilitado. |
public enum CancelButtonLocation: Int {
case topLeft = 0
case topRight = 1
case disabled = 2
}
2. Frame
Atributo | Tipo | Descrição |
---|---|---|
frameCustomizationBorderWidth | Int32? | Modifica a largura da borda do frame. |
frameCustomizationCornerRadius | Int32 | Modifica o tamanho do arredondamento das bordas do frame. |
frameCustomizationBorderColor | UIColor? | Modifica a cor da borda do frame. |
frameCustomizationBackgroundColor | UIColor? | Modifica a cor de fundo do frame. |
3. Overlay
Atributo | Tipo | Descrição |
---|---|---|
overlayCustomizationBackgroundColor | UIColor? | Modifica a cor de fundo da camada de overlay. |
overlayCustomizationBrandingImage | UIImage? | Adiciona uma imagem na camada de overlay. |
overlayCustomizationShowBrandingImage | Bool | Propriedade booleana que ativa a visualização da imagem customizada. |
4 .Feedback Bar
Atributo | Tipo | Descrição |
---|---|---|
feedbackCustomizationCornerRadius | Int32? | Modifica o tamanho do arredondamento das bordas da barra. |
feedbackCustomizationBackgroundColor | CAGradientLayer? | Modifica a cor de fundo da barra. |
feedbackCustomizationTextColor | UIColor? | Modifica a cor do texto do feedback. |
feedbackCustomizationTextFont | UIFont? | Adiciona uma fonte customizada para o texto do feedback. |
feedbackCustomizationEnablePulsatingText | Bool | *** |
5. Oval
Atributo | Tipo | Descrição |
---|---|---|
ovarCustomizationStrokeWidth | Int32? | Modifica a largura da borda da camada oval. |
ovarCustomizationStrokeColor | UIColor | Modifica a cor da borda da camada oval. |
ovarCustomizationProgressStrokeWidth | Int32? | Modifica a largura da borda do progresso da camada oval. |
ovarCustomizationProgressColor1 | UIColor | Modifica a cor da borda de progresso da camada oval. |
ovarCustomizationProgressColor2 | UIColor | Modifica a cor da borda de progresso da camada oval. |
ovarCustomizationProgressRadialOffset | Int32? | Modifica o distânciamento da borda de progresso da camada oval. |
6. Botões
Atributo | Tipo | Descrição |
---|---|---|
guidanceCustomizationButtonFont | UIFont? | Adiciona uma fonte customizada para o texto do botão. |
guidanceCustomizationButtonTextNormalColor | UIColor? | Modifica a cor do texto do botão na sua condição padrão. |
guidanceCustomizationButtonBackgroundNormalColor | UIColor | Modifica a cor de fundo do botão na sua condição padrão. |
guidanceCustomizationButtonTextHighlightColor | UIColor? | Modifica a cor do texto do botão na sua condição de destaque. |
guidanceCustomizationButtonBackgroundHighlightColor | UIColor? | Modifica a cor de fundo do botão na sua condição de destaque. |
guidanceCustomizationButtonTextDisabledColor | UIColor? | Modifica a cor do texto do botão na sua condição de desabilitado. |
guidanceCustomizationButtonBackgroundDisabledColor | UIColor | Modifica a cor de fundo do botão na sua condição de desabilitado. |
guidanceCustomizationButtonBorderColor | UIColor? | Modifica a cor da borda do botão. |
guidanceCustomizationButtonBorderWidth | Int32? | Modifica a largura da borda do botão. |
guidanceCustomizationButtonCornerRadius | Int32? | Modifica o tamanho do arredondamento das bordas do botão. |
7. Frame Background
Atributo | Tipo | Descrição |
---|---|---|
guidanceCustomizationBackgroundColors | [UIColor]? | Modifica a cor de fundo e caso receba duas cores diferentes cria um degradê. |
8. Guidance
Atributo | Tipo | Descrição |
---|---|---|
guidanceCustomizationForegroundColor | UIColor? | Modifica a cor de fundo quando estiver em primeiro plano. |
guidanceCustomizationHeaderFont | UIFont? | Adiciona uma fonte customizada para o header. |
guidanceCustomizationSubtextFont | UIFont? | Adiciona uma fonte customizada para o subtext. |
Tela de pronto para começar
1. Header
Atributo | Tipo | Descrição |
---|---|---|
guidanceCustomizationReadyScreenHeaderFont | UIFont? | Adiciona uma fonte customizada para o header. |
guidanceCustomizationReadyScreenHeaderTextColor | UIColor? | Modifica a cor da fonte do texto. |
2. Subtext
Atributo | Tipo | Descrição |
---|---|---|
guidanceCustomizationReadyScreenSubtextFont | UIFont? | Adiciona uma fonte customizada para o subtext. |
guidanceCustomizationReadyScreenSubtextTextColor | UIColor? | Modifica a cor da fonte do texto. |
3. Textos
Observação:
As propriedades abaixo só serão aplicadas em telas pequenas.
Atributo | Tipo | Descrição |
---|---|---|
guidanceCustomizationReadyScreenOvarFillColor | UIColor? | *** |
guidanceCustomizationReadyScreenTextBackgroundColor | UIColor? | Modifica a cor de fundo. |
guidanceCustomizationReadyScreenTextBackgroundCornerRadius | Int32? | Modifica o tamanho do arredondamento das bordas. |
Tela de resultado
1. Activity
Atributo | Tipo | Descrição |
---|---|---|
resultScreenCustomizationForegroundColor | UIColor? | Modifica a cor de fundo quando estiver em primeiro plano. |
resultScreenCustomizationBackgroundColors | [UIColor]? | Modifica a cor de fundo e caso receba duas cores diferentes cria um degradê. |
resultScreenCustomizationActivityIndicatorColor | UIColor | Modifica a cor do activity indicator. |
resultScreenCustomizationCustomActivityIndicatorImage | UIImage? | Adiciona uma imagem customizada para o activity indicator. |
resultScreenCustomizationCustomActivityIndicatorRotationIntervar | Int32 | *** |
resultScreenCustomizationCustomActivityIndicatorAnimation | Int | *** |
resultAnimationStyle | ResultAnimationStyle | Determina o tipo de animação será utilizada juntamente com sua customização. |
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
Atributo | Tipo | Descrição |
---|---|---|
resultScreenCustomizationShowUploadProgressBar | Bool | Propriedade booleana que ativa a visualização da barra de progresso. |
resultScreenCustomizationUploadProgressFillColor | UIColor | Modifica a cor do preenchimento da barra de progresso. |
resultScreenCustomizationUploadProgressTrackColor | UIColor | Modifica a cor da barra de progresso. |
3. Animação
Atributo | Tipo | Descrição |
---|---|---|
resultScreenCustomizationAnimationRelativeScale | Float | *** |
resultScreenCustomizationResultAnimationBackgroundColor | UIColor | Modifica a cor de fundo da imagem que aparece após a animação finalizar. |
resultScreenCustomizationResultAnimationForegroundColor | UIColor | Modifica a cor do icone que vai aparecer em primeiro plano após a animação finalizar. |
resultScreenCustomizationResultAnimationSuccessBackgroundImage | UIImage? | Adiciona uma imagem customizada após a animação finalizar com sucesso. |
resultScreenCustomizationResultAnimationUnSuccessBackgroundImage | Int | Adiciona uma imagem customizada após a animação finalizar com erro. |
resultScreenCustomizationCustomResultAnimationSuccess | Int | *** |
resultScreenCustomizationCustomResultAnimationUnSuccess | Int | *** |
resultScreenCustomizationCustomStaticResultAnimationSuccess | Int | *** |
resultScreenCustomizationCustomStaticResultAnimationUnSuccess | Int | *** |
4. Mensagem de sucesso
Atributo | Tipo | Descrição |
---|---|---|
resultScreenCustomizationMessageFont | UIFont? | Adiciona uma fonte customizada para a mensagem de sucesso. |
Tela de tente novamente
1. Header
Atributo | Tipo | Descrição |
---|---|---|
guidanceCustomizationRetryScreenHeaderFont | UIFont? | Adiciona uma fonte customizada para a mensagem do header. |
guidanceCustomizationRetryScreenHeaderTextColor | UIColor? | Modifica a cor da fonte do header. |
2. Customização do Subtext
Atributo | Tipo | Descrição |
---|---|---|
guidanceCustomizationRetryScreenSubtextFont | UIFont? | Adiciona uma fonte customizada para a mensagem do subtext. |
guidanceCustomizationRetryScreenSubtextTextColor | UIColor? | Modifica a cor da fonte do subtext. |
4. Imagem
Atributo | Tipo | Descrição |
---|---|---|
guidanceCustomizationRetryScreenImageBorderColor | UIColor | Modifica a cor da borda do preview da imagem de retentativa. |
guidanceCustomizationRetryScreenImageBorderWidth | Int32? | Modifica a largura da borda do preview da imagem de retentativa. |
guidanceCustomizationRetryScreenImageCornerRadius | Int32? | Modifica o tamanho do arredondamento das bordas. |
guidanceCustomizationRetryScreenOvarStrokeColor | UIColor? | Modifica a cor da borda do preview oval da imagem de retentativa. |
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
Descrição | Customização |
---|---|
Exemplo da Animação | A customização da animação de Blob é definida pelos parâmetros do Liveness3DTheme listadosna tabela abaixo: |
Indice | Propriedade | Tipo | Descrição |
---|---|---|---|
(1) | resultScreenCustomizationActivityIndicatorColor | UIColor | Altera a cor do blob |
(2) | resultScreenCustomizationResultAnimationForegroundColor | UIColor | Altera a cor do checkmark ao final da animação de carregamento. |
(3) | resultScreenCustomizationResultAnimationBackgroundColor | UIColor | Altera a cor do circulo do checkmark ao final da animação de carregamento. |
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
SpinnerAnimationCustomization
Indice | Propriedade | Tipo | Descrição |
---|---|---|---|
(1) | spinnerColor | UIColor | Altera a cor do spinner |
(2) | indicatorForegroundColor | UIColor | Altera a cor do checkmark ao final da animação de carregamento. |
(3) | indicatorBackgroundColor | UIColor | Altera a cor do circulo do checkmark ao final da animação de carregamento. |
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
CustomResultAnimationDelegate
Indice | Método | Tipo de retorno | Descrição |
---|---|---|---|
(1) | createActivityIndicatorView() | UIView? | Altera a cor do spinner |
(2) | createSuccessAnimationView() | UIView? | Altera a cor do checkmark ao final da animação de carregamento. |
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
Updated 15 days ago