Главная » Разработка для Android » Ресурсы Drawable

0

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

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

Все эти ресурсы могут быть описаны и использованы в коде программы, но в этом разделе мы будем создавать их с помощью XML.

ПРИМЕЧАНИЕ

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

Фигуры, цвета и градиенты

Android включает простые ресурсы для рисования, которые можно полностью описать в формате XML. Это касается классов ColorDrawable, ShapeDrawable и GradientDrawable. Данные  ресурсы хранятся в каталоге res/drawable и могут быть идентифицированы в коде приложения по именам файлов, записанным в нижнем регистре.

Если описывать  эти ресурсы  в формате  XML и указывать  атрибуты для них с помощью аппаратно-независимых пикселов (density-independent pixels), система сможет их плавно масштабировать. Как и в случае с вектор- ной графикой, эти ресурсы могут динамически масштабироваться, отобража- ясь корректно и без артефактов при любых размерах и разрешениях экрана, независимо от плотности пикселов. Исключение — ресурс GradientDrawable, радиус для которого должен быть указан в пикселах.

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

ColorDrawable

ColorDrawable — простейший ресурс для рисования, он позволяет указы- вать свойство изображения, основанное на единственном сплошном цвете. ColorDrawable описывается в виде XML-файлов (хранящихся в каталоге с ресурсами) с помощью тега <color>. В листинге  4.16 показан  код для ресурса, описывающего сплошной красный цвет.

Листинг 4.16. Ресурс, описывающий сплошной красный цвет

<color xmlns:android="http://schemas.android.com/apk/res/android" android:color="#FF0000"

/>

ShapeDrawable

Данный вид ресурсов позволяет описывать простые геометрические фигуры, указывая их размеры, фон и контур с помощью тега <shape>.

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

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

oval. Простой овал.

rectangle. Поддерживает также вложенный тег <corners>, с помощью которого можно создать прямоугольник с закругленными углами (ис- пользуя атрибут radius).

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

атрибуты innerRadiusRatio и/или thicknessRatio, чтобы ука- зать те же параметры  в виде значений,  пропорциональных ширине (где внутренний радиус, равный четверти ширины, будет использовать значение 4).

Используйте вложенный тег <stroke>, чтобы с помощью атрибутов

width и color задать контур для своих фигур.

Вы также можете добавить узел <padding>, чтобы задать отступ при позиционировании вашей фигуры на Холсте.

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

<solid> в сочетании  с атрибутом  color, который  описывает  сплошной цвет заливки.

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

В листинге 4.17 показан ресурс с фигурой (прямоугольником), которая имеет сплошной фон, закругленные углы, отступ от каждой грани размером

10 dp и такой же толщины контур. Результат представлен на рис. 4.3.

Рис. 4.3.

Листинг 4.17. Ресурс для рисования,  залитый  сплошным красным цветом

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<solid android:color="#f0600000"/>

<stroke android:width="10dp" android:color="#00FF00"/>

<corners android:radius="15dp" />

<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp"

/>

</shape>

GradientDrawable

GradientDrawable позволяет  создавать сложные градиентные  заливки. Каждый градиент описывает плавный переход между двумя или тремя цветами с помощью линейного/радиального алгоритма  или же используя метод развертки.

GradientDrawable описывается в виде тега <gradient>, находясь вну- три определения ресурса ShapeDrawable (см. выше).

Каждый ресурс с градиентом должен содержать как минимум по одному атрибуту startColor и endColor. Атрибут middleColor необязателен. Используя атрибут type, вы можете описать свой градиент.

linear. Стандартный тип градиента. Отображает прямой  переход от цвета startColor к цвету endColor  под углом, заданным  в атрибуте angle.

radial. Рисует круговой градиент, начиная с цвета startColor и заканчи- вая startColor, от внешнего края фигуры до ее центра. Требует атрибут gradientRadius, который указывает радиус градиентного  перехода в пикселах. Поддерживаются также необязательные атрибуты centerX и centerY, описывающие сдвиг центральной точки градиента.

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

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

В листинге 4.18 показан ресурс в формате XML, описывающий линей- ный градиент внутри прямоугольника, радиальный градиент внутри овала, а также разверточный градиент внутри  кольца. Результат можно увидеть на рис. 4.4.

Рис. 4.4.

Листинг 4.18. Описание  линейного, радиального  и разверточного градиентов

<!– Прямоугольник с линейным градиентом –>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"

android:useLevel="false">

<gradient android:startColor="#ffffff" android:endColor="#ffffff" android:centerColor="#000000" android:useLevel="false" android:type="linear" android:angle="45"

/>

</shape>

<!– Овал с радиальным градиентом –>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"

android:useLevel="false">

<gradient android:type="radial" android:startColor="#ffffff" android:endColor="#ffffff" android:centerColor="#000000" android:useLevel="false" android:gradientRadius="300"

/>

</shape>

<!– Кольцо с разверточным градиентом –>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring"

android:useLevel="false" android:innerRadiusRatio="3" android:thicknessRatio="8">

<gradient android:startColor="#ffffff" android:endColor="#ffffff" android:centerColor="#000000" android:useLevel="false" android:type="sweep"

/>

</shape>

Источник: Майер P. Android 2 : программирование приложений для планшетных компьютеров и смартфонов : [пер. с англ. ] / Рето Майер. — М. : Эксмо, 2011. — 672 с. — (Мировой компьютерный бестселлер).

По теме:

  • Комментарии