يمكنك تخصيص الصور باستخدام السمات في دالة Image مركّبة
(contentScale وcolorFilter). يمكنك أيضًا تطبيق المعدِّلات الحالية
لتطبيق تأثيرات مختلفة على Image. يمكن استخدام المُعدِّلات على أي دالة مركّبة، وليس فقط الدالة المركّبة Image، في حين أنّ contentScale وcolorFilter هما مَعلمتان صريحتان في الدالة المركّبة Image.
مقياس المحتوى
حدِّد خيار contentScale لاقتصاص صورة أو تغيير طريقة تغيير حجمها داخل حدودها. إذا لم تحدّد خيار contentScale، يتم استخدام ContentScale.Fit تلقائيًا.
في المثال التالي، تقتصر الدالة المركّبة Image على حجم 150 بكسل مستقل الكثافة مع حدود، ويتم ضبط الخلفية على اللون الأصفر في الدالة المركّبة 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.تؤدي BlendModes الأخرى إلى تأثيرات مختلفة. على سبيل المثال، يؤدي ضبط السمة 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 غير مفعَّل
- عناصر تعديل الرسومات
- تحميل الصور
- رمز متوافق مع إرشادات التصميم المتعدّد الأبعاد
الصورة المصدر أصغر من الحدود:
الصورة المصدر أصغر من الحدود:
الصورة المصدر أصغر من الحدود:
الصورة المصدر أصغر من الحدود: