Подписаться на получение новых статей на почту:

SVG, VectorDrawable — управление элементами графики в Android-приложении . Шаг №82

Всем привет. Cделав обзор стандартов для ТЗ под автоматические системы и программное обеспечение в прошлой статье, приступим к написанию кода на java под Android, а именно сделаем первые шаги в разработке интерфейса системы «умный дом». Наше приложение будет иметь название Smart House, использовать программу для написания будем Android Studio.

В этой статье  мы рассмотрим формат SVG, класс VectorDrawable, используем векторное изображение в Android-приложении. Создадим «каркас» программы нашего проекта, в который будем постепенно добавлять новые функции. Здесь не будет описываться процесс установки IDE, сразу приступим к работе. Единственно я опишу, ниже, пару моментов, которые могут возникнуть при запуске эмулятора.  Ошибкой запуска может быть наименование папки пользователя кириллицей, некоторые пробуют менять название папки через реестр, хочется сказать, что процентов 70 таких действий приводит к переустановке системы. В данном случае  можно в переменных средах создать/изменить значение ANDROID_SDK_HOME , например C:\Aleksandr и обязательно перенести папку .android (по данному пути). Если образы уже созданы то поменяйте путь в .ini. Также может возникнуть ошибка при построении проекта: gradle project sync failed – это говорит о том, что необходимо добавить репозиторий Google Maven в файл build.gradle вашего проекта:

build_gradle allprojects {
   repositories {
       jcenter ()
         maven {
            url «https://maven.google.com»
} } }

svgТеперь приступим к работе. Научимся использовать масштабируемую векторную графику, а именно формат SVG, который является семейством спецификаций формата файла на основе XML для двумерной векторной графики, как статической, так и динамической. Мы с Вами уже знакомились с данным форматом и использовали его впостроении веб – интерфейса, с приемом температуры, кликабельными кнопками и выводом времени. Ниже рисунок который ссылается на WEB-интерфейс...

анимация интерфейса на SVG

Здесь мы получили доступ к элементам векторного изображения взаимодействуя с php, html и javascript. Теперь попробуем использовать данный формат (svg) в Android  приложении. Ниже рисунок, который будем выводить.

 

 

 

 

 

Рисунок_svg

Он набран в SVG–редакторе. Например рисунок для веб-интерфеса мы набирали в программе Fritzin, которая используется для виртуального моделирования электрических цепей, схем и электронного оборудования. Редакторы для svg, есть как онлайн, такие как Vectr, RollApp, BoxySVG, Janvas , . DrawSVG, SVG-edit и др. Так есть и десктопные, например типа Illustrator или Inkscape. Я остановился на последнем варианте, который удобен для создания художественных и технических иллюстраций, например использования в качестве САПР общего назначения. Программа распространяется на условиях GNU General Public License

 

SVG-изображения и их поведение определяются в текстовых файлах XML. Что означает, их можно искать, индексировать, создавать сценарии и, при Inkscape необходимости, сжимать, и производить анимацию. Его размер меньше, чем формат растрового изображения для одной и той же картинки, что помогает изменить картину на лету. SVG позволяет использовать три типа графических объектов: векторную, растровую графику и текст. Графические объекты, включая растровые изображения PNG и JPEG, могут быть сгруппированы, стилизованы, преобразованы и объединены в ранее обработанные объекты.

Реализовать кликабельность (интерактивность) изображения можно Интерактивная картанесколькими способами. Один из них это наложение, например использовать карты изображений в html, аналог которой мы использовали в интерактивной карте контроллера (статья №61). Либо наложение изображения точки hotspot поверх отображаемого реального изображения. Слева рисунок, который ссылается на интерактивную карту.

Еще один способ заключается в непосредственной работе с svg файлами с помощью библиотеки для визуализации. Просто поместите файлы SVG в папку res/raw вашего проекта, затем загрузите их как ресурсы в свою деятельность и работайте с ними как объекты android.graphics.Picture или как drawables:
SVG svg = SVGParser.getSVGFromResource (getResources (), R.raw.filename);
Picture picture = svg.getPicture ();
Drawable drawable = svg.createPictureDrawable ();
Также следует загрузить библиотеку. Файл, формата.jar, добавляем в проект, в папку libs, после чего нажимаем правой кнопкой на добавленный архив и из перечня выбираем add as a library.

svg-androiod

Библиотеки svg-android уже довольно давно не обновлялись на Github, и кажутся заброшенными, но тем не менее с ними также можно работать. Также есть возможность работать с svg через Android WebView  и интерфейса javascript для Android.

vectorpath Сама по себе система Android не поддерживает SVG-изображения, предпочитая вместо этого использовать собственный класс VectorDrawable. С выпуском Android 5.0, Google внедрил собственную поддержку векторных изображений. Существует два класса, которые поддерживают векторную графику как ресурс, который можно выделить: VectorDrawable и AnimatedVectorDrawable. Подобно формату SVG, каждый векторный рисунок определяется как древовидный (иерархический) объект, который состоит из объектов, пути и группы. Каждый путь содержит геометрию контура объекта, а группа содержит детали для преобразования. Все пути рисуются в том же порядке, что и в файле XML.

Android использует класс VectorDrawable для создания векторных изображений. Используя элементы пути и группы, мы можем определить наши векторные изображения в XML. Путь — используется для определения пути для рисования. Принимает такие атрибуты, как pathData, fillColor, fillApha и т. д. Группа -  для определения группы или подгруппы путей. Затем мы можем использовать это для применения преобразований, таких как вращение, pivotX / Y, scaleX / Y и т. д.

Т.к. синтаксис между форматами очень похож то можно перевести в другой формат. В Android Studio существует преобразование SVG в VectorDrawable. Необходимо перейти в File> New ...> Vector Asset и выбрать параметр Local SVG File. Либо использовать онлайн- инструмент конвертер Android SVG для VectorDrawable. Данный класс не поддерживает градиенты и шаблоны, поэтому изображения SVG, содержащие эти элементы, могут неправильно преобразовываться.

vector-asset
В activity_main.xml в элементе ImageView поместим ссылку на векторное изображение srcCompat="@drawable/ic_drawing"
<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="341dp"
    android:layout_weight="4"
    app:srcCompat="@drawable/ic_drawing"
    tools:layout_weight="4" />
Наша задача поменять цвета обведенных кругов по клику на кнопке, рисунок ниже.

picture

Создадим атрибут, который будет менять цвет attr.xml

<?xml version="1.0" encoding="utf-8"?>
  <resources>
     <declare-styleable name="Change">
        <attr name="ligth_off" format="color" />
     </declare-styleable>
  </resources>

Затем, в VectorDrawable, установим части, которые мы хотим динамически изменить, чтобы использовать этот атрибут: ic_drawing.xml

<path android:fillColor="?attr/ligth_off" android:pathData="..." android:strokeWidth="0.26458332"/>
<path android:fillColor="?attr/ligth_off" android:pathData="..." android:strokeWidth="0.26458332"/>

Создадим темы и зададим цвета, которые мы хотим использовать style.xml

<resources>    
  <style name="LigthOn" parent="LigthOff">        
    <item name="ligth_off">#ff6600</item>    
  </style>
  <style name="LigthOff">        
     <item name="ligth_off">#666666</item>    
  </style>
</resources>

Используем drawable в ImageView в главном классе MainActivity.java (ниже ссылка на исходники)

 public class MainActivity extends AppCompatActivity implements View.OnClickListener{
     ............       
    protected void onCreate(Bundle savedInstanceState) {     
    ..............      
       final ContextThemeWrapper wrapper = new ContextThemeWrapper(this, R.style.LigthOff);//Создает новую оболочку контекста с указанной темой.      
       changeTheme(wrapper.getTheme()); }//Возвращает объект Тема, связанный с этим контекстом

    private void changeTheme( Resources.Theme theme) {    
       final Drawable drawable =ResourcesCompat.getDrawable(getResources(),R.drawable.ic_drawing,theme);//Возвращает объект с возможностью рисования, связанный с определенным идентификатором ресурса и созданный для указанной темы.           
       imageView.setImageDrawable(drawable); }
    public void onClick( View v) {     
       final Resources.Theme theme =  getResources().newTheme();//Получение экземпляра
       theme.applyStyle(R.style.LigthOn,false);//Помещает новые значения атрибутов в тему   
       changeTheme(theme);
   }
}

Также можно получить Drawable с цветом от attr.xml с помощью ResourcesCompat.getDrawable (getResources (), R.drawable.ic, getTheme ())

Ниже результат в эмуляторе и реальном железе:

Smart_House_emul

Smart_House

Ниже исходники и файлы ресурсов:

SVG and click buttons ( Скачали: 38 чел. ) 

Сегодня мы с Вами рассмотрели один из способов работы с элементами векторной графики, преобразования SVG in XML. Написали код и разобрали его составляющие. В следующей статье напишем код, который добавит в приложение функцию обнаружения устройств wi-fi по нажатию на кнопку и вывод списка обнаруженных устройств. На этом сегодня и остановимся. Всем пока.

Просмотрено 1567 раз.

Я на Google+

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting