2.2 Štýlovanie Text-ov

V predchádzajúcom príklade sme videli takýto kus kódu:

Text(
    text = "Hello World!",
    color = Color(0xFF000000),
    fontSize = 24.sp,
    fontWeight = FontWeight.SemiBold,
    textAlign = TextAlign.Center,
    lineHeight = 32.sp,
    letterSpacing = 1.sp,
)

Hoci je to pekný a prehľadný kód, vieme si predstaviť obrazovku s obrovským množstvom textových elementov. Toto je obrazovka na ktorej som nedávno pracoval:

text-heavy-screen.png

Ak by som chcel túto obrazovku zreprodukovať, musel by som pre niektoré Texty copy-pastovať všetko okrem atribútu text. Pozri sa konkrétne na texty:

  • Prístup do všetkých online kurzov
  • Skillman AI
  • Skillmea Community
  • Sledovanie progressu

Ako vidíš, všetky tieto Texty majú rovnaké štýly a práve tieto by som chcel nejako prepoužiť.

Jednou z alternatív (mne neobľúbenej) je použiť globálnu MaterialTheme. Nemám ju rád, lebo ma obmedzuje na Material Design, ktorý v drvivej väčšine aplikácií nie je vhodný. Druhou - lepšou - možnosťou je vytvoriť štýly ako globálne premenné v samostatnom súbore s názvom napr. styles.kt:

// ...

import androidx.compose.ui.text.TextStyle

val bodyMedium = TextStyle(
    color = Color(0xFF000000),
    fontSize = 24.sp,
    fontWeight = FontWeight.SemiBold,
    textAlign = TextAlign.Center,
    lineHeight = 32.sp,
    letterSpacing = 1.sp,
)

a používať ich ako:

Text(text = "Prístup do všetkých online kurzov", style = bodyMedium)
Text(text = "Skillman AI", style = bodyMedium)
Text(text = "Skillmea Community", style = bodyMedium)
Text(text = "Sledovanie progressu", style = bodyMedium)

Upozorňujem na jednu vec. Farba písma môže byť odlišná v závislosti od pozadia, na ktoré písmo kreslíš. Podobne sa môže líšiť aj zarovnanie textu. Minimálne tieto 2 atribúty by som do vlastného štýlu nepridával. Kompletný štýl by mal obsahovať len informácie o veľkostiach textu:

val bodyMedium = TextStyle(
    fontSize = 24.sp,
    fontWeight = FontWeight.SemiBold,
    lineHeight = 32.sp,
    letterSpacing = 1.sp,
)

Dodatky

Sám ešte nemám naštudované použitie nového Styles API. Styles API by nám malo pomôcť stanoviť hierarchické štýly a prekonať tak vyššie spomenuté problémy so staticky definovanými TextStyle.