Tùy biến giao diện Android SDK

Tùy biến màn hình quét chip của Android SDK CICReader — văn bản, nút bấm, icon NFC, chỉ báo loading, cửa sổ container và font tùy chỉnh — bằng cách truyền một CICUIConfig vào CICConfig của bạn.

Thêm CICUIConfig vào CICConfig

Truyền tham số uiConfig khi bạn khởi tạo CICConfig:

kotlin

val config = CICConfig(
  baseUrl           = "<BASE_URL>",
  connectTimeoutMs  = 60_000,
  readTimeoutMs     = 60_000,
  cacheScanStrategy = CICCacheScanStrategy.NO_CACHE,
  uiConfig          = CICUIConfig(...)
)

kotlin

class CICUIConfig {
  val cancelButton: ButtonElement? = null,
  val scanningGuide: TextElement? = null,
  val waitingForCard: TextElement? = null,
  val connectedCard: TextElement? = null,
  val verifyingCard: TextElement? = null,
  val readingText: TextElement? = null,
  val nfcIcon: ImageElement? = null,
  val loadingIndicator: ProgressBarElement? = null,
  val windowView: WindowElement? = null,
  val customFont: List<FontSource>? = null,
}

Tham số:

Tham số	Kiểu	Bắt buộc	Mặc định	Mô tả
`cancelButton`	ButtonElement?	Không	`null`	Nút hành động hủy.
`scanningGuide`	TextElement?	Không	`null`	Văn bản hướng dẫn hiển thị khi người dùng đặt thẻ.
`waitingForCard`	TextElement?	Không	`null`	Văn bản hiển thị khi đang chờ thẻ vào vùng NFC.
`connectedCard`	TextElement?	Không	`null`	Văn bản hiển thị ngay khi chip kết nối.
`verifyingCard`	TextElement?	Không	`null`	Văn bản hiển thị trong lúc xác minh.
`readingText`	TextElement?	Không	`null`	Văn bản hiển thị trong lúc chip đang được đọc.
`nfcIcon`	ImageElement?	Không	`null`	Asset icon NFC.
`loadingIndicator`	ProgressBarElement?	Không	`null`	Thanh loading.
`windowView`	WindowElement?	Không	`null`	Cửa sổ container của màn hình quét.
`customFont`	List<FontSource>?	Không	`null`	Các font cần đăng ký trước khi có thể được tham chiếu theo tên.

Các thành phần UI cốt lõi

CICUIConfig được xây dựng từ năm loại phần tử:

Trường	Kiểu	Mô tả
`TextElement`	class	Tùy biến nội dung văn bản, kích thước, màu sắc và font.
`ButtonElement`	class	Style cho nút bấm — văn bản, nền, viền.
`ImageElement`	class	Đặt một icon hoặc ảnh tùy chỉnh.
`ProgressBarElement`	class	Cấu hình màu sắc của chỉ báo loading.
`WindowElement`	class	Điều chỉnh nền và bán kính góc của cửa sổ.

TextElement

Ghi đè chuỗi mặc định và style cho một bước của màn hình quét.

kotlin

TextElement(
  text     = "My custom string",
  textSize = 12f,
  color    = Color.parseColor("#BB86FC"),
  fontName = "MyRoboto"
)

Tham số	Kiểu	Bắt buộc	Mặc định	Mô tả
`text`	String	Không	Mặc định của SDK	Chuỗi hiển thị.
`textSize`	Float	Không	Mặc định của SDK	Kích thước font.
`color`	Int	Không	Mặc định của SDK	Màu ARGB thông qua `Color.parseColor("#rrggbb")`.
`fontName`	String	Không	Mặc định của SDK	Tên font đã được đăng ký thông qua `customFont`.

ButtonElement

Style cho một nút hành động.

kotlin

ButtonElement(
  text            = TextElement("Cancel", textSize = 18f),
  backgroundColor = Color.parseColor("#008000"),
  strokeColor     = Color.parseColor("#fcba03"),
  borderRadius    = 32f
)

Tham số	Kiểu	Bắt buộc	Mặc định	Mô tả
`text`	TextElement	Không	Mặc định của SDK	Một `TextElement` lồng bên trong cho nhãn nút.
`backgroundColor`	Int	Không	Mặc định của SDK	Màu nền nút.
`strokeColor`	Int	Không	Mặc định của SDK	Màu viền.
`borderRadius`	Float	Không	Mặc định của SDK	Bán kính góc.

ImageElement

Thay thế icon NFC.

kotlin

ImageElement(
  path      = "ic_android_nfc_wave.png",
  assetType = AssetType.ASSET
)

Tham số	Kiểu	Bắt buộc	Mặc định	Mô tả
`path`	String	Có	—	Tên file trong `assets/`, hoặc một đường dẫn file tuyệt đối.
`assetType`	AssetType	Có	—	Loại nguồn: `ASSET` hoặc `FILE`.

ProgressBarElement

Thay thế spinner mặc định.

kotlin

ProgressBarElement(
  backgroundColor = Color.parseColor("#333333"),
  progressColor   = Color.parseColor("#BB86FC")
)

Tham số	Kiểu	Bắt buộc	Mặc định	Mô tả
`backgroundColor`	Int	Không	Mặc định của SDK	Màu track phía sau chỉ báo tiến trình.
`progressColor`	Int	Không	Mặc định của SDK	Màu của chính chỉ báo tiến trình.

WindowElement

Điều chỉnh giao diện của container.

kotlin

WindowElement(
  backgroundColor   = Color.parseColor("#d9bd71"),
  topLeftRadius     = 32,
  topRightRadius    = 32,
  bottomLeftRadius  = 32,
  bottomRightRadius = 32
)

Tham số	Kiểu	Bắt buộc	Mặc định	Mô tả
`backgroundColor`	Int	Không	Mặc định của SDK	Màu nền cửa sổ.
`topLeftRadius`	Int	Không	Mặc định của SDK	Bán kính góc trên-trái.
`topRightRadius`	Int	Không	Mặc định của SDK	Bán kính góc trên-phải.
`bottomLeftRadius`	Int	Không	Mặc định của SDK	Bán kính góc dưới-trái.
`bottomRightRadius`	Int	Không	Mặc định của SDK	Bán kính góc dưới-phải.

Font tùy chỉnh

Đăng ký font bằng FontSource trước khi tham chiếu chúng qua fontName trên bất kỳ TextElement nào.

kotlin

CICUIConfig(
  customFont = listOf(
    FontSource.Asset(
      fontName = "MyRoboto",
      file     = "playwrite.ttf"
    ),
    FontSource.File(
      fontName = "GoogleSans",
      path     = iconWavePath
    )
  ),
  scanningGuide = TextElement(
    text     = "Please insert your card",
    textSize = 12f,
    color    = Color.parseColor("#BB86FC"),
    fontName = "MyRoboto"
  )
)

Tham số	Kiểu	Bắt buộc	Mặc định	Mô tả
`FontSource.Asset.fontName`	String	Có	—	Tên dùng để đăng ký font.
`FontSource.Asset.file`	String	Có	—	Tên file font trong `assets/`.
`FontSource.File.fontName`	String	Có	—	Tên dùng để đăng ký font.
`FontSource.File.path`	String	Có	—	Đường dẫn tuyệt đối đến file font.

INFO

fontName trên một TextElement chỉ được resolve nếu cùng tên đó đã được đăng ký trong customFont. Một tên chưa đăng ký sẽ rơi về font mặc định của SDK thay vì báo lỗi, nên một lỗi gõ sai sẽ hiện ra như một font không đổi, chứ không phải một crash.

Ví dụ đầy đủ

kotlin

val uiConfig = CICUIConfig(
  customFont = listOf(
    FontSource.Asset(fontName = "MyRoboto", file = "playwrite.ttf")
  ),
  scanningGuide = TextElement(
    text     = "Đặt thẻ CCCD lên mặt sau điện thoại",
    textSize = 12f,
    color    = Color.parseColor("#BB86FC"),
    fontName = "MyRoboto"
  ),
  cancelButton = ButtonElement(
    text            = TextElement("Huỷ", textSize = 18f),
    backgroundColor = Color.parseColor("#008000"),
    strokeColor     = Color.parseColor("#fcba03"),
    borderRadius    = 32f
  ),
  nfcIcon = ImageElement(
    path      = "ic_android_nfc_wave.png",
    assetType = AssetType.ASSET
  ),
  loadingIndicator = ProgressBarElement(
    backgroundColor = Color.parseColor("#333333"),
    progressColor   = Color.parseColor("#BB86FC")
  ),
  windowView = WindowElement(
    backgroundColor   = Color.parseColor("#d9bd71"),
    topLeftRadius     = 32,
    topRightRadius    = 32,
    bottomLeftRadius  = 32,
    bottomRightRadius = 32
  )
)

val config = CICConfig(
  baseUrl           = "<BASE_URL>",
  connectTimeoutMs  = 60_000,
  readTimeoutMs     = 60_000,
  cacheScanStrategy = CICCacheScanStrategy.NO_CACHE,
  uiConfig          = uiConfig
)

Bước tiếp theo

Tạo giao dịch — cấp token mà SDK xác thực bằng
Đọc NFC — những gì SDK gửi lên ngay khi lần đọc chip hoàn tất

Tùy biến giao diện Android SDK ​

Thêm CICUIConfig vào CICConfig ​

Các thành phần UI cốt lõi ​

TextElement ​

ButtonElement ​

ImageElement ​

ProgressBarElement ​

WindowElement ​

Font tùy chỉnh ​

Ví dụ đầy đủ ​

Bước tiếp theo ​

Tùy biến giao diện Android SDK

Thêm CICUIConfig vào CICConfig

Các thành phần UI cốt lõi

TextElement

ButtonElement

ImageElement

ProgressBarElement

WindowElement

Font tùy chỉnh

Ví dụ đầy đủ

Bước tiếp theo