Опанування орієнтації екрана: вичерпний посібник з обробки повороту пристрою

У сучасному світі багатьох пристроїв правильна обробка орієнтації екрана має вирішальне значення для забезпечення позитивного користувацького досвіду. Чи то смартфон, планшет, чи навіть складаний пристрій, користувачі очікують, що програми будуть плавно адаптуватися, коли вони повертають свій пристрій. Цей посібник надає всебічний огляд обробки повороту пристрою, охоплюючи різні платформи та техніки, щоб ваші програми були адаптивними та зручними для користувача.

Розуміння орієнтації екрана

Орієнтація екрана — це напрямок, у якому вміст відображається на екрані пристрою. Дві основні орієнтації:

• Портретна (Portrait): Екран вищий, ніж ширший. Це типова орієнтація для смартфонів.
• Ландшафтна (Landscape): Екран ширший, ніж вищий. Цю орієнтацію часто обирають для перегляду відео або ігор.

Деякі пристрої та програми також підтримують:

• Зворотна портретна (Reverse Portrait): Портретна орієнтація з пристроєм, повернутим на 180 градусів.
• Зворотна ландшафтна (Reverse Landscape): Ландшафтна орієнтація з пристроєм, повернутим на 180 градусів.

Навіщо обробляти зміни орієнтації екрана?

Нездатність обробляти зміни орієнтації екрана може призвести до різноманітних проблем, зокрема:

• Проблеми з макетом: Елементи можуть бути зміщені, обрізані або накладатися один на одного.
• Втрата даних: У деяких випадках стан активності або програми може бути втрачено при повороті екрана.
• Поганий користувацький досвід: Різкий або збійний досвід може розчарувати користувачів і зашкодити репутації вашої програми.
• Проблеми з продуктивністю: Часті перемальовування та розрахунки макета можуть вплинути на продуктивність, особливо на старих пристроях.

Обробка орієнтації екрана на різних платформах

Конкретні методи обробки орієнтації екрана залежать від платформи, для якої ви розробляєте. Розглянемо деякі з найпопулярніших платформ:

1. Android

Android надає кілька механізмів для обробки змін орієнтації екрана. Найпоширеніші підходи включають:

a. Зміни конфігурації

За замовчуванням Android перестворює Activity при зміні орієнтації екрана. Це означає, що метод `onCreate()` викликається знову, і весь макет перезавантажується. Хоча це може бути корисно для повної перебудови інтерфейсу користувача залежно від орієнтації, це також може бути неефективно, якщо вам потрібно лише трохи змінити макет.

Щоб запобігти перестворенню Activity, ви можете оголосити, що ваша Activity обробляє зміну конфігурації `orientation` у файлі `AndroidManifest.xml`:

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

Додаючи `orientation` та `screenSize` (важливо для API рівня 13 і вище), ви повідомляєте системі, що ваша Activity буде самостійно обробляти зміни орієнтації. Коли екран повертається, буде викликано метод `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();
 }
}

Всередині `onConfigurationChanged()` ви можете оновити інтерфейс користувача на основі нової орієнтації. Цей підхід є більш ефективним, ніж перестворення Activity, оскільки він дозволяє уникнути непотрібного завантаження ресурсів та макетів.

б. Збереження та відновлення стану Activity

Навіть якщо ви самостійно обробляєте зміну конфігурації, вам все одно може знадобитися зберегти та відновити стан Activity. Наприклад, якщо у вашій Activity є текстове поле, ви захочете зберегти текст, який користувач ввів, при повороті екрана.

Ви можете використовувати метод `onSaveInstanceState()` для збереження стану Activity та метод `onRestoreInstanceState()` для його відновлення.

@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);
}

Крім того, ви можете використовувати ViewModel із SavedStateHandle для керування та збереження даних, пов'язаних з інтерфейсом користувача, під час змін конфігурації — це більш сучасний та рекомендований підхід.

в. Альтернативні макети

Android дозволяє надавати різні файли макетів для різних орієнтацій екрана. Ви можете створити окремі файли макетів у каталогах `res/layout-land/` та `res/layout-port/`. Коли екран повертається, Android автоматично завантажить відповідний файл макета.

Цей підхід корисний, коли інтерфейс користувача має значно відрізнятися в ландшафтній та портретній орієнтаціях. Наприклад, ви можете відображати макет із двома панелями в ландшафтній орієнтації та макет з однією панеллю в портретній.

г. Використання ConstraintLayout

ConstraintLayout — це потужний менеджер макетів, який дозволяє створювати гнучкі та адаптивні макети. За допомогою ConstraintLayout ви можете визначати обмеження, які вказують, як елементи повинні розташовуватися відносно один одного та батьківського макета. Це полегшує створення макетів, які адаптуються до різних розмірів та орієнтацій екрана.

2. iOS

iOS також надає механізми для обробки змін орієнтації екрана. Ось деякі поширені підходи:

a. Auto Layout

Auto Layout — це система макетів на основі обмежень, яка дозволяє визначати правила позиціонування та розміру елементів. Обмеження Auto Layout гарантують, що ваш інтерфейс адаптується до різних розмірів та орієнтацій екрана.

При використанні Auto Layout ви зазвичай визначаєте обмеження, які вказують на зв'язки між елементами. Наприклад, ви можете обмежити кнопку так, щоб вона була центрована по горизонталі та вертикалі у своєму батьківському елементі. Коли екран повертається, рушій Auto Layout автоматично перераховує позиції та розміри елементів, щоб задовольнити обмеження.

б. Класи розмірів (Size Classes)

Класи розмірів — це спосіб класифікації розмірів та орієнтацій екрана. iOS визначає два класи розмірів: `Compact` та `Regular`. Пристрій може мати різні класи розмірів для своєї ширини та висоти. Наприклад, iPhone у портретній орієнтації має клас ширини `Compact` та клас висоти `Regular`. У ландшафтній орієнтації він часто має `Compact` висоту та `Compact` або `Regular` ширину залежно від моделі.

Ви можете використовувати класи розмірів для налаштування вашого інтерфейсу залежно від розміру та орієнтації екрана. Наприклад, ви можете відображати різний набір елементів або використовувати різні шрифти для різних класів розмірів.

Ви можете налаштовувати різні обмеження і навіть встановлювати/видаляти елементи на основі класів розмірів безпосередньо в Interface Builder або програмно.

в. Методи повороту View Controller

iOS надає кілька методів у класі UIViewController, які викликаються при повороті пристрою:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Викликається перед тим, як розмір view контролера буде змінено для переходу.
• viewWillLayoutSubviews(): Викликається безпосередньо перед тим, як view контролера розміщує свої під-елементи.
• viewDidLayoutSubviews(): Викликається одразу після того, як view контролера розмістив свої під-елементи.

Ви можете перевизначити ці методи для виконання власних налаштувань макета при повороті екрана.

г. Notification Center

Ви можете прослуховувати сповіщення про зміну орієнтації за допомогою 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. Веб-розробка (HTML, CSS, JavaScript)

У веб-розробці ви можете використовувати CSS медіа-запити та JavaScript для обробки змін орієнтації екрана.

a. CSS медіа-запити

Медіа-запити дозволяють застосовувати різні стилі залежно від розміру екрана, орієнтації та інших характеристик. Ви можете використовувати медіа-функцію `orientation` для націлювання на конкретні орієнтації.

/* Портретна орієнтація */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Ландшафтна орієнтація */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Ви можете використовувати медіа-запити для налаштування макета, шрифтів та інших стилів залежно від орієнтації.

б. JavaScript

Ви можете використовувати JavaScript для виявлення змін орієнтації екрана та виконання власних дій. API `screen.orientation` надає інформацію про поточну орієнтацію.

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

Крім того, ви можете використовувати API `matchMedia` з медіа-запитами:

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

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

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript можна використовувати для динамічного налаштування макета, завантаження різних ресурсів або виконання інших дій залежно від орієнтації.

в. Фреймворки для адаптивного дизайну

Такі фреймворки, як Bootstrap, Foundation та Materialize CSS, надають вбудовану підтримку адаптивного дизайну, що полегшує створення макетів, які адаптуються до різних розмірів та орієнтацій екрана. Ці фреймворки зазвичай використовують систему сіток та медіа-запити для створення гнучких та адаптивних інтерфейсів.

Найкращі практики для обробки орієнтації екрана

Ось деякі найкращі практики, які слід пам'ятати при обробці змін орієнтації екрана:

• Уникайте непотрібного перестворення Activity/ViewController: Якщо можливо, обробляйте зміну конфігурації самостійно, щоб уникнути накладних витрат на перестворення Activity або ViewController.
• Зберігайте та відновлюйте стан: Завжди зберігайте та відновлюйте стан Activity/ViewController, щоб запобігти втраті даних. Використовуйте ViewModel для більш надійного управління станом.
• Використовуйте Auto Layout або ConstraintLayout: Ці системи макетів полегшують створення гнучких та адаптивних макетів.
• Тестуйте на кількох пристроях: Тестуйте свою програму на різноманітних пристроях з різними розмірами та орієнтаціями екрана, щоб переконатися, що вона працює правильно.
• Враховуйте доступність: Переконайтеся, що ваша програма залишається доступною для користувачів з обмеженими можливостями при повороті екрана.
• Надавайте чіткі візуальні підказки: Якщо інтерфейс значно змінюється при повороті екрана, надавайте чіткі візуальні підказки, щоб допомогти користувачам зрозуміти зміни.
• Уникайте примусової орієнтації (якщо це не є необхідним): Дозволяйте користувачам використовувати свій пристрій у бажаній орієнтації, коли це можливо. Примусова орієнтація може дратувати та бути незручною. Блокуйте орієнтацію лише тоді, коли це є критично важливим для функціональності програми (наприклад, гра, яка вимагає ландшафтного режиму). Якщо ви блокуєте орієнтацію, чітко поясніть причину користувачеві.
• Оптимізуйте продуктивність: Мінімізуйте обсяг роботи, яку потрібно виконати при повороті екрана, щоб уникнути проблем із продуктивністю.
• Використовуйте відносні одиниці: При визначенні розмірів та позицій у вашому макеті використовуйте відносні одиниці (наприклад, відсотки, `dp`, `sp`) замість абсолютних (наприклад, пікселі), щоб ваш інтерфейс правильно масштабувався на різних розмірах екрана.
• Використовуйте існуючі бібліотеки та фреймворки: Скористайтеся перевагами існуючих бібліотек та фреймворків, які надають підтримку для адаптивного дизайну та обробки орієнтації екрана.

Блокування орієнтації та користувацький досвід

Хоча зазвичай краще дозволяти користувачам вільно повертати свої пристрої, існують ситуації, коли ви можете захотіти заблокувати орієнтацію екрана. Наприклад, повноекранний відеоплеєр може заблокувати орієнтацію в ландшафтному режимі для оптимального перегляду.

Однак важливо використовувати блокування орієнтації з обережністю та надавати користувачеві чітку причину. Примусова орієнтація може дратувати та робити вашу програму менш доступною.

Як заблокувати орієнтацію екрана

Android

Ви можете заблокувати орієнтацію екрана в Android, встановивши атрибут `screenOrientation` у файлі `AndroidManifest.xml`:

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

Ви також можете заблокувати орієнтацію програмно:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

В iOS ви можете вказати підтримувані орієнтації у файлі `Info.plist`. Ви також можете перевизначити метод `supportedInterfaceOrientations` у вашому view controller:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Глобальні аспекти

При розробці для глобальної аудиторії пам'ятайте про наступне щодо орієнтації екрана:

• Макети справа наліво (RTL): Розгляньте, як ваш інтерфейс адаптуватиметься до мов з напрямком письма справа наліво. Деякі мови, такі як арабська та іврит, пишуться справа наліво. Переконайтеся, що ваш макет правильно дзеркально відображається в режимі RTL. Auto Layout та ConstraintLayout часто надають вбудовану підтримку для RTL-макетів.
• Культурні вподобання: Будьте уважні до культурних вподобань щодо використання пристроїв. Хоча більшість користувачів звикли як до портретного, так і до ландшафтного режимів, у деяких культурах можуть бути тонкі вподобання. Тестування з користувачами з різних регіонів може надати цінні ідеї.
• Доступність для різноманітних користувачів: Завжди надавайте пріоритет доступності. Переконайтеся, що ваша програма є зручною для людей з обмеженими можливостями, незалежно від орієнтації екрана. Це включає надання альтернативного тексту для зображень, забезпечення достатнього колірного контрасту та підтримку допоміжних технологій.

Тестування обробки орієнтації екрана

Ретельне тестування є важливим для того, щоб ваша програма правильно обробляла зміни орієнтації екрана. Ось кілька порад для тестування:

• Використовуйте емулятори та реальні пристрої: Тестуйте свою програму як на емуляторах, так і на реальних пристроях, щоб охопити ширший спектр розмірів екрана та апаратних конфігурацій.
• Тестуйте в різних орієнтаціях: Тестуйте свою програму як у портретній, так і в ландшафтній орієнтаціях, а також у зворотній портретній та зворотній ландшафтній, якщо вони підтримуються.
• Тестуйте з різними розмірами екрана: Тестуйте свою програму на пристроях з різними розмірами екрана, щоб переконатися, що інтерфейс правильно масштабується.
• Тестуйте з різними розмірами шрифту: Тестуйте свою програму з різними розмірами шрифту, щоб переконатися, що текст залишається читабельним.
• Тестуйте з увімкненими функціями доступності: Тестуйте свою програму з увімкненими функціями доступності, такими як екранні читалки, щоб переконатися, що вона залишається доступною для користувачів з обмеженими можливостями.
• Автоматизоване тестування: Впроваджуйте автоматизовані UI-тести, які охоплюють зміни орієнтації екрана. Це може допомогти виявити регресії та забезпечити стабільну поведінку між релізами.

Висновок

Ефективна обробка орієнтації екрана є критичним аспектом мобільної та веб-розробки. Розуміючи різні техніки, доступні на кожній платформі, та дотримуючись найкращих практик, ви можете створювати програми, які забезпечують безперебійний та приємний користувацький досвід, незалежно від того, як користувач тримає свій пристрій. Не забувайте надавати пріоритет тестуванню та враховувати глобальні наслідки ваших дизайнерських рішень, щоб ваша програма була доступною та зручною для різноманітної аудиторії.