Zvládnutie orientácie obrazovky: Komplexný sprievodca spracovaním otáčania zariadenia

V dnešnom svete s mnohými zariadeniami je elegantné spracovanie orientácie obrazovky kľúčové pre poskytovanie pozitívneho používateľského zážitku. Či už ide o smartfón, tablet alebo dokonca skladacie zariadenie, používatelia očakávajú, že sa aplikácie plynulo prispôsobia, keď otočia svoje zariadenie. Tento sprievodca poskytuje komplexný prehľad spracovania otáčania zariadenia, pokrýva rôzne platformy a techniky, aby ste zaistili, že vaše aplikácie budú responzívne a používateľsky prívetivé.

Pochopenie orientácie obrazovky

Orientácia obrazovky sa vzťahuje na smer, v ktorom je obsah zobrazený na obrazovke zariadenia. Dve hlavné orientácie sú:

• Na výšku (Portrait): Obrazovka je vyššia ako širšia. Toto je typická orientácia pre smartfóny.
• Na šírku (Landscape): Obrazovka je širšia ako vyššia. Často sa uprednostňuje pri sledovaní videí alebo hraní hier.

Niektoré zariadenia a aplikácie podporujú aj:

• Obrátená na výšku (Reverse Portrait): Orientácia na výšku s otočením zariadenia o 180 stupňov.
• Obrátená na šírku (Reverse Landscape): Orientácia na šírku s otočením zariadenia o 180 stupňov.

Prečo spracovávať zmeny orientácie obrazovky?

Neschopnosť spracovať zmeny orientácie obrazovky môže viesť k rôznym problémom, vrátane:

• Problémy s rozložením (layoutom): Prvky môžu byť nesprávne zarovnané, orezané alebo sa môžu prekrývať.
• Strata údajov: V niektorých prípadoch môže dôjsť k strate stavu aktivity alebo aplikácie pri otočení obrazovky.
• Zlý používateľský zážitok: Rušivý alebo nefunkčný zážitok môže frustrovať používateľov a poškodiť reputáciu vašej aplikácie.
• Problémy s výkonom: Časté prekresľovanie a výpočty rozloženia môžu ovplyvniť výkon, najmä na starších zariadeniach.

Spracovanie orientácie obrazovky na rôznych platformách

Špecifické techniky na spracovanie orientácie obrazovky sa líšia v závislosti od platformy, pre ktorú vyvíjate. Pozrime sa na niektoré z najpopulárnejších platforiem:

1. Android

Android poskytuje niekoľko mechanizmov na spracovanie zmien orientácie obrazovky. Najbežnejšie prístupy zahŕňajú:

a. Zmeny konfigurácie

Štandardne Android znovu vytvára Aktivitu (Activity), keď sa zmení orientácia obrazovky. To znamená, že metóda `onCreate()` sa volá znova a celé rozloženie sa znovu „nafúkne“ (re-inflated). Aj keď to môže byť užitočné pre úplnú reštrukturalizáciu používateľského rozhrania na základe orientácie, môže to byť aj neefektívne, ak potrebujete len mierne upraviť rozloženie.

Aby ste zabránili opätovnému vytvoreniu Aktivity, môžete deklarovať, že vaša Aktivita spracováva zmenu konfigurácie `orientation` v súbore `AndroidManifest.xml`:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

Pridaním `orientation` a `screenSize` (dôležité pre API level 13 a vyšší) hovoríte systému, že vaša Aktivita si zmeny orientácie spracuje sama. Keď sa obrazovka otočí, zavolá sa metóda `onConfigurationChanged()`.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Check the orientation of the screen
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "na šírku", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "na výšku", Toast.LENGTH_SHORT).show();
 }
}

Vnútri `onConfigurationChanged()` môžete aktualizovať používateľské rozhranie na základe novej orientácie. Tento prístup je efektívnejší ako opätovné vytváranie Aktivity, pretože sa vyhýba zbytočnému načítavaniu zdrojov a „nafukovaniu“ rozloženia.

b. Ukladanie a obnovovanie stavu Aktivity

Aj keď zmenu konfigurácie spracujete sami, možno budete stále potrebovať uložiť a obnoviť stav Aktivity. Napríklad, ak má vaša Aktivita textové pole, budete chcieť zachovať text, ktorý používateľ zadal, keď sa obrazovka otočí.

Môžete použiť metódu `onSaveInstanceState()` na uloženie stavu Aktivity a metódu `onRestoreInstanceState()` na jeho obnovenie.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("moj_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String mojText = savedInstanceState.getString("moj_text");
 myTextView.setText(mojText);
}

Alternatívne môžete použiť ViewModels so SavedStateHandle na správu a uchovávanie údajov súvisiacich s UI naprieč zmenami konfigurácie, čo je modernejší a odporúčaný prístup.

c. Alternatívne rozloženia

Android vám umožňuje poskytnúť rôzne súbory rozloženia pre rôzne orientácie obrazovky. Môžete vytvoriť samostatné súbory rozloženia v adresároch `res/layout-land/` a `res/layout-port/`. Keď sa obrazovka otočí, Android automaticky načíta príslušný súbor rozloženia.

Tento prístup je užitočný, keď sa UI musí výrazne líšiť v orientácii na šírku a na výšku. Napríklad, môžete chcieť zobraziť rozloženie s dvoma panelmi na šírku a s jedným panelom na výšku.

d. Použitie ConstraintLayout

ConstraintLayout je výkonný správca rozloženia, ktorý vám umožňuje vytvárať flexibilné a adaptívne rozloženia. S ConstraintLayout môžete definovať obmedzenia (constraints), ktoré špecifikujú, ako by mali byť zobrazenia umiestnené vo vzťahu k sebe navzájom a k rodičovskému rozloženiu. To uľahčuje vytváranie rozložení, ktoré sa prispôsobujú rôznym veľkostiam a orientáciám obrazovky.

2. iOS

iOS tiež poskytuje mechanizmy na spracovanie zmien orientácie obrazovky. Tu sú niektoré bežné prístupy:

a. Auto Layout

Auto Layout je systém rozloženia založený na obmedzeniach (constraints), ktorý vám umožňuje definovať pravidlá, ako majú byť zobrazenia umiestnené a dimenzované. Obmedzenia Auto Layout zaisťujú, že sa vaše UI prispôsobí rôznym veľkostiam a orientáciám obrazovky.

Pri použití Auto Layout typicky definujete obmedzenia, ktoré špecifikujú vzťahy medzi zobrazeniami. Napríklad, môžete obmedziť tlačidlo tak, aby bolo centrované horizontálne a vertikálne v rámci svojho rodičovského zobrazenia. Keď sa obrazovka otočí, Auto Layout engine automaticky prepočíta pozície a veľkosti zobrazení, aby splnil obmedzenia.

b. Veľkostné triedy (Size Classes)

Veľkostné triedy sú spôsobom, ako kategorizovať veľkosti a orientácie obrazovky. iOS definuje dve veľkostné triedy: `Compact` a `Regular`. Zariadenie môže mať rôzne veľkostné triedy pre svoju šírku a výšku. Napríklad, iPhone v orientácii na výšku má veľkostnú triedu šírky `Compact` a veľkostnú triedu výšky `Regular`. Na šírku má často výšku `Compact` a šírku `Compact` alebo `Regular` v závislosti od modelu.

Môžete použiť veľkostné triedy na prispôsobenie vášho UI na základe veľkosti a orientácie obrazovky. Napríklad, môžete chcieť zobraziť inú sadu zobrazení alebo použiť rôzne fonty pre rôzne veľkostné triedy.

Môžete konfigurovať rôzne obmedzenia a dokonca inštalovať/odinštalovať zobrazenia na základe veľkostných tried priamo v Interface Builder alebo programovo.

c. Metódy otáčania View Controller

iOS poskytuje niekoľko metód v triede UIViewController, ktoré sa volajú pri otočení zariadenia:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Volá sa predtým, ako sa zobrazenie view controlleru zmenší pre prechod.
• viewWillLayoutSubviews(): Volá sa tesne predtým, ako zobrazenie view controlleru rozloží svoje podzobrazenia.
• viewDidLayoutSubviews(): Volá sa tesne potom, ako zobrazenie view controlleru rozloží svoje podzobrazenia.

Tieto metódy môžete prepísať, aby ste vykonali vlastné úpravy rozloženia pri otočení obrazovky.

d. Notification Center

Môžete počúvať notifikácie o zmene orientácie pomocou Notification Center:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Na šírku")
 } else {
 print("Na výšku")
 }
}

3. Webový vývoj (HTML, CSS, JavaScript)

Vo webovom vývoji môžete použiť CSS media queries a JavaScript na spracovanie zmien orientácie obrazovky.

a. CSS Media Queries

Media queries vám umožňujú aplikovať rôzne štýly na základe veľkosti obrazovky, orientácie a ďalších charakteristík. Môžete použiť mediálnu vlastnosť `orientation` na zacielenie na špecifické orientácie.

/* Orientácia na výšku */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Orientácia na šírku */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Môžete použiť media queries na úpravu rozloženia, fontov a ďalších štýlov na základe orientácie.

b. JavaScript

Môžete použiť JavaScript na detekciu zmien orientácie obrazovky a vykonanie vlastných akcií. API `screen.orientation` poskytuje informácie o aktuálnej orientácii.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Na šírku");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Na výšku");
 } else {
 console.log("Neznáma orientácia");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Alternatívne môžete použiť API `matchMedia` s media queries:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Na šírku");
 } else {
 console.log("Na výšku");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript sa dá použiť na dynamickú úpravu rozloženia, načítanie rôznych zdrojov alebo vykonanie iných akcií na základe orientácie.

c. Frameworky pre responzívny dizajn

Frameworky ako Bootstrap, Foundation a Materialize CSS poskytujú vstavanú podporu pre responzívny dizajn, čo uľahčuje vytváranie rozložení, ktoré sa prispôsobujú rôznym veľkostiam a orientáciám obrazovky. Tieto frameworky typicky používajú mriežkový systém a media queries na vytváranie flexibilných a responzívnych UI.

Najlepšie postupy pre spracovanie orientácie obrazovky

Tu sú niektoré najlepšie postupy, ktoré treba mať na pamäti pri spracovaní zmien orientácie obrazovky:

• Vyhnite sa zbytočnému opätovnému vytváraniu Aktivity/ViewControllera: Ak je to možné, spracujte zmenu konfigurácie sami, aby ste sa vyhli réžii opätovného vytvárania Aktivity alebo ViewControllera.
• Ukladajte a obnovujte stav: Vždy ukladajte a obnovujte stav Aktivity/ViewControllera, aby ste predišli strate údajov. Použite ViewModels pre robustnejšiu správu stavu.
• Použite Auto Layout alebo ConstraintLayout: Tieto systémy rozloženia uľahčujú vytváranie flexibilných a adaptívnych rozložení.
• Testujte na viacerých zariadeniach: Testujte svoju aplikáciu na rôznych zariadeniach s rôznymi veľkosťami a orientáciami obrazovky, aby ste zaistili, že funguje správne.
• Zvážte prístupnosť: Uistite sa, že vaša aplikácia zostáva prístupná pre používateľov so zdravotným postihnutím aj po otočení obrazovky.
• Poskytnite jasné vizuálne signály: Ak sa UI výrazne zmení pri otočení obrazovky, poskytnite jasné vizuálne signály, ktoré pomôžu používateľom pochopiť zmeny.
• Vyhnite sa vynúteniu špecifickej orientácie (pokiaľ to nie je nevyhnutné): Umožnite používateľom používať ich zariadenie v preferovanej orientácii, kedykoľvek je to možné. Vynútenie orientácie môže byť frustrujúce a nepohodlné. Uzamknite orientáciu len vtedy, ak je to kľúčové pre funkčnosť aplikácie (napr. hra, ktorá vyžaduje režim na šírku). Ak orientáciu uzamknete, jasne používateľovi vysvetlite dôvod.
• Optimalizujte výkon: Minimalizujte množstvo práce, ktorá sa musí vykonať pri otočení obrazovky, aby ste sa vyhli problémom s výkonom.
• Používajte relatívne jednotky: Pri definovaní veľkostí a pozícií vo vašom rozložení používajte relatívne jednotky (napr. percentá, `dp`, `sp`) namiesto absolútnych jednotiek (napr. pixely), aby ste zaistili, že sa vaše UI správne škáluje na rôznych veľkostiach obrazovky.
• Využívajte existujúce knižnice a frameworky: Využite existujúce knižnice a frameworky, ktoré poskytujú podporu pre responzívny dizajn a spracovanie orientácie obrazovky.

Zámok orientácie a používateľský zážitok

Hoci je vo všeobecnosti najlepšie umožniť používateľom voľne otáčať svoje zariadenia, existujú situácie, kedy môžete chcieť uzamknúť orientáciu obrazovky. Napríklad, prehrávač videa na celej obrazovke môže uzamknúť orientáciu na režim na šírku pre optimálne sledovanie.

Je však dôležité používať zámok orientácie s mierou a poskytnúť používateľovi jasný dôvod. Vynútenie orientácie môže byť frustrujúce a môže znížiť prístupnosť vašej aplikácie.

Ako uzamknúť orientáciu obrazovky

Android

Orientáciu obrazovky v Androide môžete uzamknúť nastavením atribútu `screenOrientation` v súbore `AndroidManifest.xml`:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

Orientáciu môžete uzamknúť aj programovo:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

V iOS môžete špecifikovať podporované orientácie v súbore `Info.plist`. Môžete tiež prepísať metódu `supportedInterfaceOrientations` vo vašom view controlleri:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globálne úvahy

Pri navrhovaní pre globálne publikum majte na pamäti nasledujúce skutočnosti týkajúce sa orientácie obrazovky:

• Rozloženia sprava doľava (RTL): Zvážte, ako sa vaše UI prispôsobí jazykom RTL. Niektoré jazyky, ako napríklad arabčina a hebrejčina, sa píšu sprava doľava. Uistite sa, že sa vaše rozloženie správne zrkadlí v režime RTL. Auto Layout a ConstraintLayout často poskytujú vstavanú podporu pre rozloženia RTL.
• Kultúrne preferencie: Buďte si vedomí kultúrnych preferencií súvisiacich s používaním zariadení. Hoci väčšina používateľov je zvyknutá na režimy na výšku aj na šírku, niektoré kultúry môžu mať jemné preferencie. Testovanie s používateľmi z rôznych regiónov môže poskytnúť cenné poznatky.
• Prístupnosť pre rôznorodých používateľov: Vždy uprednostňujte prístupnosť. Uistite sa, že vaša aplikácia je použiteľná pre ľudí so zdravotným postihnutím bez ohľadu na orientáciu obrazovky. To zahŕňa poskytovanie alternatívneho textu pre obrázky, zabezpečenie dostatočného farebného kontrastu a podporu asistenčných technológií.

Testovanie spracovania orientácie obrazovky

Dôkladné testovanie je nevyhnutné na zabezpečenie správneho spracovania zmien orientácie obrazovky vašou aplikáciou. Tu je niekoľko tipov na testovanie:

• Používajte emulátory a reálne zariadenia: Testujte svoju aplikáciu na emulátoroch aj na reálnych zariadeniach, aby ste pokryli širšiu škálu veľkostí obrazoviek a hardvérových konfigurácií.
• Testujte v rôznych orientáciách: Testujte svoju aplikáciu v orientácii na výšku aj na šírku, ako aj v obrátenej orientácii na výšku a na šírku, ak sú podporované.
• Testujte s rôznymi veľkosťami obrazovky: Testujte svoju aplikáciu na zariadeniach s rôznymi veľkosťami obrazovky, aby ste sa uistili, že sa UI správne škáluje.
• Testujte s rôznymi veľkosťami písma: Testujte svoju aplikáciu s rôznymi veľkosťami písma, aby ste sa uistili, že text zostáva čitateľný.
• Testujte s povolenými funkciami prístupnosti: Testujte svoju aplikáciu s povolenými funkciami prístupnosti, ako sú čítačky obrazovky, aby ste sa uistili, že zostáva prístupná pre používateľov so zdravotným postihnutím.
• Automatizované testovanie: Implementujte automatizované testy UI, ktoré pokrývajú zmeny orientácie obrazovky. To môže pomôcť odhaliť regresie a zabezpečiť konzistentné správanie naprieč verziami.

Záver

Efektívne spracovanie orientácie obrazovky je kritickým aspektom mobilného a webového vývoja. Porozumením rôznych techník dostupných na každej platforme a dodržiavaním najlepších postupov môžete vytvárať aplikácie, ktoré poskytujú plynulý a príjemný používateľský zážitok bez ohľadu na to, ako používateľ drží svoje zariadenie. Nezabudnite uprednostniť testovanie a zvážiť globálne dôsledky vašich dizajnových rozhodnutí, aby ste zaistili, že vaša aplikácia bude prístupná a používateľsky prívetivá pre rôznorodé publikum.