Skip to main content

Štylizácia komponentov

Komponenty knižnice možno štylizovať prostredníctvom update bloku v Jetpack Compose alebo pomocou XML atribútov v layoute. Oba prístupy možno kombinovať.

SecureTextField (vstupné pole)​

Atributy a metody se vztahují na všechny vstupné komponenty typu SecureTextField: SecurePanField, SecureExpiryField, SecureCvvField a SecureFullNameField.

Metódy štylizácie​

MetódaParameterPopis
setHint(hint)StringNastaví placeholder text.
setTextColor(color)IntNastaví farbu textu.
setHintColor(color)IntNastaví farbu placeholder textu.
setTextSize(sp)FloatNastaví veľkosť textu v sp.
setFontFamily(family)StringNastaví rodinu písma podľa názvu.
setTypeface(typeface)TypefaceNastaví písmo pomocou inštancie Typeface.
setBackgroundColor(color)IntNastaví farbu pozadí.
setBorderColor(color)IntNastaví farbu orámovania v normálním stavu.
setFocusedBorderColor(color)IntNastaví farbu orámovania pri zameraní.
setBorderWidth(widthPx)IntNastaví šírku orámovania v pixeloch.
setBorderWidthDp(widthDp)FloatNastaví šírku orámovania v dp.
setCornerRadius(radiusPx)FloatNastaví zaoblenie rohov v pixeloch.
setCornerRadiusDp(radiusDp)FloatNastaví zaoblenie rohov v dp.
setErrorColor(color)IntNastaví farbu chyby (text i orámovania).
setErrorTextSize(sp)FloatNastaví veľkosť chybového textu v sp.
setPadding(horizontalPx, verticalPx)Int, IntNastaví vnútorné odsadenie v pixeloch.
setPaddingDp(horizontalDp, verticalDp)Float, FloatNastaví vnútorné odsadenie v dp.
showLabelBooleanZobrazení labelu nad poľom (true/false). Predvolené true.
labelTextString?Vlastný text labelu. Pri null sa použije predvolený preložený label.
setLabelColor(color)IntNastaví farbu labelu.
setLabelTextSize(sp)FloatNastaví veľkosť labelu v sp.
Informácie

Pre väčšinu prípadov odporúčame používať *Dp varianty setterov (setBorderWidthDp, setCornerRadiusDp, setPaddingDp). Vstupy sú v dp a knižnica prevod na pixely zaistí interne. Parametre týchto metód sú v API anotované @Dimension(unit = Dimension.DP), takže je zrejmé, akú jednotku očakávajú.

field.setBorderWidthDp(2f)
field.setCornerRadiusDp(12f)

Príklad v Compose (update blok)​

SecurePanField(
    state = panState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        setBackgroundColor(Color.parseColor("#FAFAFA"))
        setBorderColor(Color.parseColor("#1976D2"))
        setFocusedBorderColor(Color.parseColor("#0D47A1"))
        setBorderWidthDp(2f)
        setCornerRadiusDp(12f)
        setTextColor(Color.parseColor("#212121"))
        setHintColor(Color.parseColor("#9E9E9E"))
        setTextSize(16f)
        setErrorColor(Color.parseColor("#C62828"))
        setPaddingDp(horizontalDp = 14f, verticalDp = 10f)
        setFontFamily("sans-serif-medium")
        showLabel = true
        labelText = null // null = použije se predvolené překlad dle session.translation
        setLabelColor(Color.parseColor("#616161"))
        setLabelTextSize(12f)
    }
)

Ak chcete label skryť:

update = {
    showLabel = false
}

XML atribúty​

XML atribútFormátPopis
app:secureFieldHintstringPlaceholder text zobrazený v prázdnom poli.
app:secureFieldTextColorcolorFarba textu.
app:secureFieldHintColorcolorFarba placeholder textu.
app:secureFieldTextSizedimensionVeľkosť textu (napr. 18sp).
app:secureFieldFontFamilystringRodina písma (napr. "monospace", "sans-serif-medium").
app:secureFieldBackgroundColorcolorFarba pozadí pole.
app:secureFieldBorderColorcolorFarba orámovania v normálním stavu.
app:secureFieldBorderWidthdimensionŠírka orámovania (napr. 2dp).
app:secureFieldCornerRadiusdimensionZaoblenie rohov (napr. 12dp).
app:secureFieldFocusedBorderColorcolorFarba orámovania pri zameraní (focus).
app:secureFieldErrorColorcolorFarba chybového textu a orámovania v chybovom stave.
app:secureFieldErrorTextSizedimensionVeľkosť chybového textu.
app:secureFieldPaddingHorizontaldimensionHorizontální vnútorné odsadenie.
app:secureFieldPaddingVerticaldimensionVertikální vnútorné odsadenie.
app:secureFieldLabelstringVlastný text labelu nad poľom. Ak nie je uvedený, použije sa predvolený preložený label.
app:secureFieldShowLabelbooleanZobrazení labelu (true/false). Predvolené true.
app:secureFieldLabelColorcolorFarba labelu.
app:secureFieldLabelTextSizedimensionVeľkosť labelu (napr. 12sp).

Stavy orámovania​

Ohraničenie poľa sa automaticky mení podľa aktuálneho stavu:

StavFarba orámovaniaPriorita
ChybaerrorColorNajvyššia
Zaostrené (focus)focusedBorderColorStredná
NormálnyborderColorNejnižší

Štylizácia viacerých polí naraz​

Pomocou rozširujúcej funkcie možno aplikovať rovnaký štýl na všetky polia cez update blok:

fun SecureTextField.applyCommonStyle() {
    setBackgroundColor(Color.parseColor("#FAFAFA"))
    setBorderColor(Color.parseColor("#1976D2"))
    setFocusedBorderColor(Color.parseColor("#0D47A1"))
    setBorderWidthDp(2f)
    setCornerRadiusDp(12f)
    setTextColor(Color.parseColor("#212121"))
    setTextSize(16f)
}

SecurePanField(
    state = panState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        applyCommonStyle()
        setFontFamily("sans-serif-medium")  // specifické pro PAN pole
    }
)
SecureExpiryField(
    state = expiryState,
    modifier = Modifier.fillMaxWidth(),
    update = { applyCommonStyle() }
)
SecureCvvField(
    state = cvvState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        applyCommonStyle()
        setTypeface(Typeface.MONOSPACE)  // specifické pro CVV pole
    }
)
SecureFullNameField(
    state = fullNameState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        applyCommonStyle()
        setHint("Jméno a příjmení") // specifické pro jméno plátce
    }
)

Použitie android:background​

Pri SecureField možno v XML použiť aj štandardný atribút android:background:

<cz.comgate.sdk.SecurePanField
    android:background="#E8F5E9"
    ... />

Pre čitateľnejšiu konfiguráciu odporúčame preferovať atribút app:secureFieldBackgroundColor, ktorý je určený priamo na štylizáciu pozadia poľa.

SecurePayButton (platební tlačidlo)​

Metódy štylizácie​

MetódaParameterPopis
setText(text)StringNastaví text tlačidla.
setButtonTextColor(color)IntNastaví farbu textu (aktivní stav).
setButtonTextSize(sp)FloatNastaví veľkosť textu v sp.
setButtonFontFamily(family)StringNastaví rodinu písma.
setButtonTypeface(typeface)TypefaceNastaví písmo pomocou inštancie Typeface.
setButtonBackgroundColor(color)IntNastaví farbu pozadí (aktivní stav).
setButtonBorderColor(color)IntNastaví farbu orámovania.
setButtonBorderWidth(widthPx)IntNastaví šírku orámovania v pixeloch.
setButtonBorderWidthDp(widthDp)FloatNastaví šírku orámovania v dp.
setButtonCornerRadius(radiusPx)FloatNastaví zaoblenie rohov v pixeloch.
setButtonCornerRadiusDp(radiusDp)FloatNastaví zaoblenie rohov v dp.
setDisabledBackgroundColor(color)IntNastaví farbu pozadí v deaktivovanom stave.
setDisabledTextColor(color)IntNastaví farbu textu v deaktivovanom stave.
setButtonPadding(horizontalPx, verticalPx)Int, IntNastaví vnútorné odsadenie v pixeloch.
setButtonPaddingDp(horizontalDp, verticalDp)Float, FloatNastaví vnútorné odsadenie v dp.
setLoadingAnimationEnabled(enabled)BooleanPovoľuje alebo zakazuje shimmer sweep animaci počas spracovania platby. Predvolené: true.
Informácie

Pre väčšinu prípadov odporúčame používať *Dp varianty setterov (setButtonBorderWidthDp, setButtonCornerRadiusDp, setButtonPaddingDp). Vstupy sú v dp a knižnica prevod na pixely zaistí interne.

Príklad v Compose (update blok)​

SecurePayButton(
    session = session,
    collector = collector,
    onPaymentResult = { result -> /* ... */ },
    paymentParamsProvider = { /* ... */ },
    modifier = Modifier.fillMaxWidth(),
    update = {
        setText("Zaplatit")
        setButtonBackgroundColor(Color.parseColor("#1E88E5"))
        setButtonTextColor(Color.WHITE)
        setButtonCornerRadiusDp(12f)
        setButtonBorderColor(Color.parseColor("#1565C0"))
        setButtonBorderWidthDp(1f)
        setDisabledBackgroundColor(Color.parseColor("#CFD8DC"))
        setDisabledTextColor(Color.parseColor("#78909C"))
        setButtonTextSize(16f)
        setLoadingAnimationEnabled(true)
    }
)

XML atribúty​

XML atribútFormátPopis
app:payButtonTextstringText tlačidla (predvolené: "Pay").
app:payButtonTextColorcolorFarba textu v aktívnom stave.
app:payButtonTextSizedimensionVeľkosť textu.
app:payButtonFontFamilystringRodina písma.
app:payButtonBackgroundColorcolorFarba pozadí v aktívnom stave.
app:payButtonBorderColorcolorFarba orámovania.
app:payButtonBorderWidthdimensionŠírka orámovania.
app:payButtonCornerRadiusdimensionZaoblenie rohov.
app:payButtonDisabledBackgroundColorcolorFarba pozadí v deaktivovanom stave.
app:payButtonDisabledTextColorcolorFarba textu v deaktivovanom stave.
app:payButtonPaddingHorizontaldimensionHorizontální vnútorné odsadenie.
app:payButtonPaddingVerticaldimensionVertikální vnútorné odsadenie.
app:payButtonLoadingAnimationbooleanPovoluje/zakazuje shimmer sweep animaci počas spracovania platby. Predvolené: true.

Automatický deaktivované stav​

Ak nie sú explicitne nastavené farby pre deaktivovaný stav (payButtonDisabledBackgroundColor, payButtonDisabledTextColor), tlačidlo automaticky vypočíta tlmenú variantu z aktívnych farieb znížením priehľadnosti na 50 %.

Animace počas spracovania platby​

Po stlačení tlačidla je nad jeho obsahom zobrazená shimmer sweep animácia — polopriehľadný trblietavý pruh, ktorý neustále prechádza zľava doprava cez tlačidlo. Tlačidlo pritom zachováva plnú farbu pozadia a pôvodný text — animácia nesie informáciu o prebiehajúcom spracovaní.

Animaci lze vypnout v update bloku alebo priamo na stavu:

SecurePayButton(
    // ...
    update = {
        setLoadingAnimationEnabled(false)
    }
)

Po vypnutí animácie zostáva tlačidlo počas spracovania v pokojnom deaktivovanom vzhľade bez vizuálneho efektu.

SecurePaymentStatusView (stavový banner)​

Použitie v Compose​

V Compose sa komponenta používa cez rememberPaymentStatusState(). Vizuálna štylizácia nie je v Compose API priamo exponovaná — komponenta automaticky aplikuje príslušné farby (zelená/oranžová/červená) podľa stavu platby. Preklad správ možno nastaviť cez translation na stave:

val statusState = rememberPaymentStatusState()
statusState.translation = Translation.Czech

SecurePaymentStatusView(state = statusState)

// Zobrazení výsledku:
statusState.showStatus(paymentResult)
// alebo:
statusState.showError("Vlastní chybová zpráva")
// Skrytí:
statusState.clear()

XML atribúty​

XML atribútFormátPopis
app:statusViewTextstringPočiatočný text správy (voliteľné).
app:statusViewTextColorcolorFarba textu.
app:statusViewTextSizedimensionVeľkosť textu.
app:statusViewFontFamilystringRodina písma.
app:statusViewBackgroundColorcolorFarba pozadí banneru.
app:statusViewBorderColorcolorFarba orámovania.
app:statusViewBorderWidthdimensionŠírka orámovania.
app:statusViewCornerRadiusdimensionZaoblenie rohov.
app:statusViewPaddingHorizontaldimensionHorizontální vnútorné odsadenie.
app:statusViewPaddingVerticaldimensionVertikální vnútorné odsadenie.

Metódy štylizácie​

MetódaParameterPopis
setTextColor(color)IntNastaví farbu textu.
setTextSize(sp)FloatNastaví veľkosť textu v sp.
setFontFamily(family)StringNastaví rodinu písma.
setTypeface(typeface)TypefaceNastaví písmo pomocou inštancie Typeface.
setStatusBackgroundColor(color)IntNastaví farbu pozadí.
setBorderColor(color)IntNastaví farbu orámovania.
setBorderWidth(widthPx)IntNastaví šírku orámovania v pixeloch.
setBorderWidthDp(widthDp)FloatNastaví šírku orámovania v dp.
setCornerRadius(radiusPx)FloatNastaví zaoblenie rohov v pixeloch.
setCornerRadiusDp(radiusDp)FloatNastaví zaoblenie rohov v dp.
setStatusPadding(horizontalPx, verticalPx)Int, IntNastaví vnútorné odsadenie v pixeloch.
setStatusPaddingDp(horizontalDp, verticalDp)Float, FloatNastaví vnútorné odsadenie v dp.
Informácie

Pre väčšinu prípadov odporúčame používať *Dp varianty setterov (setBorderWidthDp, setCornerRadiusDp, setStatusPaddingDp). Vstupy sú v dp a knižnica prevod na pixely zaistí interne.

Tip

Komponenta začína v stave GONE (skrytá). Zobrazí sa automaticky po zavolaní showStatus() a skryje sa po zavolaní clear(). Viac informácií o zobrazovaní stavov nájdete v sekcii Výsledky platby.