Zvládnutí orientace obrazovky: Komplexní průvodce zpracováním otáčení zařízení

V dnešním světě mnoha zařízení je elegantní zpracování orientace obrazovky klíčové pro poskytování pozitivního uživatelského zážitku. Ať už se jedná o chytrý telefon, tablet, nebo dokonce ohebné zařízení, uživatelé očekávají, že se aplikace plynule přizpůsobí, když své zařízení otočí. Tento průvodce poskytuje komplexní přehled zpracování otáčení zařízení, pokrývá různé platformy a techniky, aby zajistil, že vaše aplikace budou responzivní a uživatelsky přívětivé.

Porozumění orientaci obrazovky

Orientace obrazovky se vztahuje na směr, ve kterém je obsah zobrazen na obrazovce zařízení. Dvě hlavní orientace jsou:

• Na výšku (Portrait): Obrazovka je vyšší než širší. Toto je typická orientace pro chytré telefony.
• Na šířku (Landscape): Obrazovka je širší než vyšší. Tato orientace je často preferována pro sledování videí nebo hraní her.

Některá zařízení a aplikace také podporují:

• Obráceně na výšku (Reverse Portrait): Orientace na výšku s zařízením otočeným o 180 stupňů.
• Obráceně na šířku (Reverse Landscape): Orientace na šířku s zařízením otočeným o 180 stupňů.

Proč zpracovávat změny orientace obrazovky?

Nezvládnutí změn orientace obrazovky může vést k řadě problémů, včetně:

• Problémy s rozvržením: Prvky mohou být nesprávně zarovnané, oříznuté nebo se mohou překrývat.
• Ztráta dat: V některých případech může dojít ke ztrátě stavu aktivity nebo aplikace při otočení obrazovky.
• Špatný uživatelský zážitek: Rušivý nebo nefunkční zážitek může frustrovat uživatele a poškodit pověst vaší aplikace.
• Problémy s výkonem: Časté překreslování a výpočty rozvržení mohou ovlivnit výkon, zejména na starších zařízeních.

Zpracování orientace obrazovky na různých platformách

Konkrétní techniky pro zpracování orientace obrazovky se liší v závislosti na platformě, pro kterou vyvíjíte. Podívejme se na některé z nejpopulárnějších platforem:

1. Android

Android poskytuje několik mechanismů pro zpracování změn orientace obrazovky. Mezi nejběžnější přístupy patří:

a. Změny konfigurace

Ve výchozím stavu Android znovu vytváří aktivitu (Activity), když se změní orientace obrazovky. To znamená, že je znovu volána metoda `onCreate()` a celé rozvržení je znovu načteno. I když to může být užitečné pro úplné restrukturování uživatelského rozhraní na základě orientace, může to být také neefektivní, pokud potřebujete pouze mírně upravit rozvržení.

Aby se zabránilo opětovnému vytvoření aktivity, můžete v souboru `AndroidManifest.xml` deklarovat, že vaše aktivita zpracovává změnu konfigurace `orientation`:

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

Přidáním `orientation` a `screenSize` (důležité pro API level 13 a vyšší) sdělujete systému, že vaše aktivita si změny orientace zpracuje sama. Když se obrazovka otočí, bude volána metoda `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, "landscape", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
 }
}

Uvnitř `onConfigurationChanged()` můžete aktualizovat uživatelské rozhraní na základě nové orientace. Tento přístup je efektivnější než opětovné vytváření aktivity, protože se vyhýbá zbytečnému načítání zdrojů a rozvržení.

b. Ukládání a obnovování stavu aktivity

I když si změnu konfigurace zpracováváte sami, stále můžete potřebovat uložit a obnovit stav aktivity. Pokud má například vaše aktivita textové pole, budete chtít zachovat text, který uživatel zadal, i po otočení obrazovky.

Můžete použít metodu `onSaveInstanceState()` pro uložení stavu aktivity a metodu `onRestoreInstanceState()` pro jeho obnovení.

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

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

Alternativně můžete použít ViewModels se SavedStateHandle pro správu a uchování dat souvisejících s UI napříč změnami konfigurace, což je modernější a doporučený přístup.

c. Alternativní rozvržení

Android vám umožňuje poskytnout různé soubory rozvržení pro různé orientace obrazovky. Můžete vytvořit samostatné soubory rozvržení v adresářích `res/layout-land/` a `res/layout-port/`. Když se obrazovka otočí, Android automaticky načte příslušný soubor rozvržení.

Tento přístup je užitečný, když se uživatelské rozhraní musí výrazně lišit v orientaci na šířku a na výšku. Například můžete chtít zobrazit dvoupanelové rozvržení na šířku a jednopainelové na výšku.

d. Použití ConstraintLayout

ConstraintLayout je výkonný správce rozvržení, který vám umožňuje vytvářet flexibilní a adaptivní rozvržení. S ConstraintLayout můžete definovat omezení, která specifikují, jak mají být pohledy (views) umístěny relativně k sobě navzájem a k rodičovskému rozvržení. To usnadňuje vytváření rozvržení, která se přizpůsobují různým velikostem a orientacím obrazovky.

2. iOS

iOS také poskytuje mechanismy pro zpracování změn orientace obrazovky. Zde jsou některé běžné přístupy:

a. Auto Layout

Auto Layout je systém rozvržení založený na omezeních, který vám umožňuje definovat pravidla pro umístění a velikost pohledů. Omezení Auto Layoutu zajišťují, že se vaše UI přizpůsobí různým velikostem a orientacím obrazovky.

Při použití Auto Layoutu obvykle definujete omezení, která specifikují vztahy mezi pohledy. Například můžete omezit tlačítko tak, aby bylo vodorovně a svisle vystředěno ve svém rodičovském pohledu. Když se obrazovka otočí, engine Auto Layoutu automaticky přepočítá pozice a velikosti pohledů, aby splnil omezení.

b. Třídy velikostí

Třídy velikostí (Size Classes) jsou způsobem, jak kategorizovat velikosti a orientace obrazovky. iOS definuje dvě třídy velikostí: `Compact` a `Regular`. Zařízení může mít různé třídy velikostí pro svou šířku a výšku. Například iPhone v orientaci na výšku má třídu velikosti `Compact` pro šířku a `Regular` pro výšku. Na šířku má často `Compact` výšku a `Compact` nebo `Regular` šířku v závislosti na modelu.

Třídy velikostí můžete použít k přizpůsobení vašeho UI na základě velikosti a orientace obrazovky. Například můžete chtít zobrazit jinou sadu pohledů nebo použít jiné fonty pro různé třídy velikostí.

Můžete konfigurovat různá omezení a dokonce instalovat/odinstalovat pohledy na základě tříd velikostí přímo v Interface Builderu nebo programově.

c. Metody otáčení View Controlleru

iOS poskytuje několik metod ve třídě UIViewController, které jsou volány při otáčení zařízení:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Voláno před tím, než je pohled view controlleru změněn pro přechod.
• viewWillLayoutSubviews(): Voláno těsně před tím, než pohled view controlleru rozloží své podřízené pohledy.
• viewDidLayoutSubviews(): Voláno těsně poté, co pohled view controlleru rozloží své podřízené pohledy.

Tyto metody můžete přepsat a provést vlastní úpravy rozvržení při otočení obrazovky.

d. Notification Center

Můžete naslouchat oznámením o změně orientace pomocí Notification Center:

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

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landscape")
 } else {
 print("Portrait")
 }
}

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

Ve webovém vývoji můžete použít CSS media queries a JavaScript ke zpracování změn orientace obrazovky.

a. CSS Media Queries

Media queries vám umožňují aplikovat různé styly na základě velikosti obrazovky, orientace a dalších charakteristik. Můžete použít mediální vlastnost `orientation` pro cílení na konkrétní orientace.

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

/* Orientace na šířku */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Můžete použít media queries k úpravě rozvržení, fontů a dalších stylů na základě orientace.

b. JavaScript

Můžete použít JavaScript k detekci změn orientace obrazovky a provádění vlastních akcí. API `screen.orientation` poskytuje informace o aktuální orientaci.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landscape");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrait");
 } else {
 console.log("Unknown orientation");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Alternativně můžete použít API `matchMedia` s media queries:

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

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landscape");
 } else {
 console.log("Portrait");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript lze použít k dynamické úpravě rozvržení, načítání různých zdrojů nebo provádění jiných akcí na základě orientace.

c. Frameworky pro responzivní design

Frameworky jako Bootstrap, Foundation a Materialize CSS poskytují vestavěnou podporu pro responzivní design, což usnadňuje vytváření rozvržení, která se přizpůsobují různým velikostem a orientacím obrazovky. Tyto frameworky obvykle používají mřížkový systém a media queries k vytváření flexibilních a responzivních UI.

Osvědčené postupy pro zpracování orientace obrazovky

Zde jsou některé osvědčené postupy, které je třeba mít na paměti při zpracování změn orientace obrazovky:

• Vyhněte se zbytečnému opětovnému vytváření Activity/ViewControlleru: Pokud je to možné, zpracujte změnu konfigurace sami, abyste se vyhnuli režii spojené s opětovným vytvářením aktivity nebo ViewControlleru.
• Ukládejte a obnovujte stav: Vždy ukládejte a obnovujte stav aktivity/ViewControlleru, abyste předešli ztrátě dat. Pro robustnější správu stavu použijte ViewModels.
• Používejte Auto Layout nebo ConstraintLayout: Tyto systémy rozvržení usnadňují vytváření flexibilních a adaptivních rozvržení.
• Testujte na více zařízeních: Testujte svou aplikaci na různých zařízeních s různými velikostmi a orientacemi obrazovky, abyste zajistili její správnou funkci.
• Zvažte přístupnost: Zajistěte, aby vaše aplikace zůstala přístupná uživatelům s postižením i po otočení obrazovky.
• Poskytněte jasné vizuální vodítka: Pokud se UI při otočení obrazovky výrazně změní, poskytněte jasné vizuální vodítka, která uživatelům pomohou porozumět změnám.
• Vyhněte se vynucení konkrétní orientace (pokud to není nutné): Umožněte uživatelům používat zařízení v jejich preferované orientaci, kdykoli je to možné. Vynucení orientace může být frustrující a nepohodlné. Orientaci zamkněte pouze v případě, že je to klíčové pro funkčnost aplikace (např. hra, která vyžaduje režim na šířku). Pokud orientaci zamknete, jasně sdělte uživateli důvod.
• Optimalizujte pro výkon: Minimalizujte množství práce, která musí být provedena při otočení obrazovky, abyste se vyhnuli problémům s výkonem.
• Používejte relativní jednotky: Při definování velikostí a pozic ve vašem rozvržení používejte relativní jednotky (např. procenta, `dp`, `sp`) místo absolutních jednotek (např. pixely), abyste zajistili správné škálování vašeho UI na různých velikostech obrazovky.
• Využívejte existující knihovny a frameworky: Využijte existující knihovny a frameworky, které poskytují podporu pro responzivní design a zpracování orientace obrazovky.

Zámek orientace a uživatelský zážitek

Ačkoli je obecně nejlepší umožnit uživatelům volně otáčet svá zařízení, existují situace, kdy můžete chtít orientaci obrazovky zamknout. Například celoobrazovkový videopřehrávač může zamknout orientaci na režim na šířku pro optimální sledování.

Je však důležité používat zámek orientace střídmě a poskytnout uživateli jasný důvod. Vynucení orientace může být frustrující a může vaši aplikaci učinit méně přístupnou.

Jak zamknout orientaci obrazovky

Android

Orientaci obrazovky v Androidu můžete zamknout nastavením atributu `screenOrientation` v souboru `AndroidManifest.xml`:

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

Orientaci můžete také zamknout programově:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

V iOS můžete specifikovat podporované orientace v souboru `Info.plist`. Můžete také přepsat metodu `supportedInterfaceOrientations` ve vašem view controlleru:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globální aspekty

Při navrhování pro globální publikum mějte na paměti následující ohledně orientace obrazovky:

• Rozvržení zprava doleva (RTL): Zvažte, jak se vaše UI přizpůsobí jazykům RTL. Některé jazyky, jako je arabština a hebrejština, se píší zprava doleva. Zajistěte, aby se vaše rozvržení v režimu RTL správně zrcadlilo. Auto Layout a ConstraintLayout často poskytují vestavěnou podporu pro RTL rozvržení.
• Kulturní preference: Buďte si vědomi kulturních preferencí souvisejících s používáním zařízení. Zatímco většina uživatelů je zvyklá na režimy na výšku i na šířku, některé kultury mohou mít jemné preference. Testování s uživateli z různých regionů může poskytnout cenné poznatky.
• Přístupnost pro různé uživatele: Vždy upřednostňujte přístupnost. Zajistěte, aby vaše aplikace byla použitelná pro lidi s postižením, bez ohledu na orientaci obrazovky. To zahrnuje poskytování alternativního textu pro obrázky, zajištění dostatečného barevného kontrastu a podporu asistenčních technologií.

Testování zpracování orientace obrazovky

Důkladné testování je nezbytné pro zajištění, že vaše aplikace správně zpracovává změny orientace obrazovky. Zde je několik tipů pro testování:

• Používejte emulátory a reálná zařízení: Testujte svou aplikaci na emulátorech i na reálných zařízeních, abyste pokryli širší škálu velikostí obrazovek a hardwarových konfigurací.
• Testujte v různých orientacích: Testujte svou aplikaci v orientaci na výšku i na šířku, a také v obrácené orientaci na výšku a na šířku, pokud jsou podporovány.
• Testujte s různými velikostmi obrazovky: Testujte svou aplikaci na zařízeních s různými velikostmi obrazovky, abyste zajistili správné škálování UI.
• Testujte s různými velikostmi písma: Testujte svou aplikaci s různými velikostmi písma, abyste zajistili, že text zůstane čitelný.
• Testujte s povolenými funkcemi přístupnosti: Testujte svou aplikaci s povolenými funkcemi přístupnosti, jako jsou čtečky obrazovky, abyste zajistili, že zůstane přístupná uživatelům s postižením.
• Automatizované testování: Implementujte automatizované UI testy, které pokrývají změny orientace obrazovky. To může pomoci odhalit regrese a zajistit konzistentní chování napříč verzemi.

Závěr

Efektivní zpracování orientace obrazovky je klíčovým aspektem mobilního a webového vývoje. Porozuměním různým technikám dostupným na každé platformě a dodržováním osvědčených postupů můžete vytvářet aplikace, které poskytují plynulý a příjemný uživatelský zážitek bez ohledu na to, jak uživatel drží své zařízení. Nezapomeňte upřednostňovat testování a zvažovat globální dopady vašich designových rozhodnutí, abyste zajistili, že vaše aplikace bude přístupná a uživatelsky přívětivá pro různorodé publikum.