Практически все время мне не давал покоя один интересный вопрос: что делать с новым разрешением экрана iPhone 4, неужели заново адаптировать все приложения? На этот вопрос ответил разработчик компании Bjango, опубликовавший в своем блоге замечательную статью под названием «What to do with all those extra pixels?», которую для наших читателей я постарался перевести.

iPhone 4 предлагает значительно большее разрешение экрана по сравнению с предыдущими смартфонами, которое содержит 614400 пикселей, что в четыре раза больше 153600 точек iPhone 3GS. Новый экран имеет те же физические размеры, поэтому дополнительные пиксели могут быть использованы для отображения большего количества информации — в два раза по горизонтали и вертикали.

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

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

По сути дела, масштабирование пользовательских интерфейсов для высокодетализированного дисплея — или увеличение их размеров на существующем экране — не является новой проблемой. Интерфейсы, которые можно масштабировать, часто называют «resolution independent» (независимыми от разрешения):

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

Но какие методы существуют для достижения этой цели? И как Apple решает эту проблему в iOS?

«Резиновая» компоновка (Fluid layouts)

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

Отчасти, именно так Apple обрабатывает разницу разрешения экранов iPhone и iPad на данный момент — множество элементов пользовательского интерфейса имеют одинаковый размер пикселей, но отступы помогают им занять всю свободную площадь экрана. Строка статуса или экран блокировки является отличным примером этой техники. Она, кстати, работает благодаря тому, что плотность пикселей на квадратный дюйм (ppi) в iPhone 3GS и iPad практически одинакова — 163ppi против 132ppi.

Однако, этот подход совершенно бесполезен при двукратном увеличении плотности — с 163ppi до 326ppi — и переходе от обычного экрана к сетчатому Retina-дисплею нового смартфона. Рисунок ниже иллюстрирует, что должно произойти в случае простого растягивания мобильного приложения на экране iPhone 4.

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

Векторные элементы

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

Использование векторных изображений, как правило, требует больше ресурсов и предоставляет низкий уровень контроля за пикселями. Увеличение объема используемых ресурсов не является проблемой для настольных операционных систем, но значительно осложняют жизнь на мобильных ОС. А вот отсутствие уровня контроля является проблемой для небольших элементов, потому что увеличивая иконку всего на один пиксель вы можете потерять четкость.

«Попросту невозможно создать отличные, детализированные иконки, которые будут произвольно масштабироваться от очень больших до очень малых размеров, сохраняя при этом четкость. Малые значки представляют собой карикатуры: они преувеличивают некоторые детали и отбрасывают другие, выравнивая линии относительно пиксельной сетки. Поэтому ни одна векторная иконка большого размера не может быть качественно уменьшена.»

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

Беспроигрышный вариант

Наиболее качественный результат — и метод, который в Apple выбрали для перехода с iPhone 3GS на iPhone 4, — получается после использования изображений, построенных для каждого устройства со своим разрешением по отдельности. Конечно, на такую работу требуется потратить больше времени, но зато все будет выглядеть очень хорошо.

В Купертино выбрали двойное разрешение экрана iPhone, что делает масштабирование элементов проще (это в корне отличается от подходов Google и Microsoft).

Поэтому, на данный момент разработчикам требуется обслуживать всего три разрешения экрана:

  • 320 × 480 (iPhone / iPod touch);
  • 640 × 960 (iPhone 4);
  • 768 × 1024 / 1024 × 768 (iPad).

Весьма вероятно, что через несколько лет значения слегка изменятся в угоду использования сетчатых дисплеев:

  • 640 × 960 (iPhone / iPod touch);
  • 1536 × 2048 / 2048 × 1536 (iPad);
  • Какой-то вид десктопных устройств, работающий на iOS, которые Стиву Джобсу еще только предстоит анонсировать в будущем.

А раз существует такое малое количество поддерживаемых разрешений, можно легко построить интерфейс для каждого из них. Еще один аргумент, почему iPhone и iOS превосходят альтернативы?


Читайте также: