تخصيص صورة

يمكن تخصيص الصور باستخدام الخصائص في 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

شكل الزاوية المستديرة: استخدِم 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

يمكنك أيضًا إنشاء شكل اقتصاص خاص بك من خلال تمديد 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

إضافة حدود إلى عنصر 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

إذا كنت تريد إنشاء حدود متدرّجة، يمكنك استخدام واجهة برمجة التطبيقات 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

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

لتحويل صورة إلى نسبة عرض إلى ارتفاع مخصّصة، استخدِم 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

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

تحتوي ميزة "الصورة القابلة للتركيب" على مَعلمة 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

تؤدي القيم الأخرى لـ 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 للحصول على مزيد من المعلومات عن أوضاع الدمج المختلفة المتاحة.

تطبيق فلتر 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

ضبط التباين أو السطوع في 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

قلب ألوان عنصر 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

تمويه عنصر 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

عند تمويه 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

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

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