Создание изображений Android HDPI, MDPI и LDPI из одного изображения XHDPI PNG
Я еще не самый продвинутый программист Android, но я кое-что усвоил с тех пор, как начал создавать свои первые базовые приложения для этой платформы. Хотя можно добавить одно изображение png в качестве ресурса в проект Android, также можно использовать вместо него несколько версий этого же изображения. Если есть только одно изображение, оно будет использоваться независимо от размера экрана и плотности устройства Android, на котором оно работает. Система автоматически масштабирует и изменяет размеры изображений, если возникает необходимость, чтобы приложение работало на экранах разных размеров и плотностей, если не удается найти соответствующий ресурс изображения. Хотя это лучше, чем вообще не отображать изображения, это может привести ко всем видам проблем, включая изображения, которые не очень хорошо выглядят на определенных устройствах.
В руководстве разработчика Android есть большая страница посвященный изображениям, размеры экрана, плотность и все такое хорошее. Если вы хотите добавить несколько версий одного и того же изображения в свое приложение для Android, вам нужно знать, как их создавать. Хотя теоретически вы можете использовать для этой задачи любой редактор изображений или средство изменения размера, вы можете попробовать 9Patch Resizer инструмент, который был разработан именно для этой задачи и автоматизирован, так что вам не придется самостоятельно манипулировать значениями.
Таким образом, вместо того, чтобы создавать несколько версий одного и того же изображения вручную, вы просто создаете одну версию — версию xhdpi — и используете программу для получения всех других версий изображения, созданных для вас. Вы можете повторить этот процесс для всех изображений, которые вы включаете в свое приложение.
Программа доступна в виде исполняемого файла для Windows и в виде jar-файла Java для других операционных систем. Исполняемый файл отображает базовый интерфейс, в который вы можете перетащить изображение xhdpi. Когда вы это сделаете, он автоматически создаст соответствующие папки drawable-hdpi, drawable-ldpi и drawable-mdpi в том же корневом каталоге, в котором хранится изображение, чтобы вы могли сразу переместить их в папки проекта приложения Android, чтобы включить их в ваше приложение.
Смотрите так же:
- Выпущены Thunderbird 60.9.1 и 68.2.2
- Сделайте Thunderbird центром чата: добавьте протоколы чата
- Решение облачного шифрования Boxcryptor запускает функцию локального ключа
- Разработчики принимают к сведению: запущен DuckDuckHack
Что такое плотность экрана?
Плотность экрана – это характеристика устройства, которая отражает количество пикселей на физической площади экрана. В Андроиде для обозначения плотности экрана используется сокращение DPI (dots per inch).
Приложения под Андроид должны быть сверстаны так, чтобы размеры элементов выглядели одинаково на экранах с разной плотностью. Поэтому вместо px используется измерение dp (density-independent pixels) для указания размеров View и sp (scalable pixels) для размера текста.
Также существуют ресурсные квалификаторы, которые характеризуют плотность экрана: -ldpi , -mdpi , -hdpi , -xhdpi , и т.д.
Все в порядке, но.
Этот текст мало кто будет читать и мы можем написать здесь все, что угодно, например.
Вы живете в неведении. Роботы уже вторглись в нашу жизнь и быстро захватывают мир, но мы встали на светлый путь и боремся за выживание человечества. А если серьезно, то.
В целях обеспечения безопасности сайта от кибератак нам необходимо убедиться, что вы человек. Если данная страница выводится вам часто, есть вероятность, что ваш компьютер заражен или вы используете для доступа IP адрес зараженных компьютеров.
Если это ваш частный компьютер и вы пытаетесь зайти на сайт, например, из дома — мы рекомендуем вам проверить ваш компьютер на наличие вирусов.
Если вы пытаетесь зайти на сайт, например, с работы или открытых сетей — вам необходимо обратиться с системному администратору и сообщить, что о возможном заражении компьютеров в вашей сети.
- © 2005-2023, «4PDA». 4PDA® — зарегистрированный товарный знак.
Как это делается?
Дизайн мобильных приложений под Android.
Как не облажаться, если вы взялись создать дизайн приложения под Android впервые.
Мой первый опыт с дизайном под Android был не простым, я сделала много ошибок в процессе и потратила массу времени на их исправление. После этого было принято решение создать пошаговый процесс, который будет экономить время и нервы дизайнера, который столкнулся с подобной задачей впервые.
С чего начать?
Для начала нужно разобраться с размерами. Есть 4 диапазона размеров small (2–3,5″); normal (3–4″); large (4–7″); xlarge (7–10″) — эта группа относится к планшетам. А так же 4 диапазона плотности экранов ldpi (Low density, 120); mdpi (Medium density, 160); hdpi (High density, 240); xhdpi (Extra high density, 320).
Обрадую вас, рисовать все не нужно. Рисуем самые популярные размеры экранов телефонов на данный период времени: 320 х 480 px (160dpi), 480 x 800 px (240dpi), 640 x 960 px (320dpi), 720 x 1280 px (320dpi).
К сожалению, просто нарисовать красиво — мало. Вам нужно подготовить все необходимые материалы разработчику, иначе все чего не будет ему хватать, он придумает сам. И вероятность того, что вам понравятся его идеи крайне мала. Вот такой минимальный комплект вы должны подготовить вашему разработчику:
- 320 x 480 px, MDPI (160 dpi)
- 480 x 800 px, HDPI (240 dpi)
- 640 px x 960 px XHDPI (320 dpi)
- 720px x 1280 px XHDPI (320 dpi)
- Metrics
- Graphics
- Style Guide
Единицы измерения
Единицы измерения для приложений под Android особенные. 1dp = 1px при плотности экрана в 160 dpi, sp = dp. sp — используется для шрифтов, dp — для всего остального. Я поняла смысл этих новых единиц измерения когда нарисовала все и увидела вот это:
Обратите внимание, что масштаб отображения у всех макетов разный, но при этом он соответствует тому как физически мы будем видеть дизайн в телефоне. При этом шаг сетки, размеры шрифтов выглядят одинаковыми. Они такими являются в единицах измерения dp и sp, но в px они разные.
Так вот что нужно вынести из выше сказанного, 1 dp = 1 px (при 160 dpi), 1 dp = 1.5 px (при 240 dpi), 1 dp = 2 px (при 320 dpi). В примере сетка равняется 8 dp, соответственно при 160 dpi она равна 8 px, при 240 dpi — 12 px, при 320 dpi — 16 px. Что бы понимать как будет выглядеть страница в телефоне макеты нужно смотреть в масштабе 100% (при 160 dpi), 66,67% (при 240 dpi), 50% (при 320 dpi).
Material Design
Если вы пока не представляете что такое material design, то сейчас самое время. Я слышала что даже продукты google не соответствуют требованиям на 100%. Но там собраны основные принципы, которые помогут вам в понимании, как в идеале должно выглядеть и работать ваше приложение. Это особенно будет полезно, если вы как и я никогда не пользовались Android. Внимание, там все размеры указаныв dp и sp.
320 х 480 px
Я начала с этого размера, потому что плотность здесь 160 dpi, а значит 1px = 1dp. Поэтому запутаться в размерах будет сложно. А самое главное из этого размера адаптировать под все остальные экраны очень просто, почти автоматизировано, но об этом немного позже.
Начинаем с сетки. Подсматриваем в material design, что они об этом пишут. Есть основная сетка с шагом 8 dp, она для всех элементов, кроме текста. Типографика подчиняется более мелкой сетке 4 dp.
Для создания сетки я пользуюсь GuideGuide. Сейчас этот плагин для Adobe Photoshop платный, но он стоит свои 10$. Думаю можно найти бесплатные аналоги, на крайний случай отрисовать вручную.
Style Guide
Паралельно можно рисовать стайлгайд. Если вы раньше никогда их не делали, то вот тут можно посмотреть, как он выглядит у меня. Он еще не идеален, я работаю над этим.
Суть в том, что бы собрать все стилевые элементы на одну страницу. И опираться на нее при создании каждого нового макета. Что бы не было несколько оттенков одной и той же кнопки, или разницы в размере текста на один пиксель, там где ее быть не должно. И не забывайте заглядывать в Material Design при создании каждого нового элемента.
Graphics
Как я уже писала, всю графику, которая будет на сайте вам нужно будет передать разработчикам в 3-х плотностях. Я нашла удобный для себя способ подготовить эту часть материалов. Паралельно с началом работы над первым макетом я открываю Adobe Illustrator, создаю сетку в 8 dp и под каждый элемент графики создаю отдельный артборд. В итоге у меня получается вот такой вот документ:
И рекомендую сразу давать соответствующее название артборду. Все что вам останется сделать в самом конце — экспорт всех артбордов в 160, 240 и 320 dpi.
Адаптация
После того, как вы подготовите все макеты размером 320 px, начинается самое интересное. Отношение 1px (240dpi) к 1px (160dpi) = 1,5. Отношение между 480 и 320 тоже 1,5. Из этого следует, что бы создать макет 480 px с плотностью 240 dpi, вам всего лишь нужно перенести все слои из макета 320px на макет 480px, выбрать reference point location левый верхний угол и увеличить их в 1,5 раза по вертикали и горизонтали (scale 150%). Создать сетку в 8 dp, которая в данном случае равняется 12 px. И повторить эту процедуру со всеми остальными страницами вашего приложения.
Дальше идет 640 px (320 dpi). Соотношение 1px (320dpi) к 1px (160dpi) = 2. 640 к 320 тоже равняется двум. Значит мы копируем слои из макетов 320 и увеличиваем в 2 раза (scale 200%). Шаг сетки 16 px.
Макеты 720 px (320 dpi) мы делаем из 640 px (320 dpi), так как плотность одинаковая. Нам только нужно будет расширить весь дизайн на 80 px.
Metrics
Размеры шрифтов я указываю в стайлгиде. Указывать размеры нужно в единицах измерения sp. Это нужно для того, что бы если у пользователя плохое зрение и он увеличил размер шрифта в настройках системы то ваши шрифты, указанные в sp отреагируют и тоже увеличатся.
Все остальные размеры я показываю в отдельной папке, со всеми страницами одного размера (я беру 320 px). Я расставляла размеры вручную, но есть платное расширение PNG Express, стоит 29$, которое может упростить и значительно ускорить процесс.
Это все, чем на данный момент могу поделиться. Как только получим фидбэк от разработчиков и готовое приложение, возможно всплывут еще какие-то моменты, которые нужно будет внести в наш to do list. В таком случае продолжение следует.