يمكنك تخصيص الصور باستخدام خصائص في عنصر Image المركّب
(contentScale وcolorFilter). يمكنك أيضًا تطبيق المعدِّلات
الحالية لتطبيق تأثيرات مختلفة على Image. يمكن استخدام المعدِّلات على أي عنصر مركّب، وليس فقط عنصر Image المركّب، في حين أنّ contentScale وcolorFilter هما مَعلمتان صريحتان في عنصر Image المركّب.
مقياس المحتوى
حدِّد خيار contentScale لاقتصاص صورة أو تغيير طريقة تغيير حجمها داخل حدودها. إذا لم تحدِّد خيار contentScale، يتم تلقائيًا استخدام ContentScale.Fit.
في المثال التالي، يقتصر عنصر Image المركّب على حجم 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 )
يؤدي ضبط خيارات 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) )
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)) )
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()) )
إضافة حدود إلى عنصر 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) )
لإنشاء حدود متدرّجة، يمكنك استخدام واجهة برمجة التطبيقات Brush لرسم حدود متدرّجة بألوان قوس قزح حول الصورة:
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) )
ضبط نسبة عرض إلى ارتفاع مخصّصة
لتغيير نسبة العرض إلى الارتفاع في صورة، استخدِم Modifier.aspectRatio(16f/9f) لتقديم نسبة مخصّصة لصورة (أو أي عنصر مركّب).
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), modifier = Modifier.aspectRatio(16f / 9f) )
Modifier.aspectRatio(16f/9f) في Imageفلتر الألوان: تغيير ألوان وحدات البكسل في الصورة
يحتوي عنصر Image المركّب على مَعلمة 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) )
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) )
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) }) )
ضبط التباين أو السطوع في عنصر 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)) )
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)) )
تمويه عنصر 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)) ) )
BlurEffect مطبّق على صورةعند تمويه Images، يُنصح باستخدام BlurredEdgeTreatment(Shape) بدلاً من BlurredEdgeTreatment.Unbounded، لأنّ الأخير يُستخدم لتمويه العروض العشوائية التي من المفترض أن يتم عرضها خارج حدود المحتوى الأصلي. بالنسبة إلى الصور، من غير المرجّح أن يتم عرضها خارج حدود المحتوى، في حين أنّ تمويه مستطيل مستدير قد يتطلب هذا التمييز.
على سبيل المثال، إذا ضبطنا BlurredEdgeTreatment على Unbounded في الصورة السابقة، ستظهر حواف الصورة مموّهة بدلاً من أن تكون حادة:
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)) )
BlurEdgeTreatment.Unboundedاقتراحات مخصصة لك
- ملاحظة: يتم عرض نص الرابط عندما تكون JavaScript غير مفعّلة
- معدِّلات الرسومات
- تحميل الصور
- رموز Material Design
الصورة المصدر أصغر من الحدود:
الصورة المصدر أصغر من الحدود:
الصورة المصدر أصغر من الحدود:
الصورة المصدر أصغر من الحدود: