Doc Core

Guia de customização de telas para o Doc Core iOS.

📝

Uso do termo Doc Core

Nesta seção, compreende-se por Doc Core o módulo Documentscopy dentro do SDK.

Além de poder usar o SDK em sua forma padrão de exibição, o SDK permite também, que as telas sejam completamente customizadas.

A customização das telas é feita por meio da criação de objetos do tipo UIView (via código ou via Interface Builder), que implementam os protocolos definidos para cada tela do fluxo apresentado pelo SDK.

💡

Elementos adicionais

Além das telas obrigatórias, a tela customizada pode conter outros elementos, apenas tomando cuidado para que estes itens adicionais não interfiram no comportamento dos elementos obrigatórios.

As telas customizadas são passadas como argumento para o construtor da classe DocumentscopyViewController.

ParâmetroDescrição
showFeedbackValor booleano que indica se a tela de resultado deve ser apresentada ou não.
customInstructionViewObjeto contendo a customização da tela de instruções.
customViewObjeto contendo a customização da tela de captura de documento.
customLoadingViewObjeto contendo a customização da tela de processamento do documento.
customResultViewObjeto contendo a customização da tela de resultado do processamento.
customCameraPermissionViewObjeto contendo a customização da tela de permissão de câmera.

💡

Nota

  1. O parâmetro showFeedback é opcional e possui true como valor padrão;
  2. Os parâmetros customInstructionView, customView, customLoadingView, customResultView e customCameraPermissionView são opcionais.

1. Tela de instruções

ParâmetrocustomInstructionView

Essa tela deve estar conforme com o protocolo DocumentscopyCustomInstructionView que contém as seguintes propriedades:

IdentificadorDescrição
(1) backButtonBotão para função voltar da navegação.
(2) continueButtonBotão para iniciar o fluxo de captura do documento.

Descrição

Método

Método responsável por indicar o estado do loading na tela de instruções, podendo receber dois valores:

  • hidden (esconder o loading);
  • displayed (mostrar o loading).

changeLoadingVisibility(to:)

Builder de customização

No DocumentscopyCustomizationBuilder você terá acesso a todos os elementos listados a seguir:

Identificador

Método

(1) Back button

setInstructionBackButtonIcon(_:)
setInstructionBackButtonColors(forIcon:)
setInstructionBackButtonColors(forIcon:background:border:)

(2) Background

setInstructionBackgroundColor(_:)

(3) Bottom sheet

setInstructionBottomSheet(withColor:)
setInstructionBottomSheet(withColor:radius:)

(4) Loading

setInstructionLoadingColor(_:)

(4) Context image

setInstructionContextImage(_:)

(5) Title

setInstructionTitle(withText:)
setInstructionTitle(withText:color:font:)

(6) Caption

setInstructionCaption(withText:)
setInstructionCaption(withText:color:font:)

(7) Document option

setInstructionDocOptionImage(_:)
setInstructionDocOptionTitle(withText:)
setInstructionDocOptionTitle(withText:color:font:)
setInstructionDocOptionBackgroundColor(_:)
setInstructionDocOptionBorder(withColor:)
setInstructionDocOptionBorder(withColor:width:radius:)
setInstructionDocOptionIcon(_:)
setInstructionDocOptionIcon(_:color:)

(8) Environment option

setInstructionEnvOptionImage(_:)
setInstructionEnvOptionTitle(withText:)
setInstructionEnvOptionTitle(withText:color:font:)
setInstructionEnvOptionBackgroundColor(_:)
setInstructionEnvOptionBorder(withColor:)
setInstructionEnvOptionBorder(withColor:width:radius:)
setInstructionEnvOptionIcon(_:)
setInstructionEnvOptionIcon(_:color:)

(9) Continue button

setInstructionContinueButton()
setInstructionContinueButton(backgroundColor: highlightedBackgroundColor: borderColor: highlightedBorderColor: contentColor: highlightedContentColor: textColor: font:)

Código de exemplo do Builder

let customization = DocumentscopyCustomizationBuilder.builder()
    .setInstructionBackButtonIcon(UIImage(named: "back_button_icon"))
    .setInstructionBackButtonColors(
        forIcon: UIColor.red,
        background: UIColor.black,
        border: UIColor.white
    )
    .setLoadingBackgroundColor(UIColor.green)
		.setInstructionContextImage(UIImage(named: "context_image"))
    .setInstructionBottomSheet(withColor: UIColor.black, radius: CGFloat(5))
    .setInstructionLoadingColor(UIColor.white)
    .setInstructionTitle(
        withText: "Titulo",
        color: UIColor.black,
        font: UIFont.systemFont(ofSize: 14)
    )
    .setInstructionCaption(
        withText: "Subtitulo",
        color: UIColor.gray,
        font: UIFont.systemFont(ofSize: 12)
    )
    .setInstructionDocOptionImage(UIImage(named: "doc_option_image"))
    .setInstructionDocOptionTitle(
        withText: "Doc Option",
        color: UIColor.white,
        font: UIFont.systemFont(ofSize: 13)
    )
    .setInstructionDocOptionBackgroundColor(UIColor.red)
    .setInstructionDocOptionBorder(
        withColor: UIColor.blue,
        width: CGFloat(2),
        radius: CGFloat(3)
    )
    .setInstructionDocOptionIcon(UIImage(named: "doc_option_icon"), color: UIColor.red)
    .setInstructionEnvOptionImage(UIImage(named: "env_option_image"))
    .setInstructionEnvOptionTitle(
        withText: "Env Option",
        color: UIColor.white,
        font: UIFont.systemFont(ofSize: 13)
    )
    .setInstructionEnvOptionBackgroundColor(UIColor.red)
    .setInstructionEnvOptionBorder(
        withColor: UIColor.blue,
        width: CGFloat(2),
        radius: CGFloat(3)
    )
    .setInstructionEnvOptionIcon(UIImage(named: "env_option_icon"), color: UIColor.red)
    .setInstructionContinueButton(
        backgroundColor: UIColor.brown,
        highlightedBackgroundColor: UIColor.orange,
        borderColor: UIColor.black,
        highlightedBorderColor: UIColor.blue,
        contentColor: UIColor.red,
        highlightedContentColor: UIColor.white,
        textColor: UIColor.green,
        font: UIFont.systemFont(ofSize: 14)
    )
    .build()

2. Tela de captura de documento

ParâmetrocustomView

Essa tela deve estar em conformidade com o protocolo DocumentscopyCustomView que contém os seguintes métodos e propriedades:

IdentificadorDescrição
(1) backButtonBotão para fechar a tela.
(2) closeButtonBotão para fechar a tela.
(3) frontIndicatorViewElemento que indica o momento de utilizar a frente do documento.
(4) backIndicatorViewElemento que indica o momento de utilizar o verso do documento.
(5) instructionLabelTexto informativo com orientação da captura, é exibido por apenas alguns segundos.
(6) cameraPreviewNeste elemento será colocado a pré-visualização da câmera.
(7) cameraVisualizerElemento que determina onde a pré-visualização da câmera será visível.
(8) cameraMaskElemento que determina onde a camera não será visível.
(9) captureButtonBotão para capturar foto.
(10) previewImageViewElemento de imagem onde será exibida a imagem capturada para o usuário confirmar a qualidade da captura.
(11) takeNewPictureButtonBotão para o usuário capturar a foto novamente.
(12) usePictureButtonBotão para o usuário confirmar a foto capturada.

Método

Descrição

displayConfirmationSheet(visibility:animated:)

Método que indica quando o elemento de confirmação de imagem deve ou não ser mostrado, esse método possui dois parâmetros:

  • visibility que indica o estado do elemento de confirmação;
  • animated que indica quando é recomendado que esse comportamento seja feito com animação.

setFocus(to:animated:)

Método que indica qual o indicador de face do documento deve estar em foco no momento, esse método possui dois parâmetros:

  • to (focusElement) que é um enum do tipo DocumentscopyFocusIndicator que possui os valores de frontIndicator e backIndicator que representam a frente e o verso do documento respectivamente;
  • animated que indica quando é recomendado que esse comportamento seja feito com animação.

setUsePictureButtonTitle(to:)

Método responsável por atribuir um novo título para o botão de usar foto (usePictureButton).

Estado 01.  |  Estado 02.

Estado 01. | Estado 02.

⚠️

Importante

  1. A propriedade cameraMask assim como a cameraPreview deve possuir suas constraints de leading, trailing, bottom e top iguais a superview e não à safearea.
  2. A propriedade cameraMask deve ser adicionada após a cameraPreview.

💡

Pré-visualização da câmera

A DocumentscopyCameraPreviewView é uma classe customizada que herda de uma UIView.

Builder de customização

No DocumentscopyCustomizationBuilder você terá acesso a todos os elementos listados a seguir:

Identificador

Método

(1) Back button

setCaptureBackButtonIcon(_:)
setCaptureBackButtonColors(forIcon:background:border:)

(2) Close button

setCaptureCloseButtonIcon(_:)
setCaptureCloseButtonColors(forIcon:background:border:)

(3) Front indicator

setCaptureFrontIndicatorText(_:)
setCaptureFrontIndicatorColor(_:)
setCaptureFrontIndicatorFocusedState(withImage:textColor:)
setCaptureFrontIndicatorUnfocusedState(withImage:textColor:)

(4) Back indicator

setCaptureBackIndicatorText(_:)
setCaptureBackIndicatorColor(_:)
setCaptureBackIndicatorFocusedState(withImage:textColor:)
setCaptureBackIndicatorUnfocusedState(withImage:textColor:)

(5) Instruction text

setCaptureInstructionGuideText(forFront: back:)
setCaptureInstructionConfirmationText(_:)
setCaptureInstructionTextColor(_:)
setCaptureInstructionTextFont(_:)

(6) Preview

setCapturePreviewBorderColor(forCaptured:uncapturedState:)

(7) Background

setCaptureBackgroundColor(_:)

(8) Capture button

setCaptureCaptureButtonIcon(_:)
setCaptureCaptureButtonHighlightedStateColors(forIcon:background:border:)
setCaptureCaptureButtonNormalStateColors(forIcon:background:border:)
setCaptureCaptureButtonDisabledStateColors(forIcon:background:border:)

(9) Bottom sheet

setCaptureBottomSheetShape(withColor:cornerRadius:)

(10) Confirmation message

setCaptureConfirmationMessage(withText:color:)

(11) TakeNewPicture button

setCaptureTakeNewPictureButton(withText:)
setCaptureTakeNewPictureButtonHighlightedStateColors(forText:background:border:)
setCaptureTakeNewPictureButtonNormalStateColors(forText:background:border:)
setCaptureTakeNewPictureButtonDisabledStateColors(forText:background:border:)

(12) UsePicture button

setCaptureUsePictureButton(withText:confirmationText:)
setCaptureUsePictureButtonHighlightedStateColors(forText:background:border:)
setCaptureUsePictureButtonNormalStateColors(forText:background:border:)
setCaptureUsePictureButtonDisabledStateColors(forText:background:border:)

Código de exemplo do Builder

let customization = DocumentscopyCustomizationBuilder.builder()
    .setCaptureBackButtonColors(
        forIcon: UIColor.blue,
        background: UIColor.gray,
        border: UIColor.red
    )
    .setCaptureCloseButtonColors(
        forIcon: UIColor.darkGray,
        background: UIColor.gray,
        border: UIColor.blue
    )
    .setCaptureFrontIndicatorText("Front indicator")
    .setCaptureFrontIndicatorColor(UIColor.red)
    .setCaptureFrontIndicatorFocusedState(
        withImage: UIImage(named: "image"),
        textColor: UIColor.red
    )
    .setCaptureFrontIndicatorUnfocusedState(
        withImage: UIImage(named: "image"),
        textColor: UIColor.blue
    )
    .setCaptureBackIndicatorText("Back indicator")
    .setCaptureBackIndicatorColor(UIColor.red)
    .setCaptureBackIndicatorFocusedState(
        withImage: UIImage(named: "image"),
        textColor: UIColor.yellow
    )
    .setCaptureBackIndicatorUnfocusedState(
        withImage: UIImage(named: "image"),
        textColor: UIColor.gray
    )
    .setCaptureInstructionGuideText(
        forFront: "Guide front",
        back: "Guide back"
    )
    .setCaptureInstructionConfirmationText("Confirmation")
    .setCaptureInstructionTextColor(UIColor.purple)
    .setCapturePreviewBorderColor(
        forCaptured: UIColor.black,
        uncapturedState: UIColor.red
    )
    .setCaptureBackgroundColor(UIColor.purple)
    .setCaptureCaptureButtonHighlightedStateColors(
        forIcon: UIColor.gray,
        background: UIColor.yellow,
        border: UIColor.darkGray
    )
    .setCaptureCaptureButtonNormalStateColors(
        forIcon: UIColor.purple,
        background: UIColor.black,
        border: UIColor.blue
    )
    .setCaptureCaptureButtonDisabledStateColors(
        forIcon: UIColor.darkGray,
        background: UIColor.red,
        border: UIColor.yellow
    )
    .setCaptureBottomSheetShape(
        withColor: UIColor.red,
        cornerRadius: CGFloat(30)
    )
    .setCaptureConfirmationMessage(
        withText: "Message",
        color: UIColor.blue
    )
    .setCaptureTakeNewPictureButton(withText: "Take new picture")
    .setCaptureTakeNewPictureButtonHighlightedStateColors(
        forText: UIColor.yellow,
        background: UIColor.green,
        border: UIColor.magenta
    )
    .setCaptureTakeNewPictureButtonNormalStateColors(
        forText: UIColor.red,
        background: UIColor.black,
        border: UIColor.yellow
    )
    .setCaptureTakeNewPictureButtonDisabledStateColors(
        forText: UIColor.green,
        background: UIColor.red,
        border: UIColor.magenta
    )
    .setCaptureUsePictureButton(
        withText: "Use Picture",
        confirmationText: "Confirmation"
    )
    .setCaptureUsePictureButtonHighlightedStateColors(
        forText: UIColor.blue,
        background: UIColor.purple,
        border: UIColor.systemPink
    )
    .setCaptureUsePictureButtonNormalStateColors(
        forText: UIColor.systemPink,
        background: UIColor.red,
        border: UIColor.green
    )
    .setCaptureUsePictureButtonDisabledStateColors(
        forText: UIColor.green,
        background: UIColor.blue,
        border: UIColor.yellow
    )
    .build()

3. Tela de processamento do documento

ParâmetrocustomLoadingView

Essa tela deve estar em conformidade com o tipo DocumentscopyCustomLoadingView que é um typealias para o tipo UIView

Builder de customização

No DocumentscopyCustomizationBuilder você terá acesso a todos os elementos listados a seguir:

IdentificadorMétodo
(1) BackgroundsetLoadingBackgroundColor(_:)
(2) LoadingsetLoadingSpinner(withColor:width:scaleFactor:)

Código de exemplo do Builder

let customization = DocumentscopyCustomizationBuilder.builder()
    .setLoadingBackgroundColor(UIColor.red)
    .setLoadingSpinner(
        withColor: UIColor.green,
        width: CGFloat(10.0),
        scaleFactor: 3
    )
		.build()

4. Tela de resultado do processamento

ParâmetrocustomResultView

Essa tela deve estar em conformidade com o protocolo DocumentscopyCustomResultView que contém os seguintes métodos e propriedades:

IdentificadorDescrição
(1) resultButtonBotão para fechar o fluxo de reconhecimento de documento.
MétodoDescrição
display(for:)Esse método recebe como parâmetro um enum do tipo DocumentscopyResultType que indica qual resultado deve ser mostrado.
Estado 01: caso de sucesso. |  Estado 02: caso de tetar novamente.  |  Estado 03: caso de erro.

Estado 01: caso de sucesso. | Estado 02: caso de tentar novamente. | Estado 03: caso de erro.

Builder de customização

No DocumentscopyCustomizationBuilder você terá acesso a todos os elementos listados a seguir:

Identificador

Método

(1) Background

setResultBackgroundColor(_:forResultType:)

(2) Image

setResultImage(_:forResultType:)

(3) Message

setResultMessageFont(_:)
setResultMessage(_:forResultType:)
setResultMessageColor(_:forResultType:)

(4) Retry button

setResultTryAgainButton(withText:font:)
setResultTryAgainButtonHighlightedStateColors(forText:background:border:)
setResultTryAgainButtonNormalStateColors(forText:background:border:)
setResultTryAgainButtonDisabledStateColors(forText:background:border:)

Código de exemplo do Builder

let customization = DocumentscopyCustomizationBuilder.builder()
    .setResultBackgroundColor(UIColor.green, forResultType: .success)
    .setResultBackgroundColor(UIColor.red, forResultType: .error)
    .setResultBackgroundColor(UIColor.blue, forResultType: .tryAgain)
    .setResultMessage("Sucesso", forResultType: .success)
    .setResultMessage("Erro", forResultType: .error)
    .setResultMessage("Tente novamente", forResultType: .tryAgain)
    .setResultMessageColor(UIColor.yellow, forResultType: .success)
    .setResultMessageColor(UIColor.white, forResultType: .error)
    .setResultMessageColor(UIColor.purple, forResultType: .tryAgain)
    .setResultTryAgainButton(withText: "Recomeçar")
    .setResultTryAgainButtonHighlightedStateColors(
        forText: UIColor.red,
        background: UIColor.brown,
        border: UIColor.cyan
    )
    .setResultTryAgainButtonNormalStateColors(
        forText: UIColor.red,
        background: UIColor.gray,
        border: UIColor.black
    )
    .setResultTryAgainButtonNormalStateColors(
        forText: UIColor.black,
        background: UIColor.systemPink,
        border: UIColor.orange
    )
    .build()

5. Tela de permissão da câmera

ParâmetrocustomCameraPermissionView

💡

Nota

Por se tratar de uma tela comum aos três módulos do SDK, essa tela será descrita uma única vez ao final desta página. Customização da tela de permissão de câmera

Builder de customização

No DocumentscopyCustomizationBuilder você terá acesso a todos os elementos listados a seguir:

Identificador

Método

(1) Back button

setCameraPermissionBackButtonIcon(_:)
setCameraPermissionBackButtonColors(forIcon:background:border:)

(2) Camera image

setCameraPermissionImage(_:color:)

(3) Title

setCameraPermissionTitle(withText:color:)

(4) Caption

setCameraPermissionCaption(withText:color:)

(5) Check permission button

setCameraPermissionCheckPermissionButton(withText:)
setCameraPermissionCheckPermissionButtonHighlightedStateColors(forText:background:border:)
setCameraPermissionCheckPermissionButtonNormalStateColors(forText:background:border:)
setCameraPermissionCheckPermissionButtonDisabledStateColors(forText:background:border:)

(6) Background

setCameraPermissionBackgroundColor(_:)

(7) Bottom sheet

setCameraPermissionBottomSheetShape(withColor:cornerRadius:)
setCameraPermissionBottomSheetTitle(withText:color:)
setCameraPermissionBottomSheetCaption(withText:color:)

(8) Open settings button

setCameraPermissionOpenSettingsButton(withText:)
setCameraPermissionOpenSettingsButtonHighlightedStateColors(forText:background:border:)
setCameraPermissionOpenSettingsButtonHighlightedStateColors(forText:background:border:)
setCameraPermissionOpenSettingsButtonDisabledStateColors(forText:background:border:)

(9) Close button

setCameraPermissionCloseButton(withText:)
setCameraPermissionCloseButtonHighlightedStateColors(forText:background:border:)
setCameraPermissionCloseButtonNormalStateColors(forText:background:border:)
setCameraPermissionCloseButtonDisabledStateColors(forText:background:border:)

Código de exemplo do Builder

let customization = DocumentscopyCustomizationBuilder.builder()
    .setCameraPermissionBackButtonColors(
        forIcon: UIColor.red,
        background: UIColor.blue,
        border: UIColor.yellow
    )
    .setCameraPermissionImage(UIImage(named: "image"), color: UIColor.white)
    .setCameraPermissionTitle(
        withText: "Title",
        color: UIColor.green
    )
    .setCameraPermissionCaption(
        withText: "Caption",
        color: UIColor.orange
    )
    .setCameraPermissionCheckPermissionButton(withText: "Check Permission")
    .setCameraPermissionCheckPermissionButtonHighlightedStateColors(
        forText: UIColor.purple,
        background: UIColor.systemPink,
        border: UIColor.brown
    )
    .setCameraPermissionCheckPermissionButtonNormalStateColors(
        forText: UIColor.cyan,
        background: UIColor.darkGray,
        border: UIColor.magenta
    )
    .setCameraPermissionCheckPermissionButtonDisabledStateColors(
        forText: UIColor.lightGray,
        background: UIColor.red,
        border: UIColor.blue
    )
    .setCameraPermissionBackgroundColor(UIColor.green)
    .setCameraPermissionBottomSheetShape(
        withColor: UIColor.cyan,
        cornerRadius: CGFloat(15.0)
    )
    .setCameraPermissionBottomSheetTitle(
        withText: "Bottom sheet title",
        color: UIColor.yellow
    )
    .setCameraPermissionBottomSheetCaption(
        withText: "Bottom sheet caption",
        color: UIColor.white
    )
    .setCameraPermissionOpenSettingsButton(withText: "Open Settings")
    .setCameraPermissionOpenSettingsButtonHighlightedStateColors(
        forText: UIColor.black,
        background: UIColor.orange,
        border: UIColor.systemPink
    )
    .setCameraPermissionOpenSettingsButtonHighlightedStateColors(
        forText: UIColor.brown,
        background: UIColor.magenta,
        border: UIColor.cyan
    )
    .setCameraPermissionOpenSettingsButtonDisabledStateColors(
        forText: UIColor.lightGray,
        background: UIColor.darkGray,
        border: UIColor.gray
    )
    .setCameraPermissionCloseButton(withText: "Close")
    .setCameraPermissionCloseButtonHighlightedStateColors(
        forText: UIColor.red,
        background: UIColor.black,
        border: UIColor.blue
    )
    .setCameraPermissionCloseButtonNormalStateColors(
        forText: UIColor.green,
        background: UIColor.yellow,
        border: UIColor.orange
    )
    .setCameraPermissionCloseButtonDisabledStateColors(
        forText: UIColor.magenta,
        background: UIColor.systemPink,
        border: UIColor.blue
    )
    .build()