пятница, 3 ноября 2017 г.

Отображение SVG изображения в Android приложении

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


У этого формата много достоинств (можно прочитать в Wiki). Но используя SVG в своем проекте, вы увидите, что:
- Теперь время разработки приложения сократилось, так как не требуется нарезать большое количество изображений для различных разрешений (как минимум для пяти: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).
- К тому же вес приложения существенно уменьшается. Например, мое приложения Snowy: Контроль веса весит всего 3.3 Мб, а содержит более 50 различных иконок и изображений.

Как подготовить SVG изображения для Android-проекта?

Вы можете либо нарисовать векторные изображения в графическом редакторе, который поддерживает SVG (например, Sketch), либо скачать подходящие иконки. Но, чтобы использовать SVG в Android, файл необходимо переконвертировать в VectorDrawable.
Для этого можно воспользоваться следующим сервисом: http://inloop.github.io/svg2android/
ВАЖНО: Если у вас используются сложные фигуры, повороты, флип, то при конвертации необходимо поставить галочку “Bake transforms into path (experimental)”

Как работать с SVG в Android?

1. Все cконвертированные xml изображения помещаем в папку res/drawable.
2. В gradle файле app модуля делаем следующие изменения:
android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}
dependencies {
  compile 'com.android.support:appcompat-v7:27.0.0'
}
Поддержка VectorDrawable доступна в Android Support Library 23.2 и выше, лучше использовать последнюю доступную версию библиотеки (на момент написания статьи - 27.0.0)


3. Теперь просто отображаем наш drawable в android.support.v7.widget.AppCompatImageView (вместо ImageView), не забывая добавлять в корне макета xmlns:app="http://schemas.android.com/apk/res-auto":
<android.support.v7.widget.AppCompatImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_new_releases_24px"/>
Вы можете изменить цвет изображения с помощью свойства tint:
app:tint="@color/colorPrimary"


Все описанное успешно реализовано в моем приложение Snowy: Контроль веса. Если вам не сложно, поддержите проект добрым отзывом и положительной оценкой! Спасибо!

Комментариев нет:

Отправить комментарий