Personalización

Módulos de captura

Aplicar la personalización UI específica del módulo a UnifiedID y PhotoIDScan.

UnifiedID

UnifiedID no define un tema Autentikar completamente independiente. Hereda los estilos básicos compartidos y delega el FaceTec capturar UI a la personalización FaceTec.

iOS

Usar AutentikarFaceTecCustomization para la interfaz FaceTec. Los valores básicos continúan estiloando las pantallas de Autentikar circundantes.

Configure la propiedad faceTecCustomization expuesta por AutentikarUnifiedIDManager. La configuración FaceTec controla la verificación facial y la captura de identificación basada en FaceTec mientras el flujo circundante hereda Core.

El gerente también expone faceTecLowLightCustomization para que un tema dedicado pueda ser utilizado cuando FaceTec entra en su experiencia de baja luz.

FaceTec controla la apariencia de sus pantallas de captura. Los valores disponibles heredan de la clase FaceTecCustomization del proveedor.

PhotoIDScan

PhotoIDScan tiene su propia clase AutentikarPhotoIDScanCustomization en ambas plataformas. Está diseñado para la experiencia de captura de documentos nativos mientras conserva el lenguaje visual general configurado en Core.

Configura y aplica el objeto antes de iniciar el flujo. Las propiedades que no modifiques conservan su valor predeterminado.

iOS

Aplicar la personalización

PhotoIDScanCustomization.swift

import AutentikarPhotoIDScan
import UIKit

let custom = AutentikarPhotoIDScanCustomization()
custom.backgroundColor = .systemBackground
custom.title.color = .label
custom.button.activeColor = .systemBlue

AutentikarPhotoIDScanManager.shared.setCustomization(custom)

Apariencia general

Propiedad	Tipo	Valor predeterminado	Función
`backgroundColor`	`UIColor`	`.white`	Fondo de la pantalla de revisión del documento.
`closeIconColor`	`UIColor`	`#082C4C`	Color del ícono de cierre de la pantalla de revisión.

Tipografía

Propiedad	Tipo	Valor predeterminado	Función
`title.font`	`UIFont`	Plus Jakarta Sans SemiBold, 18 pt	Fuente del título principal.
`title.color`	`UIColor`	`.black`	Color del título principal.
`subTitle.font`	`UIFont`	Plus Jakarta Sans SemiBold, 17 pt	Fuente de subtítulos y textos informativos destacados.
`subTitle.color`	`UIColor`	`.black`	Color disponible en el modelo de subtítulo. La guía de la cámara usa `cameraScreen.infoTextColor`.
`text.font`	`UIFont`	Plus Jakarta Sans Regular, 16 pt	Fuente del texto general.
`text.color`	`UIColor`	`.black`	Color del texto general.

Botón principal

Propiedad	Tipo	Valor predeterminado	Función
`button.font`	`UIFont`	Plus Jakarta Sans Regular, 16 pt	Fuente del texto del botón.
`button.activeTextColor`	`UIColor`	`.white`	Color del texto cuando el botón está habilitado.
`button.activeColor`	`UIColor`	`#082C4C`	Color de fondo cuando el botón está habilitado.
`button.disableTextColor`	`UIColor`	`.white`	Color del texto cuando el botón está deshabilitado.
`button.disabledColor`	`UIColor`	`#5F6368`	Color de fondo cuando el botón está deshabilitado.
`button.cornerRadius`	`CGFloat`	`10`	Radio de las esquinas del botón en puntos.

Tarjeta del documento

Propiedad	Tipo	Valor predeterminado	Función
`contentCard.reintentIconColor`	`UIColor`	`#082C4C`	Color del ícono utilizado para volver a capturar el documento.
`contentCard.cardIDFrontImageName`	`String`	`"autentikarCardIDFront"`	Nombre de la imagen placeholder para el frente del documento.
`contentCard.cardIDBackImageName`	`String`	`"autentikarCardIDBack"`	Nombre de la imagen placeholder para el reverso del documento.
`contentCard.dashedLineColor`	`UIColor`	`#082C4C`	Color del borde discontinuo de la tarjeta.
`contentCard.overlayActionContent.backgroundColor`	`UIColor`	`#082C4C`	Fondo del overlay de acción mostrado sobre la tarjeta.
`contentCard.overlayActionContent.iconColor`	`UIColor`	`.white`	Color del ícono del overlay.
`contentCard.overlayActionContent.text.font`	`UIFont`	Plus Jakarta Sans Regular, 16 pt	Fuente del texto del overlay.
`contentCard.overlayActionContent.text.color`	`UIColor`	`.white`	Color del texto del overlay.

Los nombres configurados en cardIDFrontImageName y cardIDBackImageName deben existir en el bundle de recursos utilizado por AutentikarPhotoIDScan.

Pantalla de cámara

Propiedad	Tipo	Valor predeterminado	Función
`cameraScreen.closeIconColor`	`UIColor`	`#082C4C`	Color del ícono para cerrar la cámara.
`cameraScreen.infoTextColor`	`UIColor`	`.black`	Color del texto que indica el lado y las recomendaciones de captura.
`cameraScreen.frameReferenceColor`	`UIColor`	`#082C4C`	Color del marco, progreso y guías visuales de detección.
`cameraScreen.statusHintText.font`	`UIFont`	Plus Jakarta Sans Regular, 16 pt	Fuente del mensaje de estado de la detección.
`cameraScreen.statusHintText.color`	`UIColor`	`.black`	Color del mensaje de estado de la detección.

Botón de captura

La versión actual expone takePhotoButton, pero CameraViewController todavía no aplica estas propiedades al botón manual de captura. Para ese botón se utilizan actualmente button.font, button.activeTextColor y button.activeColor.

Propiedad	Tipo	Valor predeterminado	Función
`takePhotoButton.borderColor`	`CGColor`	Blanco con 55 % de opacidad	Color del borde del botón circular de captura.
`takePhotoButton.cornerRadius`	`CGFloat`	`36`	Radio de las esquinas en puntos.
`takePhotoButton.borderWidth`	`CGFloat`	`5`	Ancho del borde en puntos.
`takePhotoButton.backgroundColor`	`UIColor`	`.white`	Color de fondo.
`takePhotoButton.shadowColor`	`CGColor`	Negro	Color de la sombra.
`takePhotoButton.shadowOpacity`	`Float`	`0.30`	Opacidad de la sombra.
`takePhotoButton.shadowOffset`	`CGSize`	`(0, 3)`	Desplazamiento horizontal y vertical de la sombra.
`takePhotoButton.shadowRadius`	`CGFloat`	`7`	Radio de desenfoque de la sombra.
`takePhotoButton.tintColor`	`UIColor`	`#082C4C`	Color del ícono de cámara.

Ejemplo completo

PhotoIDScanCustomization.swift

import AutentikarPhotoIDScan
import UIKit

let custom = AutentikarPhotoIDScanCustomization()

custom.backgroundColor = .systemBackground
custom.closeIconColor = .label
custom.title.font = .boldSystemFont(ofSize: 20)
custom.title.color = .label
custom.subTitle.font = .systemFont(ofSize: 17, weight: .semibold)
custom.subTitle.color = .label
custom.text.font = .systemFont(ofSize: 16)
custom.text.color = .secondaryLabel

custom.button.activeColor = .systemBlue
custom.button.activeTextColor = .white
custom.button.disabledColor = .systemGray
custom.button.disableTextColor = .white
custom.button.cornerRadius = 14

custom.contentCard.cardIDFrontImageName = "CompanyIDFront"
custom.contentCard.cardIDBackImageName = "CompanyIDBack"
custom.contentCard.reintentIconColor = .systemBlue
custom.contentCard.dashedLineColor = .systemBlue
custom.contentCard.overlayActionContent.backgroundColor = .systemBlue
custom.contentCard.overlayActionContent.iconColor = .white
custom.contentCard.overlayActionContent.text.color = .white

custom.cameraScreen.closeIconColor = .white
custom.cameraScreen.infoTextColor = .white
custom.cameraScreen.frameReferenceColor = .systemBlue
custom.cameraScreen.statusHintText.color = .white

AutentikarPhotoIDScanManager.shared.setCustomization(custom)

Android

Aplicar la personalización

MainActivity.kt

import android.graphics.Color
import com.autentikar.photoidscan.common.managers.AutentikarPhotoIDScanManager
import com.autentikar.photoidscan.utilities.customizations.AutentikarPhotoIDScanCustomization

val custom = AutentikarPhotoIDScanCustomization().apply {
    backgroundColor = Color.WHITE
    title.color = Color.BLACK
    button.activeColor = Color.rgb(8, 44, 76)
}

AutentikarPhotoIDScanManager.setCustomization(custom)

Apariencia general

Propiedad	Tipo	Valor predeterminado	Función
`backgroundColor`	`Int` (`@ColorInt`)	`#FFFFFF`	Fondo de la pantalla de revisión del documento.
`closeIconColor`	`Int` (`@ColorInt`)	`#082C4C`	Color del ícono de cierre de la pantalla de revisión.

Tipografía

Propiedad	Tipo	Valor predeterminado	Función
`title.typeface`	`Typeface?`	`null`	Fuente del título; se usa Plus Jakarta Sans SemiBold cuando no se configura.
`title.color`	`Int` (`@ColorInt`)	`#3A3A3C`	Color del título principal.
`subTitle.typeface`	`Typeface?`	`null`	Fuente del subtítulo; se usa Plus Jakarta Sans Regular cuando no se configura.
`subTitle.color`	`Int` (`@ColorInt`)	`#3A3A3C`	Color del subtítulo.
`text.typeface`	`Typeface?`	`null`	Fuente del texto general; se usa Plus Jakarta Sans Light cuando no se configura.
`text.color`	`Int` (`@ColorInt`)	`#3A3A3C`	Color del texto general.

Botón principal

Propiedad	Tipo	Valor predeterminado	Función
`button.typeface`	`Typeface?`	`null`	Fuente del botón; se usa Plus Jakarta Sans Regular cuando no se configura.
`button.activeTextColor`	`Int` (`@ColorInt`)	`#FFFFFF`	Color del texto cuando el botón está habilitado.
`button.activeColor`	`Int` (`@ColorInt`)	`#082C4C`	Color de fondo cuando el botón está habilitado.
`button.disabledTextColor`	`Int` (`@ColorInt`)	`#FFFFFF`	Color del texto cuando el botón está deshabilitado.
`button.disabledColor`	`Int` (`@ColorInt`)	`#5F6368`	Color de fondo cuando el botón está deshabilitado.
`button.cornerRadius`	`Float`	`20F`	Radio de las esquinas del botón en píxeles.

Tarjeta del documento

Propiedad	Tipo	Valor predeterminado	Función
`contentCard.reintentIconColor`	`Int` (`@ColorInt`)	`#082C4C`	Color del ícono utilizado para volver a capturar el documento.
`contentCard.idCardFrontImage`	`Int` (`@DrawableRes`)	`R.drawable.autentikar_id_card_front`	Recurso placeholder para el frente del documento.
`contentCard.idCardBackImage`	`Int` (`@DrawableRes`)	`R.drawable.autentikar_id_card_back`	Recurso placeholder para el reverso del documento.
`contentCard.overlayActionContent.backgroundColor`	`Int` (`@ColorInt`)	`#4D00B6D3`	Fondo semitransparente del overlay de acción.
`contentCard.overlayActionContent.iconColor`	`Int` (`@ColorInt`)	`#FFFFFF`	Color del ícono del overlay.
`contentCard.overlayActionContent.text.typeface`	`Typeface?`	`null`	Fuente del texto del overlay; se usa Plus Jakarta Sans Regular cuando no se configura.
`contentCard.overlayActionContent.text.color`	`Int` (`@ColorInt`)	`#FFFFFF`	Color del texto del overlay.

Pantalla de cámara

Propiedad	Tipo	Valor predeterminado	Función
`cameraScreen.closeIconColor`	`Int` (`@ColorInt`)	`#082C4C`	Color del ícono para cerrar la cámara.
`cameraScreen.progressBarColor`	`Int` (`@ColorInt`)	`#082C4C`	Color del indicador de progreso de la captura.
`cameraScreen.strokeColor`	`Int` (`@ColorInt`)	`#082C4C`	Color del marco guía del documento.

Ejemplo completo

MainActivity.kt

import android.graphics.Color
import android.graphics.Typeface
import com.autentikar.photoidscan.common.managers.AutentikarPhotoIDScanManager
import com.autentikar.photoidscan.utilities.customizations.AutentikarPhotoIDScanCustomization

val custom = AutentikarPhotoIDScanCustomization().apply {
    backgroundColor = Color.WHITE
    closeIconColor = Color.DKGRAY

    title.typeface = Typeface.DEFAULT_BOLD
    title.color = Color.BLACK
    subTitle.typeface = Typeface.DEFAULT
    subTitle.color = Color.DKGRAY
    text.typeface = Typeface.DEFAULT
    text.color = Color.DKGRAY

    button.activeColor = Color.rgb(37, 99, 235)
    button.activeTextColor = Color.WHITE
    button.disabledColor = Color.GRAY
    button.disabledTextColor = Color.WHITE
    button.cornerRadius = 24F

    contentCard.idCardFrontImage = R.drawable.company_id_front
    contentCard.idCardBackImage = R.drawable.company_id_back
    contentCard.reintentIconColor = Color.rgb(37, 99, 235)
    contentCard.overlayActionContent.backgroundColor = Color.argb(77, 37, 99, 235)
    contentCard.overlayActionContent.iconColor = Color.WHITE
    contentCard.overlayActionContent.text.color = Color.WHITE

    cameraScreen.closeIconColor = Color.WHITE
    cameraScreen.progressBarColor = Color.rgb(37, 99, 235)
    cameraScreen.strokeColor = Color.rgb(37, 99, 235)
}

AutentikarPhotoIDScanManager.setCustomization(custom)

Cómo se aplica la configuración

Cada gestor de módulos expone setCustomization excepto AutentikarUnifiedIDManager, cuyas propiedades específicas de FaceTec se establecen directamente. Esto mantiene el tema básico centralizado al tiempo que permite al proveedor de captura mantener sus propios controles UI.

La personalización de PhotoIDScan controla únicamente sus pantallas de revisión y captura. Las pantallas compartidas del flujo, como carga, consentimiento e instrucciones estándar, continúan utilizando AutentikarCoreCustomization.

Editar esta página

Core

Configura colores, tipografía, carga y pantallas de instrucciones iOS personalizadas en Autentikar SDK Core.

Localización de Android

Sobrescribe en strings.xml los textos visibles de Core, PhotoIDScan y UnifiedID para Android.