تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
النوعان الأكثر شيوعًا من تنسيقات الصور هما الصور النقطية والمتجهة.
يحتوي تنسيق الرسومات النقطية على وحدات بكسل، وهي مربعات فردية صغيرة تحتوي على لون (مكوّن من قيم الأحمر والأخضر والأزرق وقيمة ألفا). عند وضع الكثير من وحدات البكسل معًا، يمكن تكوين صورة مفصّلة جدًا، مثل صورة فوتوغرافية. تتضمّن رسومات
النقطية دقة ثابتة (عدد ثابت من وحدات البكسل). وهذا يعني أنّه عند زيادة حجم الصورة، تفقد الصورة بعض التفاصيل، وقد تظهر فيها وحدات البكسل. من الأمثلة على تنسيقات الرسومات النقطية JPEG وPNG وWEBP.
الشكل 1: مثال على ملف JPEG
من ناحية أخرى، فإنّ صور المتجهات هي تمثيلات رياضية قابلة للتوسيع لعنصر مرئي على الشاشة. المتّجه هو مجموعة من الأوامر التي تصف كيفية رسم الصورة على الشاشة، مثل خط أو نقطة أو تعبئة. عند تغيير حجم صورة متجهة على الشاشة، لن تفقد جودتها لأنّ الصيغة الرياضية ستحافظ على العلاقة بين الأوامر المختلفة. من الأمثلة الجيدة على ImageVector الرموز في Material، إذ يمكن تحديدها جميعًا باستخدام صيغ رياضية.
الشكل 2: مثال على الرسومات المتجهة (تكون امتدادات الملفات .xml أو يتم تحديدها في رمز Kotlin البرمجي)
ImageBitmap
في Compose، يمكن تحميل صورة نقطية (يُشار إليها غالبًا باسم Bitmap) في مثيل ImageBitmap، ويكون BitmapPainter هو المسؤول عن رسم الصورة النقطية على الشاشة.
بالنسبة إلى حالات الاستخدام البسيطة، يمكن استخدام painterResource() الذي يتولّى إنشاء ImageBitmap وعرض عنصر Painter (في هذه الحالة، BitmapPainter):
يكون VectorPainter مسؤولاً عن رسم ImageVector على الشاشة.
يتوافق ImageVector مع مجموعة فرعية من أوامر SVG. لا يمكن تمثيل جميع الصور كرسومات متجهة (على سبيل المثال، لا يمكن تحويل الصور التي تلتقطها بالكاميرا إلى رسومات متجهة).
يمكنك إنشاء ImageVector مخصّص إما عن طريق استيراد ملف XML حالي قابل للرسم المتجهي (يتم استيراده إلى "استوديو Android" باستخدام أداة الاستيراد) أو عن طريق تنفيذ الفئة وإصدار أوامر المسار يدويًا.
بالنسبة إلى حالات الاستخدام البسيطة، تعمل الطريقة نفسها التي تعمل بها painterResource() مع الفئة ImageBitmap مع ImageVectors أيضًا، حيث تعرض VectorPainter كنتيجة. تتولّى painterResource() تحميل VectorDrawables وBitmapDrawables إلى VectorPainter وBitmapPainter على التوالي. لتحميل VectorDrawable في صورة، استخدِم:
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-28 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-08-28 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["The two most common kinds of image formats are raster and vector images.\n\nA raster graphic format contains pixels: tiny individual squares that contain a\ncolor (made up of red, green, blue, and alpha values). When placing a lot of\npixels together, a very detailed image can be formed, such as a photograph. A\nraster graphic has a fixed resolution (fixed number of pixels). This means that\nwhen you increase the size of the image, it loses detail, and pixelation can\noccur. Examples of raster graphic formats are JPEG, PNG, and WEBP.\n**Figure 1**: JPEG file example\n\nVector images, on the other hand, are scalable mathematical representations of a\nvisual element on screen. A vector is a set of commands describing how to draw\nthe image on screen- for instance, a line, point, or fill. When scaling a vector\non screen, it will not lose quality as the mathematical formula will maintain\nthe relationship between the different commands. A good example of ImageVector\nare the Material [Symbols](https://fonts.google.com/icons), as they can all be defined with\nmathematical formulas.\n**Figure 2**: Vector example (file extensions are .xml or defined in Kotlin code)\n\n`ImageBitmap`\n\nIn Compose, a raster image (often referred to as a `Bitmap`) can be loaded up\ninto an `ImageBitmap` instance, and a `BitmapPainter` is what is responsible for\ndrawing the bitmap to screen.\n\nFor simple use cases, the `painterResource()` can be used which takes care of\ncreating an `ImageBitmap` and returns a `Painter` object (in this case - a\n`BitmapPainter`):\n\n\n```kotlin\nImage(\n painter = painterResource(id = R.drawable.dog),\n contentDescription = stringResource(id = R.string.dog_content_description)\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L49-L52\n```\n\n\u003cbr /\u003e\n\nIf you require further customization (for instance a [custom painter\nimplementation](/develop/ui/compose/graphics/images/custompainter)) and need access to the `ImageBitmap` itself, you can load it\nin the following way:\n\n\n```kotlin\nval imageBitmap = ImageBitmap.imageResource(R.drawable.dog)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L56-L56\n```\n\n\u003cbr /\u003e\n\n`ImageVector`\n\nA `VectorPainter` is responsible for drawing an `ImageVector` to screen.\n`ImageVector` supports a subset of SVG commands. Not all images can be\nrepresented as vectors (for example, the photos you take with your camera cannot\nbe transformed into a vector).\n\nYou can create a custom `ImageVector` either by importing an existing vector\ndrawable XML file (imported into Android Studio using the [import tool](/studio/write/vector-asset-studio#running)) or\nimplementing the class and issuing path commands manually.\n\nFor simple use cases, the same way in which `painterResource()` works for the\n`ImageBitmap` class, it also works for `ImageVectors`, returning a\n`VectorPainter` as the result. `painterResource()` handles the loading of\n`VectorDrawables` and `BitmapDrawables` into `VectorPainter` and `BitmapPainter`\nrespectively. To load a `VectorDrawable` into an image, use:\n\n\n```kotlin\nImage(\n painter = painterResource(id = R.drawable.baseline_shopping_cart_24),\n contentDescription = stringResource(id = R.string.shopping_cart_content_desc)\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L64-L67\n```\n\n\u003cbr /\u003e\n\nIf you'd require further customization and need to access to the `ImageVector`\nitself, you can load it in the following way:\n\n\n```kotlin\nval imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L71-L71\n```\n\n\u003cbr /\u003e\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Custom painter {:#custom-painter}](/develop/ui/compose/graphics/images/custompainter)\n- [Resources in Compose](/develop/ui/compose/resources)\n- [Loading images {:#loading-images}](/develop/ui/compose/graphics/images/loading)"]]
