Значки представления списка

Значки представления списка во многом похожи на значки диалогов, но они используют эффект внутренней тени, когда источник света находится над объектом. Они также предназначены для использования только в ListView . Примеры включают приложение «Настройки».

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

Таблица 1. Сводная информация о размерах значков готового представления списка для каждой из трех обобщенных плотностей экрана.

ldpi (120 точек на дюйм)
(Экран низкой плотности)
mdpi (160 т/д)
(Экран средней плотности)
hdpi (240 точек на дюйм)
(Экран высокой плотности)
xhdpi (320 точек на дюйм)
(Экран сверхвысокой плотности)
Размер значка представления списка 24 х 24 пикселей 32 х 32 пикселей 48 х 48 пикселей 64 х 64 пикселей

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

Шаблоны для создания иконок в Adobe Photoshop доступны в пакете Icon Templates Pack .

Все версии Android

Следующие рекомендации описывают, как создавать значки представления списка для всех версий платформы Android.

Структура

  • Значок представления списка обычно имеет безопасную рамку размером 1 пиксель, но можно использовать область безопасной рамки для края сглаживания круглой формы.
  • Все указанные размеры основаны на размере монтажной области 32x32 пикселей в Photoshop. Оставьте отступ в 1 пиксель вокруг ограничивающей рамки внутри шаблона.
Вид структуры значков представления списка.

Рисунок 1. Safeframe и градиент заливки для значков представления списка. Размер иконки 32x32.

Свет, эффекты и тени

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

Представление света, эффектов и теней для значков представления списка.

Рисунок 2. Свет, эффекты и тени для значков представления списка.

1. Внутренняя тень: черный | 57 % непрозрачности | угол 120° | режим наложения нормальный | расстояние 1 пиксель | размер 1 пиксель
2. Фон: черный | стандартный системный цвет
Эти значки отображаются только в представлениях списков.
Примечание. Значок представления списка находится на монтажной области 32x32 пикселей в Photoshop без безопасного кадра.

Шаг за шагом

  1. Добавьте эффекты, показанные на рисунке 2, для соответствующего фильтра.
  2. Экспортируйте значок размером 32x32 в файл PNG с включенной прозрачностью.
  3. Создайте основные фигуры, используя такой инструмент, как Adobe Illustrator.
  4. Импортируйте фигуру в такой инструмент, как Adobe Photoshop, и масштабируйте ее так, чтобы она поместилась в изображение размером 32x32 пикселей на прозрачном фоне.
,

Значки представления списка очень похожи на значки диалогов, но они используют эффект внутренней тени, когда источник света находится над объектом. Они также предназначены для использования только в ListView . Примеры включают приложение «Настройки».

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

Таблица 1. Сводная информация о размерах значков готового представления списка для каждой из трех обобщенных плотностей экрана.

ldpi (120 точек на дюйм)
(Экран низкой плотности)
mdpi (160 т/д)
(Экран средней плотности)
hdpi (240 точек на дюйм)
(Экран высокой плотности)
xhdpi (320 точек на дюйм)
(Экран сверхвысокой плотности)
Размер значка представления списка 24 х 24 пикселей 32 х 32 пикселей 48 х 48 пикселей 64 х 64 пикселей

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

Шаблоны для создания иконок в Adobe Photoshop доступны в пакете Icon Templates Pack .

Все версии Android

Следующие рекомендации описывают, как создавать значки представления списка для всех версий платформы Android.

Структура

  • Значок представления списка обычно имеет безопасную рамку размером 1 пиксель, но можно использовать область безопасной рамки для края сглаживания круглой формы.
  • Все указанные размеры основаны на размере монтажной области 32x32 пикселей в Photoshop. Оставьте отступ в 1 пиксель вокруг ограничивающей рамки внутри шаблона.
Вид структуры значков представления списка.

Рисунок 1. Safeframe и градиент заливки для значков представления списка. Размер иконки 32x32.

Свет, эффекты и тени

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

Представление света, эффектов и теней для значков представления списка.

Рисунок 2. Свет, эффекты и тени для значков представления списка.

1. Внутренняя тень: черный | 57 % непрозрачности | угол 120° | режим наложения нормальный | расстояние 1 пиксель | размер 1 пиксель
2. Фон: черный | стандартный системный цвет
Эти значки отображаются только в представлениях списков.
Примечание. Значок представления списка находится на монтажной области 32x32 пикселей в Photoshop без безопасного кадра.

Шаг за шагом

  1. Добавьте эффекты, показанные на рисунке 2, для соответствующего фильтра.
  2. Экспортируйте значок размером 32x32 в файл PNG с включенной прозрачностью.
  3. Создайте основные фигуры, используя такой инструмент, как Adobe Illustrator.
  4. Импортируйте фигуру в такой инструмент, как Adobe Photoshop, и масштабируйте ее так, чтобы она поместилась в изображение размером 32x32 пикселей на прозрачном фоне.