Jetpack Compose Basics - Preview a jeho parametre
Mobile
4
 min read
April 25, 2022

Jetpack Compose Basics - Preview a jeho parametre

Peter Šuly
Peter Šuly
Android developer
LinkedIn Logo

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ď.).

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 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ý.

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.

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.

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.

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.

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.

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).

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).

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.

Náš Android tím hľadá parťáka! Nezmeškaj svoju príležitosť.

Ďalšie články zo série Jetpack Compose Basics:

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.