אפשר להתאים אישית תמונות באמצעות מאפיינים ב-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 )
הגדרת אפשרויות שונות של 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) )

צורה עם פינות מעוגלות – משתמשים ב-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)) )

אפשר גם ליצור צורה חיתוך משלכם על ידי הרחבת 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) )

אם רוצים ליצור מסגרת עם שינוי הדרגתי, אפשר להשתמש ב-API 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)
בתמונהמסנן צבעים – שינוי צבעי הפיקסלים של התמונה
בתמונה הקומפוזבילית של התמונה יש פרמטר 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) )

ל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) )

למידע נוסף על שיטות המיזוג השונות, אפשר לעיין במאמרי העזרה בנושא 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)) )

היפוך הצבעים של רכיב 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)) ) )

כשמטושטשים את 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)) )

מומלץ עבורך
- הערה: טקסט הקישור מוצג כש-JavaScript מושבת
- גורמים משפיעים על הגרפיקה
- Loading images {:#loading-images}
- סמלים של חומר {:#material-icon}