Doc Core

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

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.
customViewsObjeto contendo as telas customizadas.
customizationObjeto contendo a customização da jornada de documento.
💡

Nota

  1. O parâmetro showFeedback é opcional e possui true como valor padrão;
  2. Os parâmetros customViews e customization são opcionais.

1. Tela de instruções

Tela customizada

Esta tela deve estar em conformidade com o protocolo DocumentscopyCustomInstructionView, o qual será passado como argumento para o método setInstructionView(_:) do DocumentscopyCustomViews e que define os seguintes métodos e propriedades:

PropriedadeDescrição
(1) backButtonBotão para função voltar da navegação.
(2) physicalDocumentOptionBotão para iniciar o fluxo de captura do documento físico.
(3) digitalDocumentOptionBotão para iniciar o fluxo de captura do documento digital.

Método

Descrição

changeLoadingVisibility(to:)

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

Tela de Instruções

Código de exemplo

/* Custom view */
final class DocumentscopyCustomInstructionViewExample: UIView, DocumentscopyCustomInstructionView {
    var backButton: UIButton!
    var physicalDocumentOption: UIView!
    var digitalDocumentOption: UIView!

    func changeLoadingVisibility(to visibility: Visibility) { ... }
}

/* Builder */
let customViews = DocumentscopyCustomViews.builder()
    .setInstructionView(DocumentscopyCustomInstructionViewExample())
    .build()

Builder de customização

No método setInstructionCustomization(_:) do DocumentscopyCustomization, você terá acesso ao builder responsável por essa tela, que disponibiliza todos os métodos listados a seguir:

Elemento

Método

(1) Loading

setLoadingColor(_:)

(2) Back button

setBackButtonIcon(_:)
setBackButtonIconColor(_:)
setBackButtonBackgroundColor(_:)
setBackButtonBorderColor(_:)

(3) Background

setBackgroundColor(_:)

(4) Context image

setContextImage(_:)

(5) Bottom sheet

setBottomSheetColor(_:)
setBottomSheetCornerRadius(_:)

(6) Title

setTitle(_:)
setTitleColor(_:)
setTitleFont(_:)

(7) Caption

setCaption(_:)
setCaptionColor(_:)
setCaptionFont(_:)

(8) Physical document option

setPhysicalDocumentOptionImage(_:)
setPhysicalDocumentOptionTitleColor(_:)
setPhysicalDocumentOptionTitleFont(_:)
setPhysicalDocumentOptionDescription(_:)
setPhysicalDocumentOptionDescriptionColor(_:)
setPhysicalDocumentOptionDescriptionFont(_:)
setPhysicalDocumentOptionBackgroundColor(_:)
setPhysicalDocumentOptionCircleBackgroundColor(_:)
setPhysicalDocumentOptionBorderRadius(_:)
setPhysicalDocumentOptionBorderColor(_:)
setPhysicalDocumentOptionBorderWidth(_:)
setPhysicalDocumentOptionIconColor(_:)

(9) Digital document option

setDigitalDocumentOptionImage(_:)
setDigitalDocumentOptionTitleColor(_:)
setDigitalDocumentOptionTitleFont(_:)
setDigitalDocumentOptionDescription(_:)
setDigitalDocumentOptionDescriptionColor(_:)
setDigitalDocumentOptionDescriptionFont(_:)
setDigitalDocumentOptionBackgroundColor(_:)
setDigitalDocumentOptionCircleBackgroundColor(_:)
setDigitalDocumentOptionBorderRadius(_:)
setDigitalDocumentOptionBorderColor(_:)
setDigitalDocumentOptionBorderWidth(_:)
setDigitalDocumentOptionIconColor(_:)

Tela de Instruções

Código de exemplo

let customization = DocumentscopyCustomization.builder()
    .setInstructionCustomization { instructionBuilder in
        instructionBuilder
            .setBackButtonIcon(UIImage(named: "trash")!)
            .setBackButtonIconColor(UIColor.red)
            .setBackButtonBackgroundColor(UIColor.green)
            .setBackButtonBorderColor(UIColor.white)
            .setBackgroundColor(UIColor.purple)
            .setContextImage(UIImage(named: "doc.text.magnifyingglass")!)
            .setLoadingColor(UIColor.red)
            .setBottomSheetColor(UIColor.cyan)
            .setBottomSheetCornerRadius(10)
            .setTitle("Titulo aqui")
            .setTitleColor(UIColor.brown)
            .setTitleFont(UIFont.systemFont(ofSize: 40))
            .setCaption("Subtitulo aqui")
            .setCaptionColor(UIColor.systemPink)
            .setCaptionFont(UIFont.systemFont(ofSize: 30))
            .setPhysicalDocumentOptionImage(UIImage(named: "doc.text.magnifyingglass"))
            .setPhysicalDocumentOptionTitle("Physical document")
            .setPhysicalDocumentOptionTitleColor(UIColor.blue)
            .setPhysicalDocumentOptionTitleFont(UIFont.systemFont(ofSize: 40))
            .setPhysicalDocumentOptionDescription("Physical description")
            .setPhysicalDocumentOptionDescriptionColor(UIColor.green)
            .setPhysicalDocumentOptionDescriptionFont(UIFont.systemFont(ofSize: 25))
            .setPhysicalDocumentOptionBackgroundColor(UIColor.black)
            .setPhysicalDocumentOptionCircleBackgroundColor(UIColor.yellow)
            .setPhysicalDocumentOptionBorderRadius(20)
            .setPhysicalDocumentOptionBorderColor(UIColor.clear)
            .setPhysicalDocumentOptionBorderWidth(4)
            .setPhysicalDocumentOptionIconColor(UIColor.red)
            .setDigitalDocumentOptionImage(UIImage(named: "pencil"))
            .setDigitalDocumentOptionTitle("Digital document")
            .setDigitalDocumentOptionTitleColor(UIColor.brown)
            .setDigitalDocumentOptionTitleFont(UIFont.systemFont(ofSize: 10))
            .setDigitalDocumentOptionDescription("Digital caption")
            .setDigitalDocumentOptionDescriptionColor(UIColor.systemPink)
            .setDigitalDocumentOptionDescriptionFont(UIFont.systemFont(ofSize: 20))
            .setDigitalDocumentOptionBackgroundColor(UIColor.blue)
            .setDigitalDocumentOptionCircleBackgroundColor(UIColor.cyan)
            .setDigitalDocumentOptionBorderRadius(10)
            .setDigitalDocumentOptionBorderColor(UIColor.gray)
            .setDigitalDocumentOptionBorderWidth(10)
            .setDigitalDocumentOptionIconColor(UIColor.white)
    }
    .build()

2. Tela de captura de documento

Tela customizada

Esta tela deve estar em conformidade com o protocolo DocumentscopyCustomCaptureView, o qual será passado como argumento para o método setCaptureView(_:) do DocumentscopyCustomViews e que define os seguintes métodos e propriedades:

PropriedadeDescrição
(1) backButtonBotão para fechar a tela.
(2) closeButtonBotão para fechar a tela.
(3) instructionLabelTexto informativo com orientação da captura, é exibido por apenas alguns segundos.
(4) cameraPreviewNeste elemento será colocado a pré-visualização da câmera.
(5) cameraVisualizerElemento que determina onde a pré-visualização da câmera será visível.
(6) cameraMaskElemento que determina onde a camera não será visível.
(7) captureButtonBotão para capturar foto.
(8) previewImageViewElemento de imagem onde será exibida a imagem capturada para o usuário confirmar a qualidade da captura.
(9) retryButtonBotão para o usuário capturar a foto novamente.
(10) confirmButtonBotã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.

setConfirmButtonTitle(to:)

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

Estado 01. | Estado 02.

Código de exemplo

/* Custom view */
final class DocumentscopyCustomCaptureViewExample: UIView, DocumentscopyCustomCaptureView {
    var cameraMask: UIView!
    var backButton: UIButton!
    var closeButton: UIButton!
    var instructionLabel: UILabel!
    var cameraPreview: CameraPreviewView!
    var cameraVisualizer: UIView!
    var previewImageView: UIImageView!
    var confirmButton: UIButton!
    var retryButton: UIButton!
    var captureButton: UIButton!

    func displayConfirmationSheet(visibility: Visibility, animated: Bool) { ... }
    func setFocus(to focusElement: FocusIndicator, animated: Bool) { ... }
    func setConfirmButtonTitle(to newTitle: String) { ... }
}

/* Builder */
let customViews = DocumentscopyCustomViews.builder()
    .setCaptureView(DocumentscopyCustomCaptureViewExample())
    .build()
⚠️

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 CameraPreviewView é uma classe customizada que herda de uma UIView.

Builder de customização

No método setCaptureCustomization(_:) do DocumentscopyCustomization, você terá acesso ao builder responsável por essa tela, que disponibiliza todos os métodos listados a seguir:

Elemento

Método

(1) Back button

setBackButtonIcon(_:)
setBackButtonIconColor(_:)
setBackButtonBackgroundColor(_:)
setBackButtonBorderColor(_:)

(2) Close button

setCloseButtonIcon(_:)
setCloseButtonIconColor(_:)
setCloseButtonBackgroundColor(_:)
setCloseButtonBorderColor(_:)

(3) Front indicator

setFrontIndicatorText(_:)
setFrontIndicatorColor(_:)
setFrontIndicatorFocusedStateTextColor(_:)
setFrontIndicatorFocusedStateTextFont(_:)
setFrontIndicatorFocusedStateImage(_:)
setFrontIndicatorUnfocusedStateTextColor(_:)
setFrontIndicatorUnfocusedStateTextFont(_:)
setFrontIndicatorUnfocusedStateImage(_:)

(4) Back indicator

setBackIndicatorText(_:)
setBackIndicatorColor(_:)
setBackIndicatorFocusedStateTextColor(_:)
setBackIndicatorFocusedStateTextFont(_:)
setBackIndicatorFocusedStateImage(_:)
setBackIndicatorUnfocusedStateTextColor(_:)
setBackIndicatorUnfocusedStateTextFont(_:)
setBackIndicatorUnfocusedStateImage(_:)

(5) Instruction text

setInstructionGuideFrontText(_:)
setInstructionGuideBackText(_:)
setInstructionConfirmationText(_:)
setInstructionTextColor(_:)
setInstructionTextFont(_:)

(6) Preview

setPreviewCapturedBorderColor(_:)
setPreviewUncapturedBorderColor(_:)

(7) Background

setBackgroundColor(_:)

(8) Capture button

setCaptureButtonIcon(_:)
setCaptureButtonNormalIconColor(_:)
setCaptureButtonNormalBackgroundColor(_:)
setCaptureButtonNormalBorderColor(_:)
setCaptureButtonDisabledIconColor(_:)
setCaptureButtonDisabledBackgroundColor(_:)
setCaptureButtonDisabledBorderColor(_:)

(9) Bottom sheet

setBottomSheetColor(_:)
setBottomSheetCornerRadius(_:)

(10) Confirmation message

setConfirmationMessageText(_:)
setConfirmationMessageColor(_:)
setConfirmationMessageFont(_:)

(11) Retry button

setRetryButtonText(_:)
setRetryButtonTextFont(_:)
setRetryButtonTextColor(_:)

(12) Confirm button

setConfirmButtonText(_:)
setConfirmButtonTextFont(_:)
setConfirmButtonTextColor(_:)

_Estado 01. | Estado 02.

Código de exemplo

let customization = DocumentscopyCustomization.builder()
    .setCaptureCustomization { captureBuilder in
        captureBuilder
            .setBackButtonIcon(UIImage(named: "doc.text.magnifyingglass")!)
            .setBackButtonIconColor(UIColor.white)
            .setBackButtonBackgroundColor(UIColor.magenta)
            .setBackButtonBorderColor(UIColor.green)
            .setCloseButtonIcon(UIImage(named: "pencil")!)
            .setCloseButtonIconColor(UIColor.magenta)
            .setCloseButtonBackgroundColor(UIColor.green)
            .setCloseButtonBorderColor(UIColor.white)
            .setBackgroundColor(UIColor.red)
            .setFrontIndicatorText("Front")
            .setFrontIndicatorColor(UIColor.blue)
            .setFrontIndicatorFocusedStateImage(UIImage(named: "trash"))
            .setFrontIndicatorFocusedStateTextColor(UIColor.purple)
            .setFrontIndicatorFocusedStateTextFont(UIFont.systemFont(ofSize: 20))
            .setFrontIndicatorUnfocusedStateImage(UIImage(named: "doc.text.magnifyingglass"))
            .setFrontIndicatorUnfocusedStateTextColor(UIColor.lightGray)
            .setFrontIndicatorUnfocusedStateTextFont(UIFont.systemFont(ofSize: 20))
            .setBackIndicatorText("Back")
            .setBackIndicatorColor(UIColor.darkGray)
            .setBackIndicatorFocusedStateImage(UIImage(named: "pencil"))
            .setBackIndicatorFocusedStateTextColor(UIColor.cyan)
            .setBackIndicatorFocusedStateTextFont(UIFont.systemFont(ofSize: 20))
            .setBackIndicatorUnfocusedStateImage(UIImage(named: "checkmark"))
            .setBackIndicatorUnfocusedStateTextColor(UIColor.black)
            .setBackIndicatorUnfocusedStateTextFont(UIFont.systemFont(ofSize: 20))
            .setInstructionGuideFrontText("Foto frontal do documento, please")
            .setInstructionGuideBackText("Agora é a foto do verso")
            .setInstructionConfirmationText("Hora da verdade, vê se ficou bom")
            .setInstructionTextColor(UIColor.blue)
            .setInstructionTextFont(UIFont.systemFont(ofSize: 22))
            .setPreviewCapturedBorderColor(UIColor.green)
            .setPreviewUncapturedBorderColor(UIColor.blue)
            .setCaptureButtonIcon(UIImage(named: "trash")!)
            .setCaptureButtonNormalIconColor(UIColor.systemPink)
            .setCaptureButtonNormalBackgroundColor(UIColor.orange)
            .setCaptureButtonNormalBorderColor(UIColor.black)
            .setCaptureButtonDisabledIconColor(UIColor.green)
            .setCaptureButtonDisabledBackgroundColor(UIColor.gray)
            .setCaptureButtonDisabledBorderColor(UIColor.orange)
            .setBottomSheetColor(UIColor.brown)
            .setBottomSheetCornerRadius(15)
            .setConfirmationMessageText("A foto tá legal?")
            .setConfirmationMessageColor(UIColor.white)
            .setConfirmationMessageFont(UIFont.systemFont(ofSize: 24))
            .setConfirmButtonText("Yes")
            .setConfirmButtonConfirmationText("Yessir")
            .setConfirmButtonTextFont(UIFont.systemFont(ofSize: 30))
            .setConfirmButtonTextColor(UIColor.red)
            .setConfirmButtonBackgroundColor(UIColor.magenta)
            .setConfirmButtonBorderColor(UIColor.cyan)
            .setRetryButtonText("Nope")
            .setRetryButtonTextFont(UIFont.systemFont(ofSize: 30))
            .setRetryButtonTextColor(UIColor.orange)
            .setRetryButtonBackgroundColor(UIColor.black)
            .setRetryButtonBorderColor(UIColor.systemPink)
    }
    .build()

3. Tela de captura de QR Code (CNH Digital)

Tela customizada

Esta tela deve estar em conformidade com o protocolo DocumentscopyCustomQrCodeView, o qual será passado como argumento para o método setQrCodeView(_:) do DocumentscopyCustomViews e que define os seguintes métodos e propriedades:

Propriedade.Descrição
(1) backButtonBotão para fechar a tela.
(2) cameraPreviewNeste elemento será colocado a pré-visualização da câmera.
(3) cameraMaskElemento que determina onde a camera não será visível.
(4) cameraVisualizerElemento que determina onde a pré-visualização da câmera será visível.
(5) modalContainerElemento com instruções e o botão para tela de envio de documento.
(6) fileButtonBotão para o usuário confirmar a foto capturada.

Método

Descrição

displayBottomSheet(animated:)

Método que indica quando a modal com botão de envio de documento será apresentada, esse método possui o seguinte parâmetro:

  • animated que indica quando é recomendado que esse comportamento seja feito com animação.

hideBottomSheet(animated:)

Método que indica quando a modal com botão de envio de documento será removida da tela, esse método possui o seguinte parâmetro:

  • animated que indica quando é recomendado que esse comportamento seja feito com animação.

Tela de Captura de QR Code

/* Custom view */
final class DocumentscopyCustomQrCodeViewExample: UIView, DocumentscopyCustomQrCodeView {
    var cameraPreview: CameraPreviewView!
    var cameraMask: UIView!
    var cameraVisualizer: UIView!
    var backButton: UIButton!
    var modalContainer: UIView!
    var fileButton: UIButton!

    func displayBottomSheet(animated: Bool) { ... }
    func hideBottomSheet(animated: Bool) { ... }
}

/* Builder */
let customViews = DocumentscopyCustomViews.builder()
    .setQrCodeView(DocumentscopyCustomQrCodeViewExample())
    .build()

Builder de customização

No método setQrCodeCustomization(_:) do DocumentscopyCustomization, você terá acesso ao builder responsável por essa tela, que disponibiliza todos os métodos listados a seguir:

Elemento

Método

(1) Back button

setBackButtonIcon(_:)
setBackButtonIconColor(_:)
setBackButtonBackgroundColor(_:)
setBackButtonBorderColor(_:)

(2) Square Target Image

setSquareTargetColor(_:)

(3) Bottom sheet

setBottomSheetColor(_:)
setBottomSheetCornerRadius(_:)

(4) Title

setTitle(_:)
setTitleColor(_:)
setTitleFont(_:)

(5) Caption

setCaption(_:)
setCaptionColor(_:)
setCaptionFont(_:)

(6) File button

setFileButtonText(_:)
setFileButtonTextFont(_:)
setFileButtonTextColor(_:)
setFileButtonBackgroundColor(_:)
setFileButtonBorderColor(_:)

Tela de Captura de QR Code

Código de exemplo

let customization = DocumentscopyCustomization.builder()
    .setQrCodeCustomization { qrCodeBuilder in
        qrCodeBuilder
            .setBackButtonIcon(UIImage(named: "doc.text.magnifyingglass") ?? UIImage())
            .setBackButtonIconColor(.white)
            .setBackButtonBackgroundColor(.magenta)
            .setBackButtonBorderColor(.green)
            .setSquareTargetColor(.red)
            .setBottomSheetColor(.brown)
            .setBottomSheetCornerRadius(15)
            .setTitle("Title")
            .setTitleColor(.red)
            .setTitleFont(UIFont.unwrapped(named: "Jersey20-Regular", size: 35))
            .setCaption("caption")
            .setCaptionColor(.green)
            .setCaptionFont(UIFont.unwrapped(named: "Jersey20-Regular", size: 20))
            .setFileButtonText("File")
            .setFileButtonTextFont(UIFont.unwrapped(named: "Jersey24-Regular", size: 22))
            .setFileButtonTextColor(.black)
            .setFileButtonBackgroundColor(.yellow)
            .setFileButtonBorderColor(.blue)
    }
    .build()

4. Tela de envio de documento (CNH Digital)

Tela customizada

Esta tela deve estar em conformidade com o protocolo DocumentscopyCustomUploadView, o qual será passado como argumento para o método setUploadView(_:) do DocumentscopyCustomViews e que define os seguintes métodos e propriedades:

PropriedadeDescrição
(1) backButtonBotão para voltar à tela anterior.
(2) closeButtonBotão para fechar o fluxo.
(3) uploadAreaElemento que selecionado e apresenta o arquivo que será enviado.
(4) deleteButtonBotão para remover o arquivo adicionado.
(5) sendButtonBotão para enviar o documento para processamento.

Método

Descrição

displayFileContainer(with:)

Método que indica quando o elemento com o nome do arquivo selecionado deve ser apresentado, esse método possui o seguinte parâmetro.

  • with parâmetro com o nome do arquivo selecionado.

hideFileContainer()

Método que indica quando o elemento com o nome do arquivo selecionado deve ser removido.

Tela de Envio de Documento

/* Custom view */
final class DocumentscopyCustomUploadViewExample: UIView, DocumentscopyCustomUploadView {
    var backButton: UIButton!
    var closeButton: UIButton!
    var uploadArea: UIView!
    var deleteButton: UIButton!
    var sendButton: UIButton!

    func displayFileContainer(with fileName: String) { ... }
    func hideFileContainer() { ... }
}

/* Builder */
let customViews = DocumentscopyCustomViews.builder()
    .setUploadView(DocumentscopyCustomUploadViewExample())
    .build()

Builder de customização

No método setUploadCustomization(_:) do DocumentscopyCustomization, você terá acesso ao builder responsável por essa tela, que disponibiliza todos os métodos listados a seguir:

Elemento

Método

(1) Back button

setBackButtonIcon(_:)
setBackButtonIconColor(_:)
setBackButtonBackgroundColor(_:)
setBackButtonBorderColor(_:)

(2) Close button

setCloseButtonIcon(_:)
setCloseButtonIconColor(_:)
setCloseButtonBackgroundColor(_:)
setCloseButtonBorderColor(_:)

(3) Background

setBackgroundColor(_:)

(4) File title

setFileTitle(_:)
setFileTitleFont(_:)
setFileTitleColor(_:)

(5) File description

setFileTitle(_:)
setFileTitleFont(_:)
setFileTitleColor(_:)

(6) Upload area

setUploadAreaBackgroundColor(_:)
setUploadAreaContentColor(_:)
setUploadAreaText(_:)
setUploadAreaTextFont(_:)
setUploadAreaImage(_:)
setUploadAreaBorderColor(_:)
setUploadAreaBorderWidth(_:)
setUploadAreaBorderRadius(_:)

(7) Filename

setFilenameColor(_:)
setFilenameFont(_:)
setFilenameBackgroundColor(_:)

(8) Delete button

setDeleteButtonIcon(_:)
setDeleteButtonIconColor(_:)

(9) Send button

setSendButtonText(_:)
setSendButtonTextFont(_:)
setSendButtonNormalTextColor(_:)
setSendButtonNormalBackgroundColor(_:)
setSendButtonNormalBorderColor(_:)
setSendButtonDisabledTextColor(_:)
setSendButtonDisabledBackgroundColor(_:)
setSendButtonDisabledBorderColor(_:)

Tela de Envio de Documento

Código de exemplo

let customization = DocumentscopyCustomization.builder()
    .setUploadCustomization { uploadBuilder in
        uploadBuilder
            .setBackButtonIcon(UIImage(named: "doc.text.magnifyingglass"))
            .setBackButtonIconColor(UIColor.white)
            .setBackButtonBackgroundColor(UIColor.magenta)
            .setBackButtonBorderColor(UIColor.green)
            .setCloseButtonIcon(UIImage(named: "trash")!)
            .setCloseButtonIconColor(UIColor.green)
            .setCloseButtonBackgroundColor(UIColor.orange)
            .setCloseButtonBorderColor(UIColor.blue)
            .setBackgroundColor(UIColor.red)
            .setFileTitle("Title")
            .setFileTitleColor(UIColor.black)
            .setFileTitleFont(UIFont.systemFont(ofSize: 35))
            .setFileDescription("caption")
            .setFileDescriptionColor(UIColor.green)
            .setFileDescriptionFont(UIFont.systemFont(ofSize: 20))
            .setUploadAreaBackgroundColor(UIColor.systemBlue)
            .setUploadAreaContentColor(UIColor.white)
            .setUploadAreaText("Upload document")
            .setUploadAreaTextFont(UIFont.systemFont(ofSize: 18))
            .setUploadAreaImage(UIImage(named: "doc.text.magnifyingglass"))
            .setUploadAreaBorderColor(UIColor.lightGray)
            .setUploadAreaBorderWidth(10.0)
            .setUploadAreaBorderRadius(12.0)
            .setFilenameColor(UIColor.cyan)
            .setFilenameFont(UIFont.systemFont(ofSize: 16))
            .setFilenameBackgroundColor(UIColor.systemGray)
            .setDeleteButtonIcon(UIImage(named: "pencil"))
            .setDeleteButtonIconColor(UIColor.red)
            .setSendButtonText("Send document")
            .setSendButtonTextFont(UIFont.systemFont(ofSize: 25))
            .setSendButtonNormalTextColor(UIColor.systemPink)
            .setSendButtonNormalBackgroundColor(UIColor.orange)
            .setSendButtonNormalBorderColor(UIColor.black)
            .setSendButtonDisabledTextColor(UIColor.green)
            .setSendButtonDisabledBackgroundColor(UIColor.gray)
            .setSendButtonDisabledBorderColor(UIColor.orange)
    }
    .build()

5. Tela de processamento do documento

Tela customizada

Esta tela deve estar em conformidade com o protocolo DocumentscopyCustomLoadingView, o qual será passado como argumento para o método setLoadingView(_:) do DocumentscopyCustomViews e que é um typealias para o tipo UIView.

Tela de Processamento de Documento

/* Custom view */
final class DocumentscopyCustomLoadingViewExample: DocumentscopyCustomLoadingView { ... }

/* Builder */
let customViews = DocumentscopyCustomViews.builder()
    .setLoadingView(DocumentscopyCustomLoadingViewExample())
    .build()

Builder de customização

No método setLoadingCustomization(_:) do DocumentscopyCustomization, você terá acesso ao builder responsável por essa tela, que disponibiliza todos os métodos listados a seguir:

Elemento

Método

(1) Background

setBackgroundColor(_:)

(2) Loading

setSpinnerColor(_:)
setSpinnerWidth(_:)
setSpinnerScaleFactor(_:)

Tela de Processamento de Documento

Código de exemplo

let customization = DocumentscopyCustomization.builder()
    .setLoadingCustomization { loadingBuilder in
        loadingBuilder
            .setBackgroundColor(UIColor.orange)
            .setSpinnerColor(UIColor.green)
            .setSpinnerWidth(20.4)
            .setSpinnerScaleFactor(8)
    }
    .build()

6. Tela de resultado do processamento

Tela customizada

Esta tela deve estar em conformidade com o protocolo DocumentscopyCustomResultView, o qual será passado como argumento para o método setResultView(_:) do DocumentscopyCustomViews e que define os seguintes métodos e propriedades:

Propriedade.Descriçã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 erro. | Estado 03: caso de tentar novamente.

/* Custom view */
final class DocumentscopyCustomResultViewExample: UIView, DocumentscopyCustomResultView {
    var resultButton: UIButton!

    func display(for resultType: OILiveness2D.DocumentscopyResultType) { ... }
}

/* Builder */
let customViews = DocumentscopyCustomViews.builder()
    .setResultView(DocumentscopyCustomResultViewExample())
    .build()

Builder de customização

No método setResultCustomization(_:) do DocumentscopyCustomization, você terá acesso ao builder responsável por essa tela, que disponibiliza todos os métodos listados a seguir:

Elemento

Método

(1) Background

setSuccessBackgroundColor(_:)
setErrorBackgroundColor(_:)
setRetryBackgroundColor(_:)

(2) Image

setSuccessImage(_:)
setErrorImage(_:)
setRetryImage(_:)

(3) Message

setMessageFont(_:)
setSuccessMessage(_:)
setErrorMessage(_:)
setRetryMessage(_:)
setSuccessMessageColor(_:)
setErrorMessageColor(_:)
setRetryMessageColor(_:)

(4) Retry button

setRetryButtonText(_:)
setRetryButtonTextFont(_:)
setRetryButtonTextColor(_:)
setRetryButtonBackgroundColor(_:)
setRetryButtonBorderColor(_:)

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

Código de exemplo

let customization = DocumentscopyCustomization.builder()
    .setResultCustomization { resultBuilder in
        resultBuilder
            .setSuccessBackgroundColor(UIColor.brown)
            .setSuccessImage(UIImage(named: "doc.text.magnifyingglass"))
            .setSuccessMessage("Success")
            .setSuccessMessageColor(UIColor.white)
            .setMessageFont(UIFont.systemFont(ofSize: 30))
            .setErrorBackgroundColor(UIColor.systemPink)
            .setErrorImage(UIImage(named: "pencil"))
            .setErrorMessage("Error")
            .setErrorMessageColor(UIColor.white)
            .setRetryBackgroundColor(UIColor.magenta)
            .setRetryImage(UIImage(named: "phone") ?? UIImage())
            .setRetryMessage("Retry")
            .setRetryMessageColor(UIColor.white)
            .setRetryButtonText("Again")
            .setRetryButtonTextFont(UIFont.systemFont(ofSize: 35))
            .setRetryButtonTextColor(UIColor.cyan)
            .setRetryButtonBackgroundColor(UIColor.brown)
            .setRetryButtonBorderColor(UIColor.white)
    }
    .build()

7. Tela de permissão da câmera

Tela customizada

Esta tela deve estar em conformidade com o protocolo DocumentscopyCustomCameraPermissionView, o qual será passado como argumento para o método setCameraPermissionView(_:) do DocumentscopyCustomViews.

💡

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 método setCameraPermissionCustomization(_:) do DocumentscopyCustomization, você terá acesso ao builder responsável por essa tela, que disponibiliza todos os métodos listados a seguir:

Elemento

Método

(1) Back button

setBackButtonIcon(_:)
setBackButtonIconColor(_:)
setBackButtonBackgroundColor(_:)
setBackButtonBorderColor(_:)

(2) Camera image

setCameraImage(_:)
setCameraImageColor(_:)

(3) Title

setTitle(_:)
setTitleColor(_:)
setTitleFont(_:)

(4) Caption

setCaption(_:)
setCaptionColor(_:)
setCaptionFont(_:)

(5) Check permission button

setCheckPermissionButtonText(_:)
setCheckPermissionButtonTextFont(_:)
setCheckPermissionButtonTextColor(_:)
setCheckPermissionButtonBackgroundColor(_:)
setCheckPermissionButtonBorderColor(_:)

(6) Background

setBackgroundColor(_:)

(7) Bottom sheet

setBottomSheetColor(_:)
setBottomSheetCornerRadius(_:)

(8) Bottom sheet title

setBottomSheetTitle(_:)
setBottomSheetTitleColor(_:)
setBottomSheetTitleFont(_:)

(9) Bottom sheet caption

setBottomSheetCaption(_:)
setBottomSheetCaptionColor(_:)
setBottomSheetCaptionFont(_:)

(10) Open settings button

setOpenSettingsButtonText(_:)
setOpenSettingsButtonTextFont(_:)
setOpenSettingsButtonTextColor(_:)
setOpenSettingsButtonBackgroundColor(_:)
setOpenSettingsButtonBorderColor(_:)

(11) Close button

setCloseButtonText(_:)
setCloseButtonTextFont(_:)
setCloseButtonTextColor(_:)
setCloseButtonBackgroundColor(_:)
setCloseButtonBorderColor(_:)

Tela de Permissão de Câmera

Código de exemplo

let customization = DocumentscopyCustomization.builder()
    .setCameraPermissionCustomization { cameraPermissionBuilder in
        cameraPermissionBuilder
            .setBackgroundColor(UIColor.systemPink)
            .setBackButtonIcon(UIImage(named: "pencil"))
            .setBackButtonIconColor(UIColor.white)
            .setBackButtonBackgroundColor(UIColor.white)
            .setBackButtonBorderColor(UIColor.white)
            .setCameraImage(UIImage(named: "trash"))
            .setCameraImageColor(UIColor.cyan)
            .setTitle("Permissão de câmera customizada")
            .setTitleColor(UIColor.white)
            .setTitleFont(UIFont.systemFont(ofSize: 40))
            .setCaption("Descrição da permissão de câmera")
            .setCaptionColor(UIColor.purple)
            .setCaptionFont(UIFont.systemFont(ofSize: 30))
            .setCheckPermissionButtonText("Averiguar")
            .setCheckPermissionButtonTextFont(UIFont.systemFont(ofSize: 24))
            .setCheckPermissionButtonTextColor(UIColor.red)
            .setCheckPermissionButtonBackgroundColor(UIColor.blue)
            .setCheckPermissionButtonBorderColor(UIColor.white)
            .setBottomSheetColor(UIColor.green)
            .setBottomSheetCornerRadius(0)
            .setBottomSheetTitle("Hora de ir para os ajustes")
            .setBottomSheetTitleColor(UIColor.blue)
            .setBottomSheetTitleFont(UIFont.systemFont(ofSize: 30))
            .setBottomSheetCaption("Ou será que não?")
            .setBottomSheetCaptionColor(UIColor.orange)
            .setBottomSheetCaptionFont(UIFont.systemFont(ofSize: 25))
            .setOpenSettingsButtonText("Pular para ajustes")
            .setOpenSettingsButtonTextFont(UIFont.systemFont(ofSize:20) )
            .setOpenSettingsButtonTextColor(UIColor.red)
            .setOpenSettingsButtonBackgroundColor(UIColor.blue)
            .setOpenSettingsButtonBorderColor(UIColor.white)
            .setCloseButtonText("Fechar tudo")
            .setCloseButtonTextFont(UIFont.systemFont(ofSize: 22))
            .setCloseButtonTextColor(UIColor.magenta)
            .setCloseButtonBackgroundColor(UIColor.cyan)
            .setCloseButtonBorderColor(UIColor.red)
    }
    .build()