Спонсор: Microsoft
Опубликован: 27.12.2012 | Доступ: свободный | Студентов: 429 / 35 | Длительность: 09:19:00
Специальности: Программист
Лекция 10:

Проектирование для экранов, различных по размеру и разрешению

< Лекция 9 || Лекция 10: 123 || Лекция 11 >

Отображение большего количества контента

Увеличенное свободное пространство можно заполнить большим количеством контента несколькими способами. Так как WinRT-приложение будет сильно зависеть от списков, вам необходимо ознакомиться с возможностями элемента управления ListView. На следующей иллюстрации можно увидеть маленький экран, на котором располагается сетка из четырех строк и нескольких столбцов; другая иллюстрация показывает шесть строк и также некоторое количество столбцов.



Адаптация макета к экрану большого разрешения может осуществляться увеличением количества строк контента - с 4 до 6 в данном случае, - и отображением большего количества контента по горизонтали

Вы можете удивиться, почему визуальное представление элемента управления ListView выглядит как сетка. Каждая из миниатюр в коде в действительности является всего лишь одним из элементов, в то же время здесь применен стиль отображения GridLayout (макет на основе сетки). Эти параметры устанавливаются разработчиком в коде для элемента управления ListView, подробности на этом этапе не имеют значения; однако, это нужно отметить, чтобы быть в курсе происходящего.

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

Экран небольшого размера отображает два столбца текста

увеличить изображение
Экран небольшого размера отображает два столбца текста
Экран большого размера отображает три столбца текста

увеличить изображение
Экран большого размера отображает три столбца текста

Расширение области контента

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

Содержание большого экрана аналогично малому за счет масштабирования блоков контента

Управление пустым пространством

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


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

Фиксированный макет против адаптивного

Рекомендованный способ оптимизации макетов для различных разрешений экранов - использование адаптивных макетов. В то же время, из-за нехватки времени и других причин зачастую нет возможности найти более глобальное решение для разработки макетов, подходящих к экранам различных разрешений. В этом случае можно воспользоваться опцией "ScaletoFit" (Масштаб по размеру). Если эта опция включена разработчиком в элементе управленияViewBox, то размеры вашего приложения могут иметь фиксированное значение. В итоге, приложение автоматически масштабируется в соответствии с размерами экрана. Эта опция не универсальна и не подходит для всех возможных ситуаций, однако, иногда она позволяет сэкономить время при настройке макета.

Плотность пикселей

Напомним, макет приложения можно подобрать на этапе принятия решения о ширине и высоте окна приложения. Минимальная величина разрешения - 1024 х 768, рекомендуемая - 1366 х 768. Какое бы разрешение вы ни выбрали, всегда возникает вопрос о плотности пикселей. Зависимость от плотности пикселей можно показать на следующем примере: допустим, вы решили разработать макет приложения размерами 1366 х 768. Экраны многих планшетных устройств имеют такое же разрешение (11,6 дюйма - стандартный размер), но в зависимости от производителя и по другим причинам разрешение некоторых 11,6-дюймовых устройств гораздо больше. Высокое разрешение, в отличие от экранов с низким разрешением, характеризуется более четким текстом и графикой, но если конечный макет основан лишь на разрешении экрана, он может выглядеть по-разному на устройствах с одинаковыми физическими размерами экрана, что вызовет проблемы при взаимодействии пользователя с приложением.Экраны с высоким разрешением выглядят лучше, но пользовательский интерфейс может уменьшиться, что создает неудобства при использовании сенсорного взаимодействия с приложением. В другом случае, если вы решите "растянуть" макет приложения, спроектированный для более низкого разрешения, возникает другая проблема - текст и картинки могут отображаться нечетко.

В некоторой степени, это чисто теоретическая опасность, т.к. в WinRT-приложениях такая проблема не возникнет при выполнении простых правил. Процесс масштабирования в операционной системе Windows 8 и приложении для Магазина Windows выглядит следующим образом:

Стандартное масштабирование в процентах: 100%, 140% и 180%

Стандартное масштабирование в процентах: 100%, 140% и 180%

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

Для получения более подробной информации о размерах шрифта просмотрите "Знакомство с принципом нового дизайна Microsoft: Мастерством стоит гордиться" .

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

  • Используйте загрузку ресурсов и укажите высоту и ширину изображения:
    <imgsrc="projector.jpg" width=80px height=80px/>
          
  • Изображения автоматически загружаются при следующем порядке именования:
    \projector.scale-100.jpg
    \projector.scale-140.jpg
    \projector.scale-180.jpg

При этом способе "за кулисами" замена на соответствующую по размерам картинку происходит автоматически, в зависимости от плотности пикселей. Так, при разрешении экрана "по умолчанию" 1366 х 768 (135 dpi, точек на дюйм) будет использоваться картинка"projector.scale-100.jpg.". Масштаб экрана 140%, при разрешении 1920 х 1980 (190 dpi) будет использоваться картинка projector.scale-140.jpg. И масштаб 180%, при разрешении экрана 2560 x 1440 (253 dpi) - картинка projector.scale-180.jpg.

< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Максим Домшенко
Максим Домшенко
Россия, Курск, Региональный Финансово-Экономический Институт
Андрей Бобылев
Андрей Бобылев
Россия, Москва