Ako používate modifikátory vo vašom kóde?

Modifikátory v Android vývoji, najmä pri použití Jetpack Compose, zohrávajú kľúčovú úlohu pri nastavovaní vzhľadu a správania Composable funkcií.

Hlavné spôsoby použitia:

1. Veľkosť a okraje:

   • Nastavenie šírky a výšky: Modifier.width(...), Modifier.height(...), Modifier.size(...).
   • Pridanie vnútorných okrajov: Modifier.padding(...).
   • Pridanie vonkajších okrajov: Modifier.offset(...).

   // Príklad použitia modifikátorov veľkosti a okrajov
   Box(
       modifier = Modifier
           .size(100.dp) // Nastaví veľkosť
           .padding(16.dp) // Pridá vnútorné okraje
   ) {
       // Obsah Boxu
   }
   

2. Pozadie a rámik:

   • Nastavenie farby alebo štetca pozadia: Modifier.background(...).
   • Pridanie rámika: Modifier.border(...).

   // Príklad použitia modifikátorov pozadia a rámika
   Text(
       "Ahoj!",
       modifier = Modifier
           .background(Color.Blue) // Modré pozadie
           .border(2.dp, Color.Red) // Červený rámik s hrúbkou 2dp
   )
   

3. Interakcia a spracovanie udalostí:

   • Reakcia na klik: Modifier.clickable(...).
   • Reakcia na dlhé stlačenie: Modifier.pointerInput(...) alebo Modifier.combinedClickable(...).
   • Správa posúvania: Modifier.verticalScroll(...), Modifier.horizontalScroll(...).

   // Príklad použitia modifikátora pre klik
   Button(
       onClick = { /* Vykonanie akcie pri kliknutí */ },
       modifier = Modifier.padding(8.dp) // Okraje tlačidla
   ) {
       Text("Klikni na mňa")
   }
   

4. Umiestnenie a zarovnanie:

   • Vyplnenie dostupného priestoru: Modifier.fillMaxSize(), Modifier.fillMaxWidth(), Modifier.fillMaxHeight().
   • Zarovnanie obsahu: Modifier.align(...).

   // Príklad použitia modifikátora na vyplnenie priestoru
   Column(
       modifier = Modifier.fillMaxSize() // Vyplní celý dostupný priestor
   ) {
       // Deti prvky
   }
   

5. Stav a efekty:

   • Zmena priehľadnosti: Modifier.alpha(...).
   • Otáčanie a škálovanie: Modifier.rotate(...), Modifier.scale(...).
   • Použitie tieňov: Modifier.shadow(...).

   // Príklad použitia modifikátora priehľadnosti
   Image(
       painter = painterResource(id = R.drawable.my_image),
       contentDescription = "Môj obrázok",
       modifier = Modifier.alpha(0.5f) // Robí obrázok polopriehľadným
   )
   

6. Špecializované modifikátory UI-komponentov: Niektoré komponenty majú svoje vlastné modifikátory pre špecifické nastavenia, napríklad:

   • Modifier.weight(...) pre Column a Row.
   • Modifier.constrainAs(...) pre ConstraintLayout.

Modifikátory sa skladajú a ich poradie má význam. Sú aplikované postupne sprava doľava.

// Príklad skladania modifikátorov
Text(
    "Kombinovaný",
    modifier = Modifier
        .padding(16.dp) // Najskôr okraje
        .background(Color.Yellow) // Potom pozadie
        .clickable { /* Akcia */ } // A nakoniec, klikateľnosť
)

Efektívne používanie modifikátorov umožňuje vytvárať flexibilné, prispôsobiteľné a interaktívne UI v deklaratívnom štýle Jetpack Compose.