VectorDrawable — частина перша

Пропоную вашій увазі переклад статті "VectorDrawables – Part 1" з сайту blog.stylingandroid.com.
З обов'язку служби знадобилося мені якось розібратися з векторною графікою. Під час пошуку натрапив я на серію статей під назвою «VectorDrawable» в блозі https://blog.stylingandroid.com/. Відповідей на всі питання, що цікавлять мене питання я, звичайно, не знайшов, але статті дуже сподобалися своєю послідовністю і чітко вивіреним обсягом необхідного матеріалу. Вирішив поділитися перекладом цих статей з мешканцями хабра.
Я не перекладав назви, activity, bitmap і тому подібне, тому що вважаю, що так легше сприймати інформацію, адже розробники, в силу професії, ці слова в російській варіанті практично ніколи не споживають. Далі слід переклад:
Одна з дійсно цікавих нових фішок в Lollipop – це включення VectorDrawable і пов'язаних з ним класів, які забезпечують надзвичайно потужні нові можливості для додавання складної векторної графіки дозволяє набагато зручніше масштабувати зображення, не залежно від розмірів екрану і щільності, ніж растрові зображення), а також надає кілька потужних інструментів для анімації оних. У цій серії статей ми розглянемо деякі з переваг, які вони нам дають. Так само розглянемо, як можна отримати дійсно вражаючі результати з відносно невеликої кількості коду.
Векторна графіка – спосіб опису графічних елементів використовуючи геометричні фігури. Вони особливо добре підходять для графічних елементів, створених у додатках, таких як Adobe Illustrator або Inkscape, де прості геометричні форми можуть бути об'єднані в набагато більш складні елементи. Робота з растровою графікою, з іншого боку, визначає значення кольори для кожного пікселя і особливо добре підходить для фото. Великою перевагою використання векторної графіки (у відповідних випадках) є те, що зображення рендеряться в рантайме і розміри автоматично вираховуються в залежності від щільності пікселів. Таким чином виходить чітка картинка з плавними лініями, незалежно від можливостей пристрою. Векторні зображення, як правило, займають значно менший об'єм пам'яті, ніж їх растровий аналог. Однак, векторні зображення вимагають більше обчислювальних потужностей для відтворення, що може бути проблемою при великій кількості складних графічних елементах.
Векторна графіка в андроїді була реалізована з використанням нового класу – VectorDrawable, який був введений в Lollipop. Це означає, що для графічних елементів, які добре підходять для векторного представлення ми можемо замінити растрові зображення в папках mdpi, hdpi, xhdpi, xxhdpi, і xxxhdpi на один VectorDrawable в папці Drawable, який, з великою ймовірністю, займе навіть менше простору на диску, ніж растрове зображення для mdpi.
Щоб продемонструвати це, давайте розглянемо наступний файл svg (знайти його можна за посиланням https://code.google.com/archive/p/svg-android/downloads):
image
Цей svg-файл займає 2265 байт, якщо ми отрисуем його в bitmap з розміром 500 х 500 пікселів, і збережемо як png, тоді він займе вже 13272 байта, плюс до цього, ми повинні будемо використовувати кілька таких картинок для різний густин екрану. Але SVG – це не те ж саме, що VectorDrawable, тому ми не можемо використовувати його безпосередньо. Тим не менш, VectorDrawable підтримує деякі елементи SVG. Основні компоненти, які ми будемо використовувати з нашого SVG – це path. Давайте подивимося на вихідний код SVG:
android.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g id="max_width__x2F__height" display="ні">
<path display="inline" d="M499.001,1v498H1V1H499.001 M500.001,0H0v500h500.001V0L500.001,0 z"/>
</g>
<g id="androd">
<fill path="#9FBF3B" d="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104 c-1.563-1.074-3.805-0.543-4.993,1.199
L294.863,80.53 c-13.807-5.439-29.139-8.47-45.299-8.47 c-16.16,0-31.496,3.028-45.302,8.47 l-20.948-30.41
c-1.201-1.74-3.439-2.273-5.003-1.199 c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272
c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298"/>
<fill path="#FFFFFF" d="M203.956,129.438 c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08
c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438"/>
<fill path="#FFFFFF" d="M295.161,129.438 c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08
c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438"/>
<fill path="#9FBF3B" d="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09
c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z"/>
<fill path="#9FBF3B" d="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744
c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354 v-54.744h37.371v54.744
c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354 v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489
H140.396z"/>
<fill path="#9FBF3B" d="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09
c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z"/>
</g>
</svg>

Трохи розберемося. Деякі атрибути батьківського елемента, які визначають розмір 500х500, Є елемент (group), який визначає межі – його ми будемо ігнорувати. Є ще один елемент з id = «android». Це і є зображення логотипу, яке нам потрібно. Він складається з шести елементів, які визначають голову, праве око, ліве око, ліва рука, тіло і ноги, права рука. Атрибут «fill» визначає колір заливки (і ми можемо бачити, що всі вони зелені, за винятком очей, які залиті білим кольором), а атрибут «d» містить маршрут ліній, з яких складається елемент. Для тих, хто хоче розібратися більш детально в елементі, слід вивчити SVG Path Specification, але для даної статті це не важливо, тому що ми можемо просто взяти їх, як вони є, і використовувати в наших VectorDrawables.
Отже, давайте створимо наш VectorDrawable:
res/drawable/android.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="500"
android:viewportHeight="500"
android:width="500px"
android:height="500px">
<group android:name="android">
<path
android:name="head"
android:fillColor="#9FBF3B"
android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104 c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53 c-13.807-5.439-29.139-8.47-45.299-8.47 c-16.16,0-31.496,3.028-45.302,8.47 l-20.948-30.41 c-1.201-1.74-3.439-2.273-5.003-1.199 c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272 c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" />
<path
android:name="left_eye"
android:fillColor="#FFFFFF"
android:pathData="M203.956,129.438 c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" />
<path
android:name="right_eye"
android:fillColor="#FFFFFF"
android:pathData="M295.161,129.438 c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" />
<path
android:name="left_arm"
android:fillColor="#9FBF3B"
android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" />
<path
android:name="body"
android:fillColor="#9FBF3B"
android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354 v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354 v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" />
<path
android:name="right_arm"
android:fillColor="#9FBF3B"
android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" />
</group>
</vector>

Ми створили батьківський елемент, який містить інформацію про розміри зображення, всередину якого помістили елемент з шістьма елементами, які були трохи модифіковані, порівняно з svg – файл. У даній статті полі «name» служить тільки для полегшення розуміючи того, де який елемент. В наступних статтях вони будуть використовуватися. Отриманий файл може похвалитися скромним розміром у 2412 байт.
Тепер ми можемо використовувати цей файл як будь-який інший drawable:
res/layout/activity_vector_drawables.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".VectorDrawablesActivity">

<ImageView
android:id="@+id/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/android"
android:contentDescription="@null" />

</RelativeLayout>

… і якщо ми запустимо це, то побачимо красиву обробку:
image
Так що тепер ми можемо істотно зменшити розмір APK, якщо ми використовуємо VectorDrawable, де це доречно. Так само це дозволяє спростити розробку додатка, особливо, якщо потрібно додавати підтримку нових густин екрану. Тим не менш, це не все, на що здатний VectorDrawable. наступній частині статті ми розглянемо, як його анімувати.
Исходники до цієї частини статті можна знайти на здесь.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.