2.4 Texty - zadania

V prípade, že budeš chcieť ukladať Composable funkcie pod seba, použi Column nasledovne:

setContent {
    
    // umiestnuj Composable funkcie pod seba a
    // odsad obsah obrazovky od systemovych prvkov (status/navigation bar)
    Column(
        modifier = Modifier.systemBarsPadding() 
    ) {
        // content
    }
}

2.4.1 Simple Text

Zobraz na obrazovke text Hello World! bez štýlovania.

2.4.2 Simple Styled Text

Zobraz na obrazovke text Hello World! a aplikuj nasledujúce štýly (naschvál uvádzam zvláštne jednotky):

  • veľkosť textu nastav na 48px
  • farbu textu nastav na #254aa5 s 80% priehľadnosťou
  • výšku riadku nastav na 150%
  • odsadenie medzi písmenami nastav na -1px, nech sú bližšie k sebe
  • nastav ho ako bold, mám rád výrazné písmo

2.4.3 Complex Base

Teraz sa pozri na tento reálny dizajn (použitý na jednej z aplikácií na ktorých som pracoval).

Vytvor 12 samostatných textových štýlov presne podľa dizajnu okrem nastavenia fontu (fontFamily).

Odporúčania:

  1. Premenné obsahujúce Textové štýly odporúčam pomenovať textStyle... ľahšie ich autocomplete vyhľadá
  2. Textové štýly odporúčam uložiť do samostatného súboru, obvykle mu dávame názov typography.kt
  3. Všetky textové štýly použí na hlavnej obrazovke, na ďalšej hodine ich presunieme na správnejšie miesto

2.4.4 Fonty

Rozšír úlohu 2.4.3 aj o aplikovanie fontu Poppins podľa návodu z kapitoly 2.3-Fonty

2.4.5 Explore

Na Figme nájdi aspoň jeden dizajn, ktorý má pekne rozvinutú typografiu a nasimuluj ju. Teda nech má definovaných aspoň 8 textových štýlov. Tento nový dizajn skopíruj a vyrieš rovnako, ako úlohu 2.4.3.