Андроид размеры для разных экранов

Pixel-perfect верстка Android макетов

Разрабатывать интерфейс Android приложений — непростая задача. Приходится учитывать разнообразие разрешений и плотностей пикселей (DPI). Под катом практические советы о верстке макетов дизайна Android приложений в Layout, который совпадает с макетом на одном устройстве а на остальных растягивается без явных нарушений дизайна: выхода шрифтов за границы; огромных пустых мест и других артефактов.

UPD: Пост спорный, но много ценных советов в комментариях

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

Большое спасибо комментаторам, за то что поправили меня и высказали свою точку зрения на правильную верстку. Если вам не нужно абсолютное совпадение макетов, резюме советов из комментариев:

• Android Design in Action: Responsive Design видео на английском как должен тянутся дизайн Android приложений
• Supporting Multiple Screens базовая информация о разных размерах экранов Android устройств, DPI и как адаптировать приложения под несколько экранов.
• Designing for Multiple Screens три прекрасных урока от Google о поддержке разных разрешений экрана и DPI, рекомендую начать с него.
• совет по масштабированию шрифтов от silentnuke

Используйте разные значения размера шрифта для разных разрешений экрана.
в values\dimens.xml text_size=16sp
в values-sw600dp\dimens.xml text_size=20sp
в values-sw720dp\dimens.xml text_size=24sp

Если нужно, присмотритесь к нашей идее в посте.

На iPhone layout задаются абсолютно и всего под два экрана iPhone 4 и iPhone 5. Рисуем два макета, пишем приложение и накладываем полупрозрачные скриншоты на макеты. Проблем нет, воля дизайнера ясна, проверить что она исполнена может сам разработчик, тестировщик или, даже, билд-сервер.

Под Android у нас две проблемы: нельзя нарисовать бесконечное число макетов и нельзя сверить бесконечное число устройств с конечным числом макетов. Дизайнеры проверяют вручную. Разработчики же часто понятия не имеют как правильно растягивать элементы и масштабировать шрифты. Количество итераций стремится к бесконечности.

Чтобы упорядочить хаос мы пришли к следующему алгоритму верстки. Макеты рисуются и верстаются под любой флагманский full-hd телефон. На остальных красиво адаптируются. Готовое приложение проверяет дизайнер на популярных моделях смартфонов. Метод работает для всех телефонов, для планшетов (>6.5 дюймов) требуются отдельные макеты и верстка.

Под рукой у меня только Nexus 4 возьмем его характеристики экрана для примера.

Макеты ненастоящего приложения-портфолио которые будем верстать (полноразмерные по клику).

Layout

Основную верстку делаем через вложенные LinearLayout. Размеры элементов и блоков в пикселях переносим с макета в weight и weightSum соответственно. Отступы верстаем FrameLayout или в нужных местах добавляем Gravity.

Для примера сверстаем ячейку списка приложений:

Дальше нам потребуется много DisplayMetrics-магии, напишем для него static helper.

1184 это высота Nexus 4 без кнопок, 768 — ширина. Эти значения используются, чтобы выяснить во сколько раз высота и ширина устройства, на котором запущено приложение, отличаются от эталонного.

ScrollView и List

Подход с weightSum не примемим к прокручивающимся элементам, их внутренний размер вдоль прокрутки ничем не ограничен. Для верстки ScrollView и List нам потребуется задать их размеры в коде (130 — высота элемента списка).

И дальше можно применять трюк с weightSum.

Картинки

Размер иконок приложений задается в коде:

Где 240 высота элемента списка, 20 высота отступа сверху и снизу.

Шрифты

Андроид не предоставляет единицу измерения пропорциональную размеру экрана. Размеры шрифтов рассчитываем на основании диагонали устройства:

Да, размеры шрифта придется задавать в коде (36 размер шрифта в пикселях на оригинальном макете).

Советы по работе с графикой

1. Используйте Nine-patch везде где возможно, где невозможно — перерисуйте дизайн.
2. Простые элементы рисуйте с помощью Shape
3. Избегайте масштабирования изображений в runtime

Nine-patch это графический ресурс содержащий в себе мета-информацию о том как он должен растягиваться. Подробнее в документации Android или на Хабре.

Nine-patch нужно нарезать под все dpi: ldpi mdpi tvdpi hdpi, xhdpi, xxhdpi. Масштабирование ресурсов во время работы приложения это плохо, а масштабирование Nine-Patch приводит к неожиданным артефактам. Ни в коем случае не задавайте в Nine-patch отступы, они оформляются отдельными элементами layout, чтобы растягиваться пропорционально контенту.

Shape

Если ресурс легко раскладывается на простые геометрические фигуры и градиенты лучше вместо нарезки использовать xml-shape. Для примера нарисуем фон рамку вокруг проекта в списке, которую мы выше нарезали как Nine-patch.

Картинки

Масштабирование графики силами Android трудоемкая и затратная по памяти операция. Картинки внутри Android обрабатываются как bitmap. Например, наш логотип в размере 500×500 со сплешскрина распакуется в bitmap размером 1мб (4 байта на пиксель), при масштабировании создается еще один bitmap, скажем в 500кб. Или 1,5мб из доступных 24мб на процесс. Мы не раз сталкивались с нехваткой памяти в богатых на графику проектах.

Поэтому картинки которые нельзя описать ни Nine-patch ни Shape я предлагаю поставлять в приложении как огромный ресурс в папке nodpi и при первом запуске масштабировать изображение до нужного размера и кешировать результат. Это позволит нам ускорить работу приложения (не считая первого запуска) и уменьшить потребление памяти.

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

P.S. советы придуманы и основа поста написаны нашим Android-гуру Лешей, огромное ему спасибо!

А как вы рекомендуете верстать макеты под Android? Сколько макетов рисует дизайнер? Как обращаетесь с графическими ресурсами?

Подписывайтесь на наш хабра-блог (кнопка справа вверху). Каждый четверг интересные статьи о мобильной разработке, маркетинге и бизнесе мобильной студии. Следующая статья (5 сентября) «C# async на iOS и Android»

Источник

Популярные разрешения экранов: основы адаптивной верстки

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

Размер экрана, разрешение и область просмотра: что это значит?

Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 1024 × 768).

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

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

Нужна помощь в определении того, удобен ли ваш сайт для просмотра на разных мобильных устройствах? Воспользуйтесь нашим сервисом →.

Отзывчивый дизайн

Невозможно разработать стиль и дизайн сайта для каждого устройства. Поэтому для адаптивной вёрстки разработчики часто:

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

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

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

/* Стили для десктопа — начало */

@media screen and (max-width: 991px) <
/* стили для больших планшетов — начало */

@media screen and (max-width: 767px) <
/* стили для средних планшетов — начало */

@media screen and (max-width: 479px) <
/* стили для телефонов — начало */

Самые популярные разрешения экрана

Зная, что при разработке веб-сайтов важно учитывать возможности разных устройств, мы составили список самых современных из них. В нём отражаются и разрешения экранов и показатели окон просмотра.

Устройства Apple

Разрешение дисплея	Viewport
iPhone
iPhone XR	828 x 1792	414 x 896
iPhone XS	1125 x 2436	375 x 812
iPhone XS Max	1242 x 2688	414 x 896
iPhone X	1125 x 2436	375 x 812
iPhone 8 Plus	1080 x 1920	414 x 736
iPhone 8	750 x 1334	375 x 667
iPhone 7 Plus	1080 x 1920	414 x 736
iPhone 7	750 x 1334	375 x 667
iPhone 6 Plus/6S Plus	1080 x 1920	414 x 736
iPhone 6/6S	750 x 1334	375 x 667
iPhone 5	640 x 1136	320 x 568
iPod
iPod Touch	640 x 1136	320 x 568
iPad
iPad Pro	2048 x 2732	1024 x 1366
iPad 3 и 4-го поколения	1536 x 2048	768 x 1024
iPad Air 1 и 2	1536 x 2048	768 x 1024
iPad Mini 2 и 3	1536 x 2048	768 x 1024
iPad Mini	768 x 1024	768 x 1024

Устройства Android

Разрешение дисплея	Viewport
Телефон
Nexus 6P	1440 x 2560	412 x 732
Nexus 5X	1080 x 1920	412 x 732
Google Pixel 3 XL	1440 x 2960	412 x 847
Google Pixel 3	1080 x 2160	412 x 824
Google Pixel 2 XL	1440 x 2560	412 x 732
Google Pixel XL	1440 x 2560	412 x 732
Google Pixel	1080 x 1920	412 x 732
Samsung Galaxy Note 9	1440 x 2960	360 x 740
Samsung Galaxy Note 5	1440 x 2560	480 x 853
LG G5	1440 x 2560	480 x 853
One Plus 3	1080 x 1920	480 x 853
Samsung Galaxy S9+	1440 x 2960	360 x 740
Samsung Galaxy S9	1440 x 2960	360 x 740
Samsung Galaxy S8+	1440 x 2960	360 x 740
Samsung Galaxy S8	1440 x 2960	360 x 740
Samsung Galaxy S7 Edge	1440 x 2560	360 x 640
Samsung Galaxy S7	1440 x 2560	360 x 640
Планшеты
Nexus 9	1536 x 2048	768 x 1024
Nexus 7 (2013)	1200 x 1920	600 x 960
Samsung Galaxy Tab 10	800 x 1280	800 x 1280
Chromebook Pixel	2560 x 1700	1280 x 850

Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже

Источник

Создание ресурсов для различных экранов

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

Основные понятия

Для обеспечения поддержки нескольких экранов важно понимать несколько терминов и концепций.

Размер экрана — объем физического пространства для отображения приложения.

Плотность экрана — количество пикселей в любой заданной области экрана. Типичная единица измерения — точка на дюйм (DPI).

Разрешение — общее количество пикселей на экране. При разработке приложений разрешение не так важно, как размер и плотность экрана.

Независимый от плотности пиксель (DP) — виртуальная единица измерения, позволяющая разрабатывать макеты независимо от плотности. Эта формула используется для преобразования точки DP в экранные пиксели:

ПКС = DP x dpi 160

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

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

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

Поддержка различных размеров и плотности экрана

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

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

Объявление поддерживаемого размера экрана

Объявление размера экрана гарантирует, что только поддерживаемые устройства смогут скачать приложение. Это достигается путем установки элемента поддержки-screens в файле AndroidManifest.xml . Этот элемент используется для указания того, какие размеры экрана поддерживаются приложением. Данный экран считается поддерживаемым, если приложение может правильно расположить макеты для заполнения экрана. С помощью этого элемента манифеста приложение не будет отображаться в Google Play для устройств, которые не соответствуют спецификациям экрана. Однако приложение по-прежнему будет работать на устройствах с неподдерживаемыми экранами, но макеты могут выглядеть размытыми и пикселизованным.

Поддерживаемые экранные Сиксес объявляются в файле задающий свойства/AndroidManifest.xml решения:

Измените AndroidManifest.xml , чтобы включить поддержку экранов:

Предоставление альтернативных макетов для различных размеров экрана

Альтернативные макеты позволяют настроить представление для размера экрана спеЦифк, изменяя положение или размер элементов пользовательского интерфейса компонента.

Начиная с уровня API 13 (Android 3,2), размеры экранов не рекомендуются в пользу использования квалификатора SWNDP. Этот новый квалификатор объявляет объем пространства, необходимого для данного макета. Рекомендуется, чтобы приложения, предназначенные для работы на Android 3,2 или более поздней версии, использовали эти более новые квалификаторы.

Например, если для макета требуется минимальная 700-я точка в ширину экрана, альтернативный макет будет находиться в макете папки — sw700dp:

Ниже приведены некоторые значения для различных устройств.

Стандартный телефон — 320 DP: обычный телефон

Устройство с 5 «планшетом или» анимацией — 480 DP: например, Примечание Samsung.

7 «Планшет — 600 DP: например, Барнса благородные Нук

10 «Планшет — 720 DP: например, ксум Motorola

Для приложений, предназначенных для уровней API до 12 (Android 3,1), макеты должны находиться в каталогах, использующих квалификаторы малого обычного размера ксларже , как обобщения различных размеров экрана, доступных на большинстве устройств. Например, на рисунке ниже приведены дополнительные ресурсы для четырех различных размеров экрана:

Ниже приведено сравнение того, как более старые квалификаторы размера экрана, предшествующие API уровня 13, сравниваются с пикселями, не зависящими от плотности.

426 DP x 320 DP невелика

470 DP x 320 DP является нормальной

640 DP x 480 DP большие

960 DP x 720 DP — ксларже

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

Укажите разные точечные рисунки для различной плотности экрана

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

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

Сравните это с макетом, который предназначен для ресурсов, зависящих от плотности:

Создание ресурсов с различной плотностью с помощью Android Asset Studio

Создание этих растровых изображений различной плотности может быть немного утомительным. Таким образом, Google создал интерактивную служебную программу, которая может сократить некоторые долгой, связанные с созданием этих точечных рисунков под названием Android Asset Studio.

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

Советы для нескольких экранов

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

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

Использование DP, а не пикселей в пикселях, становится проблематичным при изменении плотности экрана. Не жестко кодировать значения пикселей. Старайтесь не использовать пикселов в качестве точки распространения (не зависящих от плотности).

Старайтесь неабсолутелайаут,где это возможно . это не рекомендуется на уровне API 3 (Android 1,5) и приведет к нестабильнымм макетов. Его не следует использовать. Вместо этого попробуйте использовать более гибкие графические элементы макета, такие как элемент LinearLayout, RelativeLayoutили новое значение GridLayout.

Выберите одну ориентацию макета по умолчанию , например, вместо использования альтернативных ресурсов Layout-Land и Layout-Port, разместите ресурсы для альбомной ориентации в макете, а ресурсы для книжной ориентации — на порт макета.

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

Тестирование нескольких экранов

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

Пакет SDK для Android предоставляет некоторые обложки эмулятора, которые могут использоваться для создания AVD, которые будут реплицировать размер, плотность и разрешение множества устройств. Многие поставщики оборудования также предоставляют обложки для своих устройств.

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

Источник