אפשר להתאים אישית את התמונות באמצעות מאפיינים של תוכן קומפוזבילי עם 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 : שינוי קנה המידה של המקור כדי לשמור על יחס גובה-רוחב בתוך גבולות היעד. אם המקור קטן מהיעד או שווה לו בשני המאפיינים, הוא מתנהג באופן דומה ל'ללא'. התוכן תמיד יהיה בתוך הגבולות. אם התוכן קטן מהגבולות, לא תחול הגדלה. |
תמונת המקור גדולה מהגבולות:
![]() ![]() |
תמונת המקור גדולה מהגבולות:
![]() ![]() |
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) )
![חיתוך תמונה באמצעות צורת עיגול](https://developer.android.com/static/develop/ui/compose/images/graphics-clipcircle.png?authuser=1&hl=he)
צורה של פינה מעוגלת - יש להשתמש ב-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)) )
![חיתוך תמונה באמצעות RoundedCorner shape](https://developer.android.com/static/develop/ui/compose/images/graphics-roundedcorners.png?authuser=1&hl=he)
אפשר גם ליצור צורת חיתוך משלך על ידי הרחבה של 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()) )
![חיתוך של תמונה עם צורת נתיב מותאמת אישית](https://developer.android.com/static/develop/ui/compose/images/graphics-customcrop.png?authuser=1&hl=he)
הוספת גבול לתוכן קומפוזבילי מסוג 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) )
![לחתוך את התמונה ולהוסיף מסגרת מסביבה.](https://developer.android.com/static/develop/ui/compose/images/graphics-border.png?authuser=1&hl=he)
אם רוצים ליצור גבול הדרגתי, אפשר להשתמש ב-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) )
![גבול עיגול הדרגתי של צבעי הקשת](https://developer.android.com/static/develop/ui/compose/images/graphics-gradientborder.png?authuser=1&hl=he)
הגדרת יחס גובה-רוחב בהתאמה אישית
כדי להפוך תמונה ליחס גובה-רוחב מותאם אישית, משתמשים עם
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) בתמונה](https://developer.android.com/static/develop/ui/compose/images/graphics-aspectratio.png?authuser=1&hl=he)
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) )
![ColorFilter.tint שהוחלו באמצעות BlendMode.SrcIn](https://developer.android.com/static/develop/ui/compose/images/graphics-bus.png?authuser=1&hl=he)
ל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.Darken](https://developer.android.com/static/develop/ui/compose/images/graphics-blendmode.png?authuser=1&hl=he)
מידע נוסף זמין במאמרי העזרה של 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) }) )
![מטריצת צבעים עם רוויה 0 (תמונה בשחור-לבן)](https://developer.android.com/static/develop/ui/compose/images/graphics-bw.png?authuser=1&hl=he)
התאמת הניגודיות או הבהירות של תוכן קומפוזבילי מסוג 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](https://developer.android.com/static/develop/ui/compose/images/graphics-colormatrix.png?authuser=1&hl=he)
היפוך צבעים של תוכן קומפוזבילי מסוג 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)) )
![צבעים הפוכים בתמונה](https://developer.android.com/static/develop/ui/compose/images/graphics-inverted.png?authuser=1&hl=he)
טשטוש תוכן קומפוזבילי עם 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)) ) )
![אפקט הטשטוש הוחל על התמונה](https://developer.android.com/static/develop/ui/compose/images/graphics-blur.png?authuser=1&hl=he)
כשמטשטשים את 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)) )
![טיפול בטשטוש רקע](https://developer.android.com/static/develop/ui/compose/images/graphics-unbounded.png?authuser=1&hl=he)
מומלץ עבורך
- הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
- מגבילי גרפיקה
- הטעינה של תמונות {:#loading-images}
- סמלים של חומר {:#material-icon}