5.1 Button Composable

Teraz na obrazovku položíme aj nejaké tie tlačidlá. Využijeme na to composable funkciu Button. Button je v podstate len klikateľný rámček s pekne nastavenými efektami kliknutia. Sám musíš zadefinovať, čo sa zobrazí v tomto Button-e. Klasickým obsahom je samozrejme Text.

V praxi veľmi často namiesto Button-u vytvárame vlastnú Composable funkciu. Ako na to, si ukážeme neskôr.

Pozrime si najprv ukážku použitia Button so všetkými možnými atribútmi:

Button(
    onClick = {},                                  // Akcia po kliknuti na tlacidlo
    modifier = Modifier,                           // Klasicky Modifikator
    enabled = true,                                // Ci je tlacidlo klikatelne
    shape = ButtonDefaults.shape,                  // Tvar tlacidla
    colors = ButtonDefaults.buttonColors(),        // Farby tlacidla
    elevation = ButtonDefaults.buttonElevation(),  // Velkost tiena pod tlacidlom
    border = null,                                 // Border tlacidla
    contentPadding = ButtonDefaults.ContentPadding,// Padding obsahu tlacidla
    interactionSource = null                       // Zdroj interakcie s tlacidlom
) {
    Text("Click me")                               // Obsah tlacidla
}

Pre naše účely nám bude stačiť len onClick, modifier, enabled a content. Takže väčšinou uvidíme niečo takéto:

Button(
    onClick = {},
    modifier = Modifier,
    enabled = true,
) {
    Text("Click me")
}

Jediné čo musíme teraz vyriešiť je… čo napchať do onClick funkcie? Samozrejme môžeme niečo vypísať na štandardný výstup, ale… my sme frontend vývojári. My chceme zmeniť vzhľad aplikácie. Zmenu vzhľadu aplikácie si ukážeme v ďalšej kapitole. Teraz sa pozrime na štandardný výstup.

Štandardný výstup do LogCat - Android only

Info: Tento prístup funguje iba na Android platforme. Keď budeš pracovať s Kotlin Multiplatform, použi buď println() alebo pomocné knižnice, alebo si nejakú naprogramuj sám.

Na rozdiel od println() máme možnosť použiť aj silnejší nástroj - LogCat - do ktorého môžeme logovať pomocou volania funkcií z triedy Log. Tie nám umožňujú výstupom definovať okrem štandardnej hlášky aj:

• prioritu - zoradené od najnižšej po najvyššiu:
  • Log.v() - v = verbose = ukecaný
  • Log.d() - d = debug = ladenie
  • Log.i() - i = info = informácia
  • Log.w() - w = warning = varovanie
  • Log.e() - e = error = chyba
• tag - nastavením prvého atribútu

V nástroji LogCat môžeme následne filtrovať logy podľa špecifikovanej priority a tagu. LogCat nájdeme v ľavom Toolbar-e pod touto ikonou:

Exploráciu tohto nástroja nechám už na tebe. Ale aby sme ho použili v kombinácii s Button, môžeme napísať nasledovný kód:

Button(
    onClick = { Log.d("My Application", "Button clicked") }
) {
    Text("Click me")
}

Skús kliknúť na tlačidlo a v LogCat-e nájdi tento Log.