Эта страница переведена с помощью Cloud Translation API.

Значки вкладок

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

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

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

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

Предупреждение. Стиль значков вкладок в Android 2.0 кардинально изменился по сравнению с предыдущими версиями . Чтобы обеспечить поддержку всех версий Android , разработчикам следует:
1. Поместите значки вкладок для Android 2.0 и более поздних версий в каталоги drawable-hdpi-v5 , drawable-mdpi-v5 и drawable-ldpi-v5 .
2. Поместите значки вкладок для предыдущих версий в каталоги drawable-hdpi , drawable-mdpi и drawable-ldpi .
3. Установите android:targetSdkVersion значение 5 или выше в <uses-sdk> манифеста приложения . Это сообщит системе, что она должна отображать вкладки, используя новый стиль вкладок.

Предоставление значков для двух состояний вкладок

Значки вкладок должны иметь два состояния: невыбранное и выделенное. Чтобы предоставить значкам несколько состояний, разработчики должны создать список состояний, который можно нарисовать для каждого значка, который представляет собой XML-файл, в котором указано, какое изображение использовать для различных состояний пользовательского интерфейса.

Например, для виджета вкладок с вкладками «Друзья» и «Коллеги» вы можете использовать структуру каталогов, аналогичную приведенной ниже:

res/...
    drawable/...
        ic_tab_friends.xml
        ic_tab_coworkers.xml
    drawable-ldpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-mdpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-hdpi/...
        ...
    drawable-ldpi-v5/...
        ...
    drawable-mdpi-v5/...
        ...
    drawable-hdpi-v5/...
        ...

Содержимое перечисленных выше XML-файлов должно ссылаться на соответствующие выбранные и невыбранные объекты рисования значков. Например, ниже приведен код ic_tab_friends.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- selected state -->
    <item android:drawable="@drawable/ic_tab_friends_selected"
          android:state_selected="true"
          android:state_pressed="false" />
    <!-- unselected state (default) -->
    <item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>

Android 2.0–Android 2.3

Следующие рекомендации описывают, как создавать значки вкладок для Android 2.0–Android 2.3 (уровни API с 5 по 10).

Размер и расположение

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

На рис. 1 показаны различные способы размещения значка внутри ресурса. Размер значков должен быть меньше фактических границ ресурса .

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

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

Размеры значков вкладок для экранов высокой плотности ( `hdpi` ): Полный ресурс: 48 x 48 пикселей. Значок: 42 х 42 пикселей.
Размеры значков вкладок для экранов средней плотности ( `mdpi` ): Полный ресурс: 32 x 32 пикселей. Значок: 28 х 28 пикселей.
Размеры значков вкладок для экранов с низкой плотностью ( `ldpi` ): Полный ресурс: 24 x 24 пикселей. Значок: 22 х 22 пикселей.
	Рисунок 1. Размер и расположение значка вкладки внутри границ ресурса значка.

Стиль, цвета и эффекты

Значки вкладок плоские, матовые и изображены лицом вниз.

Значки вкладок должны иметь два состояния: выбрано и не выбрано.

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

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

1.	Цвет заливки:	`#808080`
2.	Внутреннее содержание:	Внутреннее содержимое должно вычитаться из внешней формы и состоять исключительно из прозрачных пикселей.

Рисунок 3. Стиль и эффекты для значков выбранных вкладок.

1.	Цвет заливки:	`#FFFFFF`
2.	Внутреннее содержание:	Внутреннее содержимое должно вычитаться из внешней формы и состоять исключительно из прозрачных пикселей.
3.	Внешнее свечение:	`#000000` , непрозрачность 25% размер 3 пикселя

Что можно и чего нельзя делать

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

Примеры значков

Ниже показаны стандартные значки вкладок высокой плотности, используемые на платформе Android.

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

Android 1.6 и более ранние версии

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

Структура

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

	Рисунок 3. Safeframe и градиент заливки для невыделенных значков вкладок. Размер иконки 32x32.
	Рисунок 4. Safeframe и градиент заливки для значков вкладок в выбранном состоянии. Размер иконки 32x32.

Значок невыбранной вкладки

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

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

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

1.	Передняя часть:	наложение градиента \| угол 90° цвет низа: r 223 \| г 223 \| б 223 цвет верха: р 249 \| г 249 \| б 249 нижнее расположение цвета: 0% расположение верхнего цвета: 75%
2.	Внутренняя тень:	черный \| 10 % непрозрачности \| угол 90° расстояние 2 пикселя \| размер 2 пикселя
3.	Внутренний скос:	глубина 1% \| направление вниз \| размер 0 пикселей \| угол 90° \| высота 10° выделите белый цвет, непрозрачность 70% тень черного цвета, непрозрачность 25%

Шаг за шагом

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

Значок выбранной вкладки

Значки выбранных вкладок имеют тот же градиент заливки и эффекты, что и значок меню, но без внешнего свечения.

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

1.	Передняя часть:	Используйте градиент заливки из цветовой палитры.
2.	Внутренняя тень:	черный \| 20% непрозрачности \| угол 90° \| расстояние 2 пикселя \| размер 2 пикселя
3.	Внутренний скос:	глубина 1% \| направление вниз \| размер 0 пикселей \| угол 90° \| высота 10° выделите белый цвет, непрозрачность 70% тень черного цвета, непрозрачность 25%

Цветовая палитра

Градиент заливки
1: р 163 | г 163 | б 163
2: 120 р | г 120 | б 120
Используется в качестве цветовой заливки для невыделенных значков вкладок.

Шаг за шагом

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