کار با SVG و Vector Drawables در اندروید

کار با SVG و Vector Drawables در اندروید

گاهی اوقات که توسعه دهندگان در حال توسعه و ایجاد یک برنامه اندروید هستند، یکی از مهمترین مشکلات آن ها که ممکن است به کابوسی برایشان بدل شود، resolution میباشد. این resolution ممکن است شامل تصاویری متعدد در اندازه های گوناگون باشد، که این تصاویر در اندازه های مختلف سبب افزایش سایز پروژه میشود. راه جل این کار استفاده از تصاویر گرافیک برداری مانند تصاویر SVG است. اندروید صورت مستقیم از SVG ها (Scable Vector Graphics) پشتیبانی نمی کند، اما با استفاده از کلاسی به نام Vector Drawables که در اندروید Lollipop معرفی شد، توسعه دهندگان می توانند به راحتی با استفاده از چند خط کد همین کار را انجام داد.

به صورت ساده تر، گرافیک برداری (Vector Graphic)، توصیف عناصر گرافیکی با استفاده از اشکال هندسی می باشد. این تصاویر، همچنین با برنامه هایی مانند Adobe Illustrator و Inkscape قابل ساخت هستند که تصاویر گرافیکی مورد نظر را به وجود می آورند.

 

۱- Vector Drawable

همانطور که از نام آن مشخص است، کلاس Vector Drawable براساس گرافیک برداری می باشد، که گرافیک برداری یک روش توصیف عناصر گرافیکی با استفاده از اشکال هندسی میباشد. این تصاویر گرافیکی میتوانند فایل SVG باشند. در اندروید تصایر گرافیک برداری در یک فایل XML توصیف میشوند که نیاز به ایجاد تصاویر در اندازه های مختلف  mdpi ، hdpi ، xhdpi ، xxhdpi  xxxhdpi، و غیره نمیباشد. در این کلاس، فقط نیاز به یک فایل برداری میباشد که اندازه های مختلف صفحه نمایش را پشتیبانی می کند. همچنین در نسخه های قدیمی تر اندروید، که Vector Drawables را پشتیبانی نمی کنند، با استفاده از Vector Asset Studio میتوان آن ها را به bitmap هایی در سایز های مختلف تبدیل کرد که میتوانند بر روی هر صفحه نمایشی اجرا شوند.

 

۲- ساخت یک پروژه اندروید

۱- در ابتدا نیاز داریم تا یک پروژه جدید در اندروید ایجاد کینم.

۲- فایل build.gradle را مربوط به module app را باز می کنیم و در قسمت مربوط به defaultConfig ، قطعه کد زیر را اضافه می کنیم.

که فایل build.gradle به صورت کامل مانند زیر است (برای gradle بالاتر از ۲) :

اگر که از gradle پایین تر از ۲ استفاده می کنید، این فایل به صورت زیر است :

۱-۲- ایجاد VectorDrawable با استفاده از Material Icons

در ابتدا Vector Drawables را با استفاده از Material Icons ایجاد می کنیم که Material Icons  مجموعه آیکون هایی می باشند که توسط Google بوجود آمدند که این آیکون ها open source می باشند و کار با آن ها لذت بخش و ساده می باشند و همیچنین می توان آن ها را در سیستم عامل های گوناگون مانند IOS و اندروید استفاده کرد.

۳- در سمت راست پروژه بر روی drawable راست کلیک می کنیم.

۴- از قسمت New بر روی گزینه Vector Asset کلیک می کنیم.

use vector asset in android studio

۵- در پنجره باز شده بر روی گزینه Icon کلیک می کنیم.

use vector asset in android studio

۶- در پنجره جدید باز شده، آیکن مورد نظر را انتخاب می کنیم.

use vector asset in android studio

۷- همچنین می توانید از قسمت Name ،نام آیکون را انتخاب کنید و سپس بر روی گزینه Next کلیک می کنیم.

use vector asset in android studio

۸- جال در پنجره کنونی موقعیت فایل های ذخیره شده نشان داده می شود و بر روی گزینه Finish کلیک می کنیم تا مراحل کار به پایان برسد.

۹- اکنون پوشه drawable شامل فایل جدید نیز می باشد (که برای من با نام ic_insert_emoticon_black_24dp.xml می باشد و کد آن به صورت زیر می باشد).

اندازه ارتفاع و عرض تصویر وکتور را می توان به راحتی از طریق تنظیمات width و height تنظیم کرد (به صورت پیش فرض ۲۴dp می باشد). تنظیمات مهم دیگر fillColor و pathData می باشد. fillColor شامل رنگ تصویر ما می باشد که میتواند شامل یک هش کد مثل FF000000 # می باشد و یا مسیر آن را مشخص کند. pathData شامل مسیر شکل مورد نظر است که شامل اندازه ارتفاع و عرض و رنگ شکل مورد نظر می باشد.

 

۲-۲- ایجاد VectorDrawable از طریق SVG یا PSD

تا این جا ما یک Vector Drawables از طریق Material Icons ساختیم، حال اگر بخواهیم یک Vector Drawable جدا این آیکون ها بسازیم، نیاز به فایل های SVG و یا PSD است که در ادامه این روش توضیح داده شده است و همچنین این روش دارای محدودیت هایی می باشد.

۱۰- از سمت راست پروژه، بر روی پوشه drawable راست کلیک می کنیم.

۱۱- از طریق گزینه New بر روی Vector Asset کلیک می کنیم.

۱۲- در پنجره باز شده، گزینه ( Local File (SVG, PSD را انتخاب می کنیم.

use vector asset in android studio

۱۳- از قسمت Path ، مسیر فایل SVG و یا PSD را انتخاب می کنیم.

use vector asset in android studio

۱۴- سپس بر روی گزینه OK کلیک می کنیم.

۱۵- در انتها بر روی گزینه Next و سپس Finish کلیک می کنیم.

vector asset perview

در زیر کدهای تولید شده فایل SVG قرار دارند.

 

۳- استفاده از Vector Drawable

تا این جای کار ما Vector Drawables را با موفقیت به پروژه خود اضافه کردیم، حال وقت آن است که آن ها را به کار بگیریم.

۱۶- فایل Layout برنامه (activity_main.xml) را باز کرده و کدهای xml زیر را به آن اضافه کنید. این Layout نشان می دهد که چگونه از Vector Drawables در ImageView ها و سایر View های دیگر استفاده کنیم، که در ادامه توضیح داده شده اند.

کدهای xml مربوط به Lauout بالا، طرح زیر را تولید می کنند.

ctor asset in android studio

۱-۳- استفاده از Vector Drawables در ImageView با xml

در این جا ما با یک ImageView ساده استفاده می کنیم و Vector Drawables را با استفاده از این ImageView ، از طریق فایل xml نمایش می دهیم.

همانطور که مشخص است، در این مورد به جای استفاده از android:src ، از app:srcCompat استفاده می کنیم، که با از app:srcCompat به راحتی می توان Vector Drawbles را در تمامی نسخه های اندروید نمایش داد.

 

۲-۳- استفاده از Vector Drawables در ImageView با java

در این قسمت همین کار را با استفاده از فایل java انجام می دهیم.

۱۷- یک Vector Drawable دیگر ایجاد می کنیم (با نام ic_android.xml)،  که در مراحل ۲.۱ و ۲.۲ توضیح داده شده اند.

۱۸- فایل جاوا برنامه (MainActivity.java) را باز می کنیم و کدهای زیر را در آن قرار می دهیم.

حال به توضیح کدهای بالا می پردازیم.

۱۹- برای استفاده از Vector Drawables در جاوا نیاز است تا AppCompatDelegat را به صورت static تعریف کنیم که کد آن به صورت زیر است :

۲۰- هنگامی که میخواهیم از Vector Drawable  در فایل جاوا استفاده کنیم با استفاده از AppCompatView آدرس آن را مشخص می کنیم که در این جا ما از AppCompatImageVie استفاده کرده ایم.

۲۱- در این جا ما مقداری چاشنی را اضافه کرده و از متد OnClickListener برای ImageView استفاده می کنیم تا بر روی تصویر وکتور استفاده شده رنگی Random را بگذاریم.

 

۳-۳- استفاده از VectorDrawables همراه با TextView

ممکن است که بخواهید از Vector Drawables به صورت پس زمینه و یا ترکیبی همراه با TextView استفاده کنید که به صورت زیر است :

همانطور که مشخص است با استفاده از ویژگی drawableLeft موقعیت و آدرس Vector Drawables را مشخص می کنیم.

 

۴-۳- استفاده از VectorDrawables برای سفارشی سازی RadioButton

حال می خواهیم با استفاده از Vector Drawables، یک RadioButton و یا CheckBox را شخصی سازی کنیم که اگر بار دیگر فایل مربوط به Layout را نگاهی بیندازید، برای شخصی سازی RadioGroup از AppCompatRadioButton استفاده کرده ایم و همه AppCompatRadioButton ها، از drawable/radio_selector @ برای پس زمینه استفاده می کنند.

تنها تفاوت این Selector با بقیه Selector ها این می باشد که آدرس ها به Vector Drawables اشاره می کنند، فقط باید حواستان باشد تا از android.support.v7.widget.AppCompatRadioButton استفاده کنید.

خروجی کلی برنامه به صورت زیر می باشد.

use vector asset in android studio

use vector asset in android studio

تمام 🙂

مقاله های مرتبط :

دیدگاه خود را بیان کنید :

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

۳ دیدگاه برای این مطلب ثبت شده است

  1. farshid
    ۱:۳۸ ۱۳۹۶/۰۱/۱۵

    سلام

    لطفا چندتا کتابخانه خوب از اندروید رو معرفی کنید.

    تشکر

    • امیر زنگی آبادی
      ۴:۵۴ ۱۳۹۶/۰۲/۱۱

      سلام
      بابت تاخیر در جواب کامنت پوزش می طلبم
      حتما دوست عزیز، آموزش استفاده از کتابخانه ها را نیز مد نظر قرار میدهیم.
      آیا کتابخانه خاصی مد نظر برای تدریس دارید؟
      باتشکر از همراهی گرم شما

  2. حسین
    ۱:۲۹ ۱۳۹۶/۱۲/۲۶

    عالی بود دمتون گرم کلی استفاده کردم