بیت‌مپ تصویر دربرابر بردار تصویر

دو نوع رایج قالب تصویر، تصاویر شطرنجی و بُرداری هستند.

قالب گرافیکی شطرنجی حاوی پیکسل است: مربع‌های کوچک مجزا که حاوی رنگ هستند (که از مقادیر قرمز، سبز، آبی، و آلفا تشکیل شده‌اند). وقتی تعداد زیادی پیکسل در کنار هم قرار می‌گیرند، تصویری با جزئیات بسیار زیاد، مثل عکس، تشکیل می‌شود. گرافیک شطرنجی وضوح ثابتی دارد (تعداد پیکسل‌های ثابت). این یعنی وقتی اندازه تصویر را افزایش می‌دهید، جزئیات آن ازدست می‌رود و ممکن است پیکسل‌بندی شود. نمونه‌هایی از قالب‌های گرافیکی شطرنجی عبارت‌اند از JPEG،‏ PNG، و WEBP.

شکل ۱. نمونه فایل JPEG.

ازسوی‌دیگر، تصاویر برداری نمایش‌های ریاضی مقیاس‌پذیر از یک عنصر بصری روی صفحه هستند. بردار مجموعه‌ای از فرمان‌ها است که نحوه ترسیم تصویر روی صفحه‌نمایش را توصیف می‌کند—برای مثال، خط، نقطه، یا پر کردن. هنگام مقیاس‌بندی بردار روی صفحه‌نمایش، کیفیت آن ازبین نمی‌رود، زیرا فرمول ریاضی رابطه بین فرمان‌های مختلف را حفظ می‌کند. نمونه‌های خوب ImageVector نمادهای Material هستند، زیرا همه آن‌ها را می‌توان با فرمول‌های ریاضی تعریف کرد.

شکل ۲. نمونه برداری (پسوند فایل‌ها xml .است یا در کد Kotlin تعریف شده است).

ImageBitmap

در Compose، تصویر شطرنجی (که اغلب به آن Bitmap گفته می‌شود) را می‌توان در نمونه ImageBitmap بار کرد و BitmapPainter مسئول ترسیم نقشه بیتی روی صفحه است.

برای موارد استفاده پایه، می‌توان از painterResource() برای ایجاد ImageBitmap استفاده کرد و یک شیء Painter (در این مورد - BitmapPainter) برمی‌گرداند:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
VectorVsBitmapSnippets.kt

اگر به سفارشی‌سازی بیشتری نیاز دارید (برای مثال، پیاده‌سازی نقاش سفارشی) و باید به خود ImageBitmap دسترسی داشته باشید، می‌توانید آن را به روش زیر بار کنید:

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
VectorVsBitmapSnippets.kt

ImageVector

VectorPainter مسئول ترسیم ImageVector در صفحه است. ImageVector از زیرمجموعه‌ای از فرمان‌های «نگاره‌سازی برداری مقیاس‌پذیر» (SVG) پشتیبانی می‌کند. همه تصاویر را نمی‌توان به‌صورت بردار نمایش داد (برای مثال، عکس‌هایی که با دوربینتان می‌گیرید نمی‌توانند به بردار تبدیل شوند).

می‌توانید ImageVector سفارشی را با وارد کردن فایل XML ترسیمی بُرداری موجود (واردشده به «استودیو Android» بااستفاده از ابزار وارد کردن) یا پیاده‌سازی کلاس و صادر کردن فرمان‌های مسیر به‌صورت دستی ایجاد کنید.

برای موارد استفاده پایه، painterResource() برای ImageVectors به همان روشی که برای کلاس ImageBitmap کار می‌کند، عمل می‌کند و یک VectorPainter را به‌عنوان نتیجه برمی‌گرداند. ‫painterResource() بار کردن VectorDrawables و BitmapDrawables را به‌ترتیب در VectorPainter و BitmapPainter مدیریت می‌کند. برای بار کردن VectorDrawable در تصویر، از این مورد استفاده کنید:

Image(
    painter = painterResource(id = R.drawable.baseline_shopping_cart_24),
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
VectorVsBitmapSnippets.kt

اگر به سفارشی‌سازی بیشتری نیاز دارید و باید به خود ImageVector دسترسی داشته باشید، می‌توانید آن را به روش زیر بار کنید:

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
VectorVsBitmapSnippets.kt