Default UI - Customizing
In the Scan Process page, we learned how to configure the scan UI. Since SDK version 14.0.0, the Default UI is the default appearance.
-
Android
-
iOS
AnylineTireTreadScanner().scan(this, TireTreadConfig()) { outcome ->
when (outcome) {
is CompletedOutcome -> {
// Scan completed -- use outcome.measurementUUID to fetch results
}
is AbortedOutcome -> {
// User aborted the scan
}
is FailedOutcome -> {
Log.e("MY_APP", "Scan failed: ${outcome.error.message}")
}
}
}
AnylineTireTreadScanner().scan(from: self, config: TireTreadConfig()) { outcome in
switch outcome {
case let completed as CompletedOutcome:
// Scan completed -- use completed.measurementUUID to fetch results
case let aborted as AbortedOutcome:
// User aborted the scan
case let failed as FailedOutcome:
print("Scan failed: \(failed.error.message)")
default:
break
}
}
While ready out of the box with optimal defaults, the Default UI is also customizable.
By providing a custom UiConfig object to the TireTreadConfig you can customize the texts:
-
Android
-
iOS
-
JSON
val config = TireTreadConfig().apply {
uiConfig.apply {
orientationWarningConfig.text = "Gire o dispositivo para o modo paisagem"
orientationWarningConfig.rotationLockHint = "Certifique-se de que a rotação automática está ativa"
}
}
AnylineTireTreadScanner().scan(this, config) { outcome ->
when (outcome) {
is CompletedOutcome -> openResultScreen(outcome.measurementUUID)
is AbortedOutcome -> finish()
is FailedOutcome -> {
Log.e("MY_APP", "Scan failed: ${outcome.error.message}")
finish()
}
}
}
let config = TireTreadConfig()
config.uiConfig.orientationWarningConfig.text = "Gire o dispositivo para o modo paisagem"
config.uiConfig.orientationWarningConfig.rotationLockHint = "Certifique-se de que a rotação automática está ativa"
AnylineTireTreadScanner().scan(from: self, config: config) { outcome in
switch outcome {
case let completed as CompletedOutcome:
self.openResultScreen(uuid: completed.measurementUUID)
case let aborted as AbortedOutcome:
self.navigationController?.popViewController(animated: true)
case let failed as FailedOutcome:
print("Scan failed: \(failed.error.message)")
self.navigationController?.popViewController(animated: true)
default:
break
}
}
{
"uiConfig": {
"distanceIndicatorConfig": {
"textOk": "Mantenha a distância.",
"textMoveCloser": "Chegue mais perto.",
"textMoveAway": "Aumente a distância."
},
"focusPointTooltipConfig": {
"text": "Mova o dispositivo para frente e para trás para detectar o pneu."
},
"tapToStartScanningTooltipConfig": {
"textOk": "Toque na tela para iniciar o processo.",
"textNotOkMetric": "Mantenha o aparelho a cerca de 20cm de distância do pneu."
},
"uploadViewConfig": {
"text": "Enviando imagens, aguarde..."
},
"orientationWarningConfig": {
"text": "Gire o dispositivo para o modo paisagem",
"rotationLockHint": "Certifique-se de que a rotação automática está ativa"
}
}
}
|
If any element information is not provided, its default value will be used. |
Here are the Default UI elements that can be customized, and their respective property names within the
UIConfig
class:
| Element | Property Name | Customizable in Default UI |
|---|---|---|
|
Yes |
|
|
Yes |
|
N/A |
No - Integral to Default UI appearance |
|
|
Yes |
|
|
Yes |
|
N/A |
No - Shared with all UIs |
|
|
Yes |
|
|
Yes |
|
|
Yes |
|
If you need full control over the UI appearance, consider building your own custom UI instead of using the Default or Classic UI. |