استفاده از ‌SVG در پروژه‌های اندرویدی

استاندارد

SVG زبانی برای توصیف گرافیک ۲ بعدی و برنامه های گرافیکی در xml است ، و یکی از پرکاربردترین و محبوب‌ترین فرمت‌های مورد استفاده در دنیای وب هست . SVG کوتاه شده ترکیب Scalable Vector Graphics هست ، و همونطور که از اسمش مشخصه SVG میتونه در اندازه‌های مختلف تصویر یا فایل گرافیکی بدون مشکل عمل کنه و کیفیت تصویرمون رو پایین نیاره ( به اصطلاح تصویر رو range نکنه ) .

خب حالا چطور میتونیم از SVG و مزایای خوبش تو پروژه‌های اندرویدی استفاده کنیم ؟ در ادامه این پست یک مثال از نحوه استفاده از ‌SVG رو با هم خواهیم دید .
کاری که قراره توی این مثال انجام بدیم ساخت صفحه‌ اسپلش ( همون صفحه اولی که وقتی بعضی اپلیکیشن‌ها رو باز میکنید باهاش روبرو میشید‌) اپلیکیشن توییتر هست . که در داخل اون قراره یک تصویر با فرمت SVG که همون لوگو توییتر هست رو نمایش بدیم .نکته : SVG در ورژن‌های قبل از اندروید ۲۱ پشتیبانی نمیشه ولی Vector Asset Studio میتونه برای ورژن‌هایی که از SVG پشتیبانی نمیکنن در زمان اجرا Bitmap هایی با سایز مختلف تولید کنه .
نکته : Vector Asset Studio از نسخه ۱٫۴ به بعد به اندروید استدیو اضافه شده .

خب بریم سر پیاده‌سازی
مرحله اول  لوگو توییتر با فرمت SVG رو از سایت flatIcon دانلود میکینم .
مرحله دوم  باید فایل SVG رو از طریق Vector Asset Studio به پروژمون اضافه کنیم . برای اینکار در اندروید استدیو ، کافیه مثل عکس زیر عمل کیند . در منوی کناری روی project کلیک کنید و بعد مدل نمایش رو به Project Files تغییر بدید ، بعد به زیر فولدر res در ماژول اصلی پروژه برید و روی فولدر res برید و روی اون راست کلیک کنید . سپس روی منوی Vector Asset کلیک کنید .

Screen Shot 2016-07-08 at 12.43.43 PM

بعد از این کار دیالوگ Vector Asset Studio باز خواهد شد ، که در بالای اون به وسیله دو گزینه میتونید مشخص کنید که آیا میخواید از فایل‌های SVG پیش فرضی که Vector Asset Studio در اختیارتون میذاره استفاده کنید یا میخواید از فایل دلخواه خودتون استفاده کنید .
ما برای استفاده از لوگومون روی گزینه مربوط به Local SVG file کلیک میکنیم و آدرس فایلمون رو از طریق Image file به Vector Asset Studio میدیم .

Screen Shot 2016-07-08 at 12.53.07 PM

من برای این فایل از اندازه پیشفرض یعنی ۲۴dp استفاده کردم . همینطور بد نیست بدونید با فعال کردن Enable auto mirroring for RTL layout این امکان رو خواهید داشت که وقتی layout شما بصورت RTL هست فایل شما هم به صورت RTL در بیاد ( مثلا وقتی تصویرتون در LTR یک فلش به سمت راست باشه در حالت RTL فلشتون به سمت چپ خواهد شد‌) .
در نهایت با کلیک بر next و بعد finish فایل xml مربوط به لوگو در زیرفولدر drawable ساخته خواهد شد.
مرحله سوم در این مرحله ابتدا فایل build.gradle ماژول اصلی پروژمون رو باز میکنیم .
اگر در حال حاضر از نسخه ۲٫۰ پلاگین gradle استفاده میکنید فقط کافیه که در defultConfig کد زیر رو اضافه کنید .

و درصورتی که از نسخه ۱٫۵ پلاگین gradle استفاده میکنید کد زیر رو در فایل build.gradle جای گذاری کنید.

سپس برای صفحه اسپلش layout ای به اسم activity_splash  میسازیم، مثل کد زیر .

در کد بالا با استفاده از  srcCompat که به عنوان attribute میشه اون رو برای ImageView ست کرد ، فایل SVG مون رو در ImageView نمایش میدیم . از srcCompat در تمام کلاس‌هایی که از ImageView ارث‌ برده‌ باشند هم میشه استفاده کرد .

خب مرحله آخر حالا فقط کافیه که یک Activity  بسازیم و layout ساخته شده رو برای اون ست کنیم .

بعد از اون در داخل فایل AndroidManifest این Activity رو به عنوان اولین Activity مورد نمایش قرار میدیم .

حالا فقط باید پروژتون رو run کنید و  تمام .

Screenshot_20160709-114001

3 دیدگاه در “استفاده از ‌SVG در پروژه‌های اندرویدی

  1. نوا

    مرسی از این پست خوب.
    بعد از اینکه این موضوع در support library اضافه شد من هم استفاده کردم. منتها auto mirroring در ورژن های قبل از مارشمالو کار نمیکنه. آیا تنظیم اضافه ای برای استفاده از این امکان باید انجام داده بشه؟

    • soroushjavdan

      ممنون 🙂
      اگه از support library استفاده میکنید نباید مشکلی خاصی باشه و باید auto mirroring درست کار کنه . فقط حتما باید توی manifest کد android:supportsRtl=”true” قرار داده باشید .

پاسخ دهید

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