Флэш Потрошитель этот | тот | 1.0

Адаптация мобильных приложений для разной плотности пикселей (pixel density)

Мобильные устройства обладают широким спектором форм-факторов, от телефонов с маленькими экранами до больших планшетов. Простые вариации размера экрана и пропорций могут быть легко обработаны стандартными компонентами динамического макетирования, такими как Group, VGroup и HGroup, они идут с Flex. Тем не менее, устройства могут иметь разную плотность пикселей — а именно кол-во пикселей на дюйм экранной площади. Например, большинство планшетов и некоторые телефоны имеют плотность 160 точек на дюйм (DPI), в то время как другие телефоны имеют плотность 240 или 320 DPI. Вариации плотности пикселей влияют на визуальный размер индивидуальных элементов интерфейса пользователя: при прочих равных, элементы управления с данным размером в пикселях появятся физически меньшими на устройствах с более высокой плотностью пикселей. Это особенно проблематично для сенсорных интерфейсов, где элементы управления должны быть физически достаточно большими для попадания пальцем.

Flex 4.5 дает несколько новых возможностей, чтобы помочь разработчикам сделать их приложения выглядящими и работающими хорошо на с разной плотности пикселей.

Автоматическое масштабирование. Разработчики могут по своему желанию указывать целевую плотность в DPI для своих приложений в свойстве приложения applicationDPI. Когда оно указано явно, разработчик должен настроить скины и макет приложения так, как они будут выглядеть на реальном устройстве с данным DPI. Во время выполнения на устройстве с DPI, отличным от указанного DPI, Flex будет автоматически масштабировать все приложение, чтобы сохранить приблизительный физический размер приложения и его элементов управления. Например, если приложение нацелено на использование на экране со 160 DPI, оно автоматически увеличится в полтора раза на устройстве с 240 DPI. Если не указывать это свойство, то нужно будет убедиться, что ваши скины и макеты адаптируются правильно к разным плотностям пикселей во время выполнения.

Заметим, что если вы используете автоматическое масштабирование, мы рекомендуем установить applicationDPI до самого низкого DPI, которое вы собираетесь поддерживать, и позволить приложению увеличиваться на устройствах с более высоким DPI, потому что векторные скины будут выглядеть лучше и точнее при увеличении масштаба, а не при уменьшении. Для растровых изображений вам необходимо воспользоваться описанной ниже поддержкой растров с множественным DPI (multi-DPI bitmap).

Учитывающие DPI мобильные скины. Встроенные скины в мобильной теме Flex 4.5 автоматически адаптируются к различным DPI. Если вы используете автоматическое масштабирование, встроенные скины автоматически сконфигурирутся под указанный вами applicationDPI, а затем будут масштабироваться функцией автоматического масштабирования. Если вы не используете автоматическое масштабирование, то скины будут приспосабливаться к фактическому DPI устройства, на котором выполняется приложение. Проанализировав, как работают встроенные скины, вы можете следовать использованной в них схеме при создании своих собственных скинов.

Растры с множественным DPI. Если у вас есть какие-либо растры в приложении, то вы должны предоставить несколько вариантов каждой картинки для различных DPI, чтобы избежать артефактов масштабирования. Для этого можно воспользоваться классом MultiDPIBitmapSource, который позволяет задавать различные файлы для использования на различных DPI для данного изображения. Этот класс может быть передан в качестве свойства source для компонентов, отображающих изображения, такик, как компоненты BitmapImage или Image, или как свойство icon для кнопки. Как и в случае с мобильными скинами, эти растровые изображения правильно обрабатываются фреймворком независимо от того, используете вы автоматическое масштабирование или нет, так что вы всегда будете видеть изображение соответствующего разрешения для устройства с данным DPI.

По-DPI-ные правила CSS. Flex 4.5 добавляет поддержку для CSS-синтаксиса @media, чтобы позволить вам указывать CSS-правила, работающие только для данного DPI; встроенные скины используют эту возможность для приспособления размеров шрифтов и отступов для различных DPI. Используя этот синтаксис, вы можете также указать CSS правила для разных платформ.

Работа на AIR

Наконец, важно понимать, что в дополнение ко всем вышеперечисленным мобильным компонентам Flex, вы также можете непосредственно использовать все API, доступные в AIR для мобильных устройств - геолокацию, акселерометр, камеру и т.д. Хотя некоторые из этих возможностей не выражены в качестве компонентов Flex, доступ к ним легко получить непосредственно с помощью ActionScript. Более подробно о разработке с использованием API, предоставляемых AIR на мобильных устройствах, см. в документации к AIR на мобильных устройствах.

Опираясь на возможности мобильной разработки в Adobe Flex SDK 4.5, Flash Builder 4.5 расширяет существующие рабочие процессы ActionScript- и Flex- разработки до разработки под мобильные устройства, от создания проекта до упаковки релизной версии.

Управление мобильными проектами

Flash Builder 4.5 предоставляет два новых типа проектов: ActionScript Mobile Project и Flex Mobile Project. Создание мобильного проекта на ActionScript дает вам совершенно чистый лист, на котором вы пишете свое приложекние на чистом коде ActionScript. С другой стороны, создание мобильного проекта на Flex дает вам доступ к фреймворку Flex, в том числе к его описанным выше мобильным функциям, а также к связанным с Flex возможностям Flash Builder, таким, как режим дизайна и функционалу подключения к данным, представленным впервые во Flash Builder 4.

Как упоминалось выше, Flash Builder 4.5 поддерживает создание мобильных проектов Flex для Android, а также создание мобильных проектов ActionScript для Android и IOS. Обновления, позволяющие разрабатывать Flex-приложения под IOS, а также ActionScript- и Flex-приложения для BlackBerry PlayBook будут доступны в ближайшее время после релиза 4.5.

Если вы создаете приложения для множества разных экранов, таких, как настольные/веб приложения и приложения для мобильных, структура вашего обычного проекта будет состоять из обычного Flex- или ActionScript- проекта, содержащего интерфейс пользователя для десктопа/веба, мобильного Flex- или ActionScript- проекта, содержащего интерфейс пользователя для мобильных, и общего для этих двух приложений проекта библиотеки, содержащего код модели и доступа к данным.

Проектирование Видов

Для мобильных Flex-проектов режим дизайна расширен в двух направлениях. Первое - добавлены элементы управления на панель инструментов режима Design (см. Рисунок 3), позволяющие вам предварительно просмативать контент на экранах различных размеров и ориентаций. Вы сами можете добавить больше конфигураций устройств в меню Preferences > Flash Builder > Device Configurations.

Во-вторых, режим дизайна хорошо работает со стандартной структурой навигации, описанной выше. Когда вы редактируете Вид в проекте, основанном на классе ViewNavigatorApplication, вы видите содержимое Вида в контексте общей структуры приложения — например, вы видите Панель действий (ActionBar) над Видом, и эта панель заполнена содержимым, соответствующим этому Виду. Вы можете перетаскивать элементы управления на Панель действий, как любой другой контейнер, чтобы настроить панель действий для конкретного Вида. Рисунок 4 показывает перетаскивание кнопки на область actionContent на правой стороне Панели действий.

Режим дизайна при предвариельном просмотре также корректно отображает эффект плотности пикселей для вашего приложения. Например, если в вашем приложении значение свойства applicationDPI равно 160, и вы выбираете для предварительного просмотра устройство, настроенное на 240 DPI, режим дизайна покажет приложение в масштабе 1.5x.