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âmetro | Descrição |
---|---|
showFeedback | Valor booleano que indica se a tela de resultado deve ser apresentada ou não. |
customInstructionView | Objeto contendo a customização da tela de instruções. |
customView | Objeto contendo a customização da tela de captura de documento. |
customLoadingView | Objeto contendo a customização da tela de processamento do documento. |
customResultView | Objeto contendo a customização da tela de resultado do processamento. |
customCameraPermissionView | Objeto contendo a customização da tela de permissão de câmera. |
Nota
- O parâmetro
showFeedback
é opcional e possui true como valor padrão;- Os parâmetros
customInstructionView
,customView
,customLoadingView
,customResultView
ecustomCameraPermissionView
são opcionais.
1. Tela de instruções
Parâmetro customInstructionView
Essa tela deve estar conforme com o protocolo DocumentscopyCustomInstructionView
que contém as seguintes propriedades:
Identificador | Descrição |
---|---|
(1) backButton | Botão para função voltar da navegação. |
(2) continueButton | Botã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âmetro customView
Essa tela deve estar em conformidade com o protocolo DocumentscopyCustomView
que contém os seguintes métodos e propriedades:
Identificador | Descrição |
---|---|
(1) backButton | Botão para fechar a tela. |
(2) closeButton | Botão para fechar a tela. |
(3) frontIndicatorView | Elemento que indica o momento de utilizar a frente do documento. |
(4) backIndicatorView | Elemento que indica o momento de utilizar o verso do documento. |
(5) instructionLabel | Texto informativo com orientação da captura, é exibido por apenas alguns segundos. |
(6) cameraPreview | Neste elemento será colocado a pré-visualização da câmera. |
(7) cameraVisualizer | Elemento que determina onde a pré-visualização da câmera será visível. |
(8) cameraMask | Elemento que determina onde a camera não será visível. |
(9) captureButton | Botão para capturar foto. |
(10) previewImageView | Elemento de imagem onde será exibida a imagem capturada para o usuário confirmar a qualidade da captura. |
(11) takeNewPictureButton | Botão para o usuário capturar a foto novamente. |
(12) usePictureButton | Botã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 ). |
Importante
- A propriedade
cameraMask
assim como acameraPreview
deve possuir suas constraints de leading, trailing, bottom e top iguais asuperview
e não àsafearea
.- A propriedade
cameraMask
deve ser adicionada após acameraPreview
.
Pré-visualização da câmera
A
DocumentscopyCameraPreviewView
é uma classe customizada que herda de umaUIView
.
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âmetro customLoadingView
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:
Identificador | Método |
---|---|
(1) Background | setLoadingBackgroundColor(_:) |
(2) Loading | setLoadingSpinner(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âmetro customResultView
Essa tela deve estar em conformidade com o protocolo DocumentscopyCustomResultView
que contém os seguintes métodos e propriedades:
Identificador | Descrição |
---|---|
(1) resultButton | Botão para fechar o fluxo de reconhecimento de documento. |
Método | Descrição |
---|---|
display(for:) | Esse método recebe como parâmetro um enum do tipo DocumentscopyResultType que indica qual resultado deve ser mostrado. |
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âmetro customCameraPermissionView
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()
Updated about 2 months ago