تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تخصيص صورة

يمكن تخصيص الصور باستخدام الخصائص في Image قابلة للتركيب (contentScale وcolorFilter). يمكنك أيضًا تطبيق Modifiers الحالية لتطبيق تأثيرات مختلفة على Image. يمكن استخدام المُعدِّلات في أي عنصر قابل للتجميع، وليس فقط في العنصر القابل للتجميع Image، في حين أنّ contentScale و colorFilter هما مَعلمتان صريحتان في العنصر القابل للتجميع Image.

نطاق المحتوى

حدِّد خيار contentScale لقطع الصورة أو تغيير كيفية تصغيرها أو تكبيرها داخل حدودها. إذا لم تحدِّد خيار contentScale، سيتم تلقائيًا استخدام ContentScale.Fit.

في المثال أدناه، يقتصر حجم عنصر "صورة مركبة" على 150dp مع حدود، ويتم ضبط الخلفية على اللون الأصفر في عنصر "Image مركب" لعرض خيارات ContentScale المختلفة في الجدول أدناه.

val imageModifier = Modifier
    .size(150.dp)
    .border(BorderStroke(1.dp, Color.Black))
    .background(Color.Yellow)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Fit,
    modifier = imageModifier
)CustomizeImageSnippets.kt

سيؤدي ضبط خيارات ContentScale مختلفة إلى ظهور نتائج مختلفة. في ما يلي جدول يمكن أن يساعد في اختيار وضع ContentScale الصحيح الذي تحتاجه:

الصورة المصدر
`ContentScale`	النتيجة - صورة عمودية:	النتيجة - صورة أفقية:
`ContentScale.Fit`: تغيير حجم الصورة بشكلٍ موحّد مع الحفاظ على نسبة العرض إلى الارتفاع (الإعداد التلقائي) إذا كان المحتوى أصغر من الحجم، يتم تكبير الصورة لتلائم الحدود.
`ContentScale.Crop`: اقتصاص الصورة في منتصف المساحة المتوفّرة
`ContentScale.FillHeight`: تغيير حجم المصدر مع الحفاظ على نسبة العرض إلى الارتفاع لكي تتطابق الحدود مع ارتفاع الوجهة
`ContentScale.FillWidth`: تغيير حجم المصدر مع الحفاظ على نسبة العرض إلى الارتفاع لكي تتطابق الحدود مع عرض الوجهة
`ContentScale.FillBounds`: يمكنك تغيير حجم المحتوى عموديًا وأفقيًا بشكل غير متساوٍ لملء حدود الوجهة. (ملاحظة: سيؤدي ذلك إلى تشويه الصور في حال وضعها في حاويات لا تتطابق مع نسبة العرض إلى الارتفاع الدقيقة للصورة)
`ContentScale.Inside`: يمكنك تكبير/تصغير المصدر للحفاظ على نسبة العرض إلى الارتفاع داخل حدود الوجهة. إذا كان المصدر أصغر من الوجهة أو يساويها في كلتا السمتَين، سيعمل بالطريقة نفسها التي يعمل بها None. وسيظل المحتوى محصورًا في الحدود في جميع الأوقات. إذا كان المحتوى أصغر من الحدود، لن يتم تطبيق أيّ تكبير أو تصغير.	الصورة المصدر أكبر من الحدود: الصورة المصدر أصغر من الحدود:	الصورة المصدر أكبر من الحدود: الصورة المصدر أصغر من الحدود:
`ContentScale.None`: لا تطبِّق أيّ تغيير على حجم المصدر. إذا كان المحتوى أصغر من حدود الوجهة، لن يتم توسيعه ليلائم المنطقة.	الصورة المصدر أكبر من الحدود: الصورة المصدر أصغر من الحدود:	الصورة المصدر أكبر من الحدود: الصورة المصدر أصغر من الحدود:

قص `Image` قابل للتركيب ووضعه في شكل

لجعل حجم الصورة يناسب شكلاً، استخدِم المُعدِّل clip المضمّن. لاقتصاص صورة على شكل دائرة، استخدِم Modifier.clip(CircleShape):

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

**الشكل 1**: اقتصاص صورة باستخدام CircleShape

شكل الزاوية المستديرة: استخدِم Modifier.clip(RoundedCornerShape(16.dp)) مع حجم الزوايا التي تريد أن تكون مستديرة:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(RoundedCornerShape(16.dp))
)CustomizeImageSnippets.kt

**الشكل 2**: اقتصاص صورة باستخدام RoundedCornerShape

يمكنك أيضًا إنشاء شكل اقتصاص خاص بك من خلال تمديد Shape وتوفير Path للشكل الذي تريد اقتصاصه:

class SquashedOval : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            // We create an Oval that starts at ¼ of the width, and ends at ¾ of the width of the container.
            addOval(
                Rect(
                    left = size.width / 4f,
                    top = 0f,
                    right = size.width * 3 / 4f,
                    bottom = size.height
                )
            )
        }
        return Outline.Generic(path = path)
    }
}

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(SquashedOval())
)CustomizeImageSnippets.kt

**الشكل 3**: اقتصاص صورة باستخدام شكل مسار مخصّص

إضافة حدود إلى عنصر `Image` قابل للتجميع

من العمليات الشائعة دمج Modifier.border() مع Modifier.clip() لإنشاء حدود حول صورة:

val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, Color.Yellow),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

**الشكل 4**: اقتصاص صورة وإضافة حدود حولها

إذا كنت تريد إنشاء حدود متدرّجة، يمكنك استخدام واجهة برمجة التطبيقات Brush ل dibujar un borde degradado de arco iris alrededor de la imagen:

val rainbowColorsBrush = remember {
    Brush.sweepGradient(
        listOf(
            Color(0xFF9575CD),
            Color(0xFFBA68C8),
            Color(0xFFE57373),
            Color(0xFFFFB74D),
            Color(0xFFFFF176),
            Color(0xFFAED581),
            Color(0xFF4DD0E1),
            Color(0xFF9575CD)
        )
    )
}
val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, rainbowColorsBrush),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

حدود دائرة متدرّجة بألوان قوس قزح — **الشكل 5**: حدود دائرة متدرجة بألوان قوس قزح

ضبط نسبة عرض إلى ارتفاع مخصّصة

لتحويل صورة إلى نسبة عرض إلى ارتفاع مخصّصة، استخدِم Modifier.aspectRatio(16f/9f) لتوفير نسبة مخصّصة للصورة (أو أي عنصر قابل للتجميع).

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    modifier = Modifier.aspectRatio(16f / 9f)
)CustomizeImageSnippets.kt

استخدام Modifier.aspectRatio(16f/9f) على Image — **الشكل 6**: استخدام `Modifier.aspectRatio(16f/9f)` على الصورة

فلتر الألوان: تحويل ألوان وحدات البكسل في الصورة

تحتوي ميزة "الصورة القابلة للتركيب" على مَعلمة colorFilter يمكنها تغيير نتيجة بكسلات الصورة الفردية.

صبغ صورة

سيؤدي استخدام ColorFilter.tint(color, blendMode) إلى تطبيق وضع دمج مع اللون المحدَّد على عنصر Image. يستخدم ColorFilter.tint(color, blendMode) BlendMode.SrcIn لتظليل المحتوى، ما يعني أنّه سيتم عرض اللون المقدَّم في المكان الذي تظهر فيه الصورة على الشاشة. وهذا مفيد للرموز و الأشكال الهندسية التي يجب أن تتضمّن مظهرًا مختلفًا.

Image(
    painter = painterResource(id = R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description),
    colorFilter = ColorFilter.tint(Color.Yellow)
)CustomizeImageSnippets.kt

تم تطبيق ColorFilter.tint باستخدام BlendMode.SrcIn — **الشكل 7**: تطبيق ColorFilter.tint باستخدام BlendMode.SrcIn

تؤدي القيم الأخرى لـ BlendMode إلى تأثيرات مختلفة. على سبيل المثال، يؤدي ضبط BlendMode.Darken باستخدام Color.Green على صورة إلى النتيجة التالية:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken)
)CustomizeImageSnippets.kt

درجة اللون الأخضر مع BlendMode.Darken — **الشكل 8**: Color.Green tint مع BlendMode.Darken

اطّلِع على مستندات مرجعية حول BlendMode للحصول على مزيد من المعلومات عن أوضاع الدمج المختلفة المتاحة.

تطبيق فلتر `Image` باستخدام مصفوفة ألوان

حوِّل صورتك باستخدام خيار مصفوفة الألوان ColorFilter. على سبيل المثال، لتطبيق فلتر أبيض وأسود على صورك، يمكنك استخدام ColorMatrix وضبط التشبع على 0f.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) })
)CustomizeImageSnippets.kt

مصفوفة ألوان بتشبّع 0 (صورة بالأبيض والأسود) — **الشكل 9**: مصفوفة الألوان التي تبلغ درجة تشبعها 0 (صورة بالأبيض والأسود)

ضبط التباين أو السطوع في `Image` قابلة للتجميع

لتغيير التباين والسطوع في الصورة، يمكنك استخدام الرمز ColorMatrix لتغيير القيم:

val contrast = 2f // 0f..10f (1 should be default)
val brightness = -180f // -255f..255f (0 should be default)
val colorMatrix = floatArrayOf(
    contrast, 0f, 0f, 0f, brightness,
    0f, contrast, 0f, 0f, brightness,
    0f, 0f, contrast, 0f, brightness,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)CustomizeImageSnippets.kt

تعديل سطوع الصورة وتباينها باستخدام ColorMatrix — **الشكل 10**: سطوع الصورة وتباينها المعدَّلان باستخدام ColorMatrix

قلب ألوان عنصر `Image` مركب

لعكس ألوان صورة، اضبط ColorMatrix لعكس الألوان:

val colorMatrix = floatArrayOf(
    -1f, 0f, 0f, 0f, 255f,
    0f, -1f, 0f, 0f, 255f,
    0f, 0f, -1f, 0f, 255f,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)CustomizeImageSnippets.kt

الألوان مقلوبة في الصورة — **الشكل 11**: ألوان مقلوبة في الصورة

تمويه عنصر `Image` مركّب

لتمويه صورة، استخدِم Modifier.blur() مع إدخال radiusX وradiusY، لتحديد نصف قطر التمويه في الاتجاه الأفقي والعمودي على التوالي.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))
        )
)CustomizeImageSnippets.kt

تم تطبيق BlurEffect على الصورة — **الشكل 12**: تطبيق تأثير التمويه على الصورة

عند تمويه Images، يُنصح باستخدام BlurredEdgeTreatment(Shape) بدلاً من BlurredEdgeTreatment.Unbounded، لأنّه يتم استخدام الأخير لتمويه العروض العشوائية التي يُتوقّع أن تظهر خارج حدود المحتوى الأصلي. بالنسبة إلى الصور، من المرجّح ألا يتم عرضها خارج حدود المحتوى، في حين أنّ تمويه مستطيل بيضاوي قد يتطلّب هذا التمييز.

على سبيل المثال، إذا ضبطنا BlurredEdgeTreatment على "غير محدود" في الصورة أعلاه، ستظهر حواف الصورة مموّهة بدلاً من أن تكون حادة:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment.Unbounded
        )
        .clip(RoundedCornerShape(8.dp))
)CustomizeImageSnippets.kt

**الشكل 13**: BlurEdgeTreatment.Unbounded

أفلام مُقترَحة لك

ملاحظة: يتم عرض نص الرابط عندما تكون لغة JavaScript غير مفعّلة.
مُعدِّلات الرسومات
جارٍ تحميل الصور {:#loading-images}
رموز Material {:#material-icons}

رموز المواد

طلاء مخصّص

تخصيص صورة

نطاق المحتوى

قص Image قابل للتركيب ووضعه في شكل

إضافة حدود إلى عنصر Image قابل للتجميع