Vector Drawable: یہ کیا ہے، XML فارمیٹ اور کیسے کام کرتا ہے

Vector Drawable کیا ہے؟

Vector Drawable ایک Android وسیلہ ہے جو SVG (Scalable Vector Graphics) وضاحت پر مبنی XML فارمیٹ میں ایک ویکٹر تصویر کی نمائندگی کرتا ہے۔ Google نے اس فارمیٹ کو Android 5.0 (API 21) میں آئیکنز، السٹریشنز اور دیگر گرافیکل UI عناصر کے لیے راسٹر تصاویر کے متبادل کے طور پر متعارف کروایا تھا۔

PNG کے برخلاف، جہاں تصویر ایک مقررہ سائز کی پیکسل ارے کے طور پر محفوظ ہوتی ہے، Vector Drawable شکلوں کو ریاضی طور پر بیان کرتا ہے — نقاط کے محاصہ، بیزیے منحنیات، بھراؤں اور خاکے کے ذریعۙ۔ اس کا مطلب ہے کہ ایک واحد ویکٹر تصویر مختلف سکرین کیفیتوں (mdpi، hdpi، xhdpi، xxhdpi، xxxhdpi، nodpi) کے لیے چھہ PNG فائلوں تک کی جگہ لے سکتی ہے، جو گرافکس وسائل کی دیکھ بھال کو شدید سادہ کر دیتا ہے۔

یہ فارمیٹ صرف ستاٹک تصاویر ہی نہیں بلکہ AnimatedVectorDrawable کے ذریعۙ اینیمیشن، اور تھیم وصفات کے ذریعۙ ڈارک تھیم مطابقت اور کسٹم رنگوں کی بھی معاونت کرتا ہے۔ Android 7.0 (API 24) سے، Vector Drawable گریدینٹ بھراؤں اور پیچیدہ کلپ آپریشنز (clipPath) کی بھی معاونت کرتا ہے، جو ڈیزائن کے امکانات کو وسیع کرتا ہے۔

Vector Drawable کے اہم اجزاء

ہر Vector Drawable میں چوڑائی، اونچائی اور ویوپورٹ (ایک ورتوئل کوارڈینیٹ سِسٹم جہاں شکلیں کھینچی جاتی ہیں) کے پیرامیٹرز کے ساتھ ایک جڑ vector عنصر ہوتا ہے۔ اندر گروپ (group) اور پیتھ (path) ہیں، جہاں path ڥاورڈز کے ایک تسلسل کے ذریعۙ جیامیٹری کی وضاحت کرتا ہے: M (moveTo)، L (lineTo)، C (cubicTo)، Z (close) اور دیگر۔ ہر path اپنا fillColor اور strokeColor رکھ سکتا ہے، جو تھیم وسائل کا حوالہ دے سکتے ہیں۔

اضافی عناصر میں کٹٹنگ کے لیے clip-path، گریڈینٹ ٹرانزیشن کے لیے gradient اور android:theme وصف کے ذریعۙ ڈارک تھیم مطابقت کے وصفات شامل ہیں۔ Vector Drawable میں سارے رنگوں کو تھیم وصفات (مثال: ?attr/colorPrimary) کے حوالے کے طور پر متعین کیا جا سکتا ہے، جو وسائل کی نقل کیے بغیر تھیموں کے درمیان سوئچکرنے پر آئیکن کی ظاہری کو بدل دیتا ہے۔

Vector Drawable فارمیٹ: XML ساخت

Vector Drawable XML فائل res/drawable/ ڈائرکٹری میں رکھی جاتی ہے اور اس کا ایک جڑ عنصر ہوتا ہے۔ اندر درجہ بندی کی منظمی کے لیے نیڑیڈ عناصر اور خاکے کی وضاحت کے لیے عناصر ہو سکتے ہیں۔ ہر path میں ایک pathData وصف ہوتا ہے — SVG پیتھ فارمیٹ میں ڈرائنگ ڥاورڈز کا ایک سٹرنگ۔

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

مثال میں 24×24 ویوپورٹ میں 10 یونٹ کے ریڈیس کے ساتھ ایک دائرہ بیان کیا گیا ہے۔ fillColor پیرامیٹر ایک رنگ وسیلۙ کا حوالہ دیتا ہے، جبکہ strokeWidth اور strokeColor خاکے کی وضاحت کرتے ہیں۔ چوڑائی اور اونچائی dp میں متعین کی جاتی ہیں — یہ اضافی تبدیلوں کے بغیر مختلف پیکسل کیفیت کے سکرینوں پر درست اسکیلنگ کو یقینی بناتا ہے۔

گروپنگ اور تبدیلیں

group عنصر ایک سے زائد pathوں کو گروپ کرنے اور ان پر مشترک تبدیلیں لاگو کرنے کی اجازت دیتا ہے: گھرمائی (rotation)، منتقلی (translateX، translateY) اور پیمانے کی تبدیلی (scaleX، scaleY)۔ گروپ نیڑیڈ ھو سکتے ہیں، جو کارکردگی میں کمی کے بغیر سوؤں عناصر کے ساتھ پیچیدہ درجہ بندی بنانے کے قابل بناتا ہے۔

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

pivotX/pivotY وصف کے ساتھ گروپنگ اینیمیشن کے لیے استعمال ہوتی ہے: آپ تصویر کے ایک حصے کو دیگر عناصر سے آزاد گھوما یا سکیل کر سکتے ہیں، جو متحرک ستیٹ آئیکنز (مثال: لوڈنگ → کامیابی) بنانے کے لیے مفید ہے۔

Vector Drawable بنام راسٹر گرافکس

ویکٹر اور راسٹر گرافکس کے درمیان انتخاب کا انصھار استعمال کے معاملے پر منحصر ہے۔ Vector Drawable آئیکنز، السٹریشنز اور کم تفصیلات کے UI عناصر کے لیے موزوں ہے، جبکہ ہزاروں رنگوں کی تصویریں اور پیچیدہ تصاویر راسٹر فارمیٹوں میں رہتی ہیں۔

Android Performance Patterns (Google I/O 2016) کے مطابق، PNG آئیکنز کو Vector Drawable سے بدلنے سے بڑی تعداد میں گرافکل وسائل والے ایپلیکیشنز کے لیے APK کا حجم 40–60% کم ہو جاتا ہے۔ تاہم، سوؤں path کے ساتھ پیچیدہ ویکٹروں کو رنڈر کرتے وقت CPU لوڈ بڑھ جاتا ہے، لہذا اینیمیشن اور بار بار دوبارہ ڎightنچائی کے لیے پیش ورد کیچ شدہ راسٹر استعمال کرنے کی سفارش کی جاتی ہے۔

Vector Drawable کب چنیں

Vector Drawable انٹرفیس آئیکنز (ٹول بار، نیویگیشن، سٹیٹس)، لوگوز، سادہ السٹریشنز اور متحرک عناصر کے لیے موزوں ہے۔ یہ فارمیٹ ایک سے زائد سکرینوں کی معاونت کرتے وقت خاص فائدۙ دے تا ہے: چھ کیفیتوں کے لیے PNG بنانے کے بجائے، ایک XML فائل کافی ہے۔ یہ ڈیزائن کی دیکھ بھال کو سادہ کرتا ہے اور سائز بے میل کی غلطیوں کو ختم کرتا ہے۔ تصویروں اور فوٹو ریالسٹک گریڈینٹ تصاویر کے لیے، WebP کمپریشن کے ساتھ راسٹر فارمیٹ اب بھی استعمال ہوتے ہیں۔

Vector Drawable اینیمیشن

Android دو میکانزم کے ذریعۙ Vector Drawable اینیمیشن کی معاونت کرتا ہے: AnimatedVectorDrawable (API 21 سے دستیاب) اور AnimatedStateListDrawable۔ پہلا path کے وصفات — گھرمائی، منتقلی، رنگ تبدیلی اور شکل تبدیلی کو متحرک کرنے کی اجازت دیتا ہے۔ دوسرا هموار تبادلوں کے ساتھ مختلف حالات (دباؤ، نمایاں) کے درمیان سوئچ کرتا ہے۔

AnimatedVectorDrawable تین XML فائلوں کا استعمال کرتا ہے: ویکٹر Drawable، اینیمیشن کی وضاحت کرنے والا ObjectAnimator، اور ایک بائنڈنگ AnimatedVectorDrawable جو ہدف (گروپ یا path کا نام) کو اینیمیٹر سے منتلک کرتا ہے۔ اینیمیشن fillColor، strokeColor، rotation، translateX/Y، scaleX/Y اور یہاں تک کہ pathData — ایک شکل کو دوسری شکل میں آہستگی سے تبدیل کرنا (morphing) — تبدیل کر سکتا ہے۔

مورفنگ اینیمیشن کی مثال

ایک اینیمیشن پر غور کریں جہاں ایک پلاس آئیکن بند کرنے والے آئیکن میں تبدیل ھو جاتا ہے۔ اہم پابندی: ابتدائی اور حتمی حالت میں pathData ڥاورڈز کی تعداد مطابق ہونی چاہیے، ورنہ اینیمیشن کام نہیں کرے گی۔

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

ObjectAnimator plus_to_close 300 ملی سیکنڈ میں pathData پراپرٹی کو اصلی پلاس شکل سے بند کرنے والی شکل میں بدل دیتا ہے۔ سیسٹم خودکار طور پر SVG پیتھ ڥاورڈز کے دو سیٹوں کے درمیان محاصہ کو انٹرپولیٹ کرتا ہے۔ اس قسم کی اینیمیشن Material Design میں بٹن اور آئیکن کی حالت کے ہموار تبادلوں کے لیے وسیع پیمانے پر استعمال ہوتی ہے۔

Vector Drawable کوڈ کی مثالیں

ڈارک تھیم کی معاونت کے ساتھ ایک واپس تیر کا نشان آئیکن کے لیے ایک مکمل XML ویکٹر مثال دیکھیں۔ رنگ ایک تھیم وصف کے حوالے سے مقرر کیا جاتا ہے، جو وسائل کی نقل کیے بغیر ہلکے اور ڈارک تھیموں کے درمیان سوئچ کرتے وقت خودکار طور پر آئیکن کا رنگ بدل دیتا ہے۔

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

android:tint پیرامیٹر ?attr/colorControlNormal کی قیمت کے ساتھ خودکار طور پر سیسٹم کنٹرول رنگ — ہلکے تھیم پر گھیرا سلیٹر، ڈارک تھیم پر سفید — لاگو کرتا ہے۔ arrow نام کا گروپ AnimatedVectorDrawable کے ذریعۙ اس آئیکن کو متحرک کرنے کی اجازت دیتا ہے۔

کوڈ سے Vector Drawable لوڈ کرنا

Android میں بالواسطہ طور پر Vector Drawable لوڈ کرنے کے لیے AppCompatResources.getDrawable() کلاس یا ContextCompat.getDrawable() کا طریقہ استعمال کریں۔ جدید Jetpack Compose مناصب میں، راسٹر اور ویکٹر Drawable painterResource کے ذریعۙ لوڈ کیے جاتے ہیں، جو خودکار طور پر وسیلۙ کا فارمیٹ متعین کرتا ہے۔

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

AppCompatResources.getDrawable() استعمال کرتے وقت، AppCompat لائبریری API لیول کے مطابق خودکار طور پر صحیح drawable ورژن کا انتخاب کرتی ہے: Android 5.0 (API 21) سے پہلے کے آلات پر ایک راسٹر فال بیک استعمال ہو سکتا ہے؛ نئے آلات پر Vector Drawable استعمال ہوتا ہے۔ Jetpack Compose میں، painterResource اس مطابقت کو خودکار طور پر سنبھالتا ہے۔