Мастерство ориентации экрана: полное руководство по обработке поворота устройства

В современном мире множества устройств правильная обработка ориентации экрана имеет решающее значение для обеспечения положительного пользовательского опыта. Будь то смартфон, планшет или даже складное устройство, пользователи ожидают, что приложения будут плавно адаптироваться при повороте устройства. Это руководство представляет собой всесторонний обзор обработки поворота устройства, охватывающий различные платформы и методы, которые помогут сделать ваши приложения адаптивными и удобными для пользователя.

Понимание ориентации экрана

Ориентация экрана — это направление, в котором контент отображается на экране устройства. Существуют две основные ориентации:

• Портретная: Экран выше, чем его ширина. Это типичная ориентация для смартфонов.
• Альбомная: Экран шире, чем его высота. Часто предпочитается для просмотра видео или игр.

Некоторые устройства и приложения также поддерживают:

• Обратная портретная: Портретная ориентация с поворотом устройства на 180 градусов.
• Обратная альбомная: Альбомная ориентация с поворотом устройства на 180 градусов.

Зачем обрабатывать изменения ориентации экрана?

Неспособность обрабатывать изменения ориентации экрана может привести к множеству проблем, включая:

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

Обработка ориентации экрана на разных платформах

Конкретные методы обработки ориентации экрана различаются в зависимости от платформы, для которой вы разрабатываете. Давайте рассмотрим некоторые из самых популярных платформ:

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, поскольку он позволяет избежать ненужной загрузки ресурсов и создания макета.

b. Сохранение и восстановление состояния 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);
}

В качестве альтернативы вы можете использовать ViewModels с SavedStateHandle для управления и сохранения данных, связанных с пользовательским интерфейсом, при изменениях конфигурации — это более современный и рекомендуемый подход.

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

Android позволяет предоставлять разные файлы макетов для разных ориентаций экрана. Вы можете создать отдельные файлы макетов в каталогах `res/layout-land/` и `res/layout-port/`. При повороте экрана Android автоматически загрузит соответствующий файл макета.

Этот подход полезен, когда пользовательский интерфейс должен значительно отличаться в альбомной и портретной ориентациях. Например, вы можете захотеть отобразить макет с двумя панелями в альбомной ориентации и с одной панелью в портретной.

d. Использование ConstraintLayout

ConstraintLayout — это мощный менеджер макетов, который позволяет создавать гибкие и адаптивные макеты. С помощью ConstraintLayout вы можете определять ограничения, которые указывают, как представления должны располагаться относительно друг друга и родительского макета. Это упрощает создание макетов, которые адаптируются к разным размерам и ориентациям экрана.

2. iOS

iOS также предоставляет механизмы для обработки изменений ориентации экрана. Вот некоторые распространенные подходы:

a. Auto Layout

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

При использовании Auto Layout вы обычно определяете ограничения, которые задают отношения между представлениями. Например, вы можете ограничить кнопку так, чтобы она была центрирована по горизонтали и вертикали внутри своего родительского представления. При повороте экрана движок Auto Layout автоматически пересчитывает позиции и размеры представлений для удовлетворения ограничений.

b. Классы размеров

Классы размеров (Size classes) — это способ классификации размеров и ориентаций экрана. iOS определяет два класса размеров: `Compact` и `Regular`. Устройство может иметь разные классы размеров для своей ширины и высоты. Например, iPhone в портретной ориентации имеет класс размера `Compact` по ширине и `Regular` по высоте. В альбомной ориентации он часто имеет `Compact` по высоте и `Compact` или `Regular` по ширине в зависимости от модели.

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

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

c. Методы поворота ViewController

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

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

Вы можете переопределить эти методы для выполнения пользовательских настроек макета при повороте экрана.

d. 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;
 }
}

Вы можете использовать медиа-запросы для настройки макета, шрифтов и других стилей в зависимости от ориентации.

b. 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 можно использовать для динамической настройки макета, загрузки различных ресурсов или выполнения других действий в зависимости от ориентации.

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

Фреймворки, такие как Bootstrap, Foundation и Materialize CSS, предоставляют встроенную поддержку адаптивного дизайна, что упрощает создание макетов, которые адаптируются к разным размерам и ориентациям экрана. Эти фреймворки обычно используют сеточную систему и медиа-запросы для создания гибких и адаптивных пользовательских интерфейсов.

Лучшие практики по обработке ориентации экрана

Вот некоторые лучшие практики, которые следует учитывать при обработке изменений ориентации экрана:

• Избегайте ненужного пересоздания Activity/ViewController: Если возможно, обрабатывайте изменение конфигурации самостоятельно, чтобы избежать накладных расходов на пересоздание Activity или ViewController.
• Сохраняйте и восстанавливайте состояние: Всегда сохраняйте и восстанавливайте состояние Activity/ViewController, чтобы предотвратить потерю данных. Используйте ViewModels для более надежного управления состоянием.
• Используйте 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-тесты, которые охватывают изменения ориентации экрана. Это может помочь выявить регрессии и обеспечить последовательное поведение между релизами.

Заключение

Эффективная обработка ориентации экрана является критически важным аспектом мобильной и веб-разработки. Понимая различные доступные методы на каждой платформе и следуя лучшим практикам, вы можете создавать приложения, которые обеспечивают бесшовный и приятный пользовательский опыт, независимо от того, как пользователь держит свое устройство. Не забывайте уделять приоритетное внимание тестированию и учитывать глобальные последствия ваших дизайнерских решений, чтобы ваше приложение было доступным и удобным для разнообразной аудитории.