20. Apr 2022Android

Jetpack Compose Basics - Preview a jeho parametre

Každý Android developer, ktorý píše používateľské rozhranie, potrebuje v určitom okamihu vidieť výsledky svojho úsilia, či už ide o kontrolu, ladenie alebo polishing kódu. Jednou z možností dostupných v Jetpack Compose je použitie preview zostavy zabudovanej do Android Studio (ďalšími možnosťami môže byť zabudovanie aplikácie do zariadenia, layout inspector atď.).

Peter ŠulyAndroid developer

Ak chcete použiť previews, jednoducho vytvorte composable funkcie s anotáciou @Preview. Keď je composable funkcia anotovaná @Preview, preview by sa mal vykresliť v dizajnovom okne Android Studio (zatiaľ integrácia v AS nie je dokonalá, ale vývojári stále pracujú na vylepšeniach. Niekedy je na vykreslenie previev potrebné viacero buildov).

Preview anotácia poskytuje mnoho spôsobov, ktorými je možné konfigurovať preview a tým zvýšiť produktivitu (napr. produktivitu ľudí, ktorí sa k projektu pridajú neskôr). Nižšie je uvedený minimálny príklad @Preview bez použitia ktoréhokoľvek z jeho parametrov. Funkciu je možné napísať ručne alebo pomocou prev live template.

@Preview
@Composable
fun ExamplePreview() {
  Button(
    modifier = Modifier.fillMaxWidth(),
    onClick = {},
    content = { Text(text = "Button") })
}

Preview parametre

Preview anotácie nachádzajúci sa v balíku ui.tooling má mnoho parametrov definujúcich spôsob, akým bude composable vyrendrovaný.

val name: String = "",
val group: String = "",
@IntRange(from = 1) val apiLevel: Int = -1,
val widthDp: Int = -1,
val heightDp: Int = -1,
val locale: String = "",
@FloatRange(from = 0.01) val fontScale: Float = 1f,
val showSystemUi: Boolean = false,
val showBackground: Boolean = false,
val backgroundColor: Long = 0,
@UiMode val uiMode: Int = 0,
@Device val device: String = Devices.DEFAULT

name

Každý preview je možné rozpoznať podľa jeho názvu, ktorý je štandardne názvom funkcie preview. Vo vyššie uvedenom príklade je názov ukážky ExamplePreview.

@Preview(name = "Some preview name")
@Composable
fun ExamplePreview() {
  ...
}

group

Podobné preview je možné pre lepšiu čitateľnosť zoskupiť. Môže to byť naozaj užitočné, ak existuje veľa composable previews.

@Preview(group = "Buttons")
@Composable
fun ButtonEnabledPreview() {...}

@Preview(group = "Buttons")
@Composable
fun ButtonDisabledPreview() {...}

@Preview(group = "Texts")
@Composable
fun TextBigPreview() {...}

@Preview(group = "Texts")
@Composable
fun TextSmallPreview() {...}

apiLevel

Úroveň API použitá pri renderovaní preview.

widthDP a heightDp

Štandardne má okno preview šírku a výšku použitej composable položky (správanie je podobné ako wrap_content v xml layoutoch). Toto je možné zmeniť pomocou widthDp a heightDp. Maximálna hodnota pre šírku aj výšku je 2000. Nastavenie vyššieho čísla nezväčší šírku preview.

@Preview(widthDp = 100, heightDp = 100)
@Composable
fun ExamplePreview() {...}

locale

Určuje, ktoré miestne nastavenie sa má použiť na vykreslenie preview (parameter akceptuje tento formát miestneho nastavenia). Ak sa nepoužije, použijú sa predvolené zdroje. Tento parameter môže byť užitočný, ak je vaša aplikácia viacjazyčná.

V nižšie uvedenom príklade je niekoľko vecí, na ktoré sa treba pozrieť. Na jednej composable zostave je možné použiť viacero preview anotácií, čo vedie k viacnásobným previews. Druhý preview využíva francúzske zdroje.

@Preview
@Preview(locale = "fr")
@Composable
fun ButtonPreview() {
  Button(
    ...
    content = { Text(text = stringResource(id = R.string.day_monday)) })
}

fontScale

Môže sa použiť na testovanie škálovateľnosti mierky písma.

showSystemUi

Boolean, ktorý určuje, či má byť v preview status bar a navigation bar.

showBackground a backgroundColor

Ak má showBackground boolean hodnotu true, za preview sa použije predvolená farba pozadia. Túto farbu je možné prispôsobiť parametrom backgroundColor. Mala by sa použiť farba ARGB int.

@Preview(showBackground = true, backgroundColor = 0xff0000)
@Composable
fun ExamplePreview() {...}

uiMode

Konfigurácia režimu používateľského rozhrania sa používa, ak je potrebné zobraziť preview určitých podmienok používateľského rozhrania. Toto je najužitočnejšie, ak sa chcete pozerať na composable v svetlom alebo tmavom režime (alebo v oboch).

@Preview(uiMode = UI_MODE_NIGHT_NO)
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun ExamplePreview() {...}

device

Zariadenie, ktoré sa má použiť v preview. V triede Devices je zoznam použiteľných konštánt (väčšinou zariadenia Nexus a Pixel).

@Preview(device = Devices.PIXEL_3A)
@Composable
fun ExamplePreview() {...}

Interactive Mode

Interaktívny režim je možné zapnúť tlačidlom nad preview. Umožňuje vám pracovať s preview podobne ako na zariadení. Je to jednoduchý a rýchly spôsob testovania prvkov s viacerými stavmi, ako je začiarknutie políčka alebo použitie prepínača. Interaktívny režim beží priamo vo vnútri AS, čo vedie k obmedzeniam, ako je zakázaný prístup k sieti alebo zakázaný prístup k súborom.