3.3 Composable a Preview

Už viac krát som spomínal Composable funkcie a asi ste už pochopili, že sú to všetky funkcie, ktoré sa týkajú vykresľovania obsahu na obrazovku. Nie je to ich jediná funkcia, dokážu robiť aj iné zázraky, ale tým sa budeme venovať neskôr.

Composable funkcia sa od klasickej funkcie odlišuje viacerými špecifikami:

  1. pred definíciou tejto funkcie sa nachádza anotácia @Composable
  2. názov funkcie sa začína veľkým písmenom
  3. Composable funkciu môžeš volať výlučne z inej Composable funkcie

Takže správny zápis funkcie je:

@Composable
fun MyComposable() {
    Text("Hello World")
}
  • Ak by funkcia nebola označená @Composable, nemohli by sme v nej zavolať funkciu Text.
  • Ak by funkcia bola napísaná malým písmenom (fun myComposable()), IDE by nám vypisovalo warningy.
  • Keďže je funkcia označená @Composable, môže byť volaná iba z inej @Composable funkcie, napríklad vnútri setContent funkcie.

Napísaním vlastných Composable funkcií tak vieme naše používateľské rozhranie deliť na menšie celky. Buď to budú vlastné komponenty, už existujúce, ale predštýlované komponenty, alebo rovno celé obrazovky či iné veľké bloky.

Preview - QuickStart

Ak pred Composable funkciu navyše napíšeš anotáciu @Preview označíš túto funkciu ako prezerateľnú z bočného menu.

@Preview
@Composable
fun MyComposable() {
    Text("Hello World")
}

Potom môžeš kliknutím na zobrazenie Preview vidieť tvoje obrazovky (možno budeš potrebovať kliknutie na Refresh):

preview.png

V červenom rámčeku som zvýraznil prepináčik medzi

  1. Kód only
  2. Kód + Preview
  3. Preview only

Preview - Detaily

Preview anotácia nemôžeš aplikovať nad Composable funkciou, ktorá má nedefaultné atribúty. Teda funkcia buď nesmie mať žiadné atribúty alebo musí mať všetky atribúty nastavené s predvolenou hodnotou. Preview totiž nevie sám od seba predvyplniť atribúty tvojej Composable funkcie.

Ďalšie vlastnosti Preview anotácie:

  1. dokáže prijať viacero rôznych parametrov určených pre štýlovanie
  2. je @Repeatable, to znamená, že nad jednou Composable funkciou ju môžeš zavolať viackrát

Tak dokážeš vytvoriť napríklad preview pre viacero veľkostí obrazoviek. Ak by ma zaujímal vzhľad obrazovky na dvoch rôznych obrazovkách, mohol by som použiť takýto kód:

@Preview(heightDp = 320, widthDp = 240)
@Preview(heightDp = 480, widthDp = 360)
@Composable
fun GreetingPreview()

Preview - Bonus

Môžeš si vytvoriť aj vlastnú @Preview anotáciu, ktorá zobrazí viacero preview v jednom okne.

  1. vytvorenie vlastnej anotácie (zobraz obrazovku v light aj dark móde): 
    @Retention(AnnotationRetention.BINARY)
@Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION)
@Preview(name = "Light Mode")
@Preview(name = "Dark Mode", uiMode = UI_MODE_NIGHT_YES)
annotation class MyPreview
  2. použitie vlastnej Preview anotácie: 
    @MyPreview
@Composable
fun GreetingPreview()
  3. výsledok:

custom_preview.png