התאמה אישית של תמונה

אפשר להתאים אישית את התמונות באמצעות מאפיינים של תוכן קומפוזבילי עם 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.Fit לאורך ContentScale.Fit לרוחב
ContentScale.Crop: חיתוך התמונה למרכז התמונה לשטח הזמין. ContentScale.חיתוך לאורך ContentScale.חיתוך לרוחב
ContentScale.FillHeight: שינוי קנה המידה של המקור ששומר על יחס הגובה-רוחב כך שהגבולות יתאימו לגובה היעד. לאורך של ContentScale.FillHeight ContentScale.FillHeight (לרוחב)
ContentScale.FillWidth: שינוי קנה המידה של המקור ששומר על יחס הגובה-רוחב כך שהגבולות יתאימו לרוחב היעד. ContentScale.FillWidth לאורך ContentScale.FillWidth לרוחב
ContentScale.FillBounds: שינוי קנה המידה של התוכן במאונך ובאופן אופקי לא אחיד כדי למלא את גבולות היעד. (הערה: תמונות יעוותו אם תציבו אותן במאגרים שלא תואמים ליחס המדויק של התמונה) ContentScale.FillBounds לאורך ContentScale.FillBounds לרוחב
ContentScale.Inside: שינוי קנה המידה של המקור כדי לשמור על יחס גובה-רוחב בתוך גבולות היעד. אם המקור קטן מהיעד או שווה לו בשני המאפיינים, הוא מתנהג באופן דומה ל'ללא'. התוכן תמיד יהיה בתוך הגבולות. אם התוכן קטן מהגבולות, לא תחול הגדלה. תמונת המקור גדולה מהגבולות: ContentScale.בפנים לאורך, תמונת המקור גדולה מהגבולות תמונת המקור קטנה מגבולות: ContentScale.בפנים לאורך, תמונת המקור קטנה מגבולות תמונת המקור גדולה מהגבולות: ContentScale.בפנים לרוחב, תמונת המקור גדולה מהגבולות תמונת המקור קטנה מגבולות: ContentScale.בפנים לרוחב, תמונת המקור קטנה מגבולות
ContentScale.None: אין להחיל הגדלה באחוזים. אם התוכן קטן מגבולות היעד, הוא לא יוגדל כדי להתאים לאזור. תמונת המקור גדולה מהגבולות: ContentScale.ללא לאורך, תמונת מקור גדולה מהגבולות תמונת המקור קטנה מגבולות: ContentScale.ללא לאורך, תמונת המקור קטנה מגבולות תמונת המקור גדולה מהגבולות: ContentScale.ללא לרוחב, תמונת מקור גדולה מהגבולות תמונת המקור קטנה מגבולות: ContentScale.ללא לרוחב, תמונת מקור קטנה מגבולות

חיתוך של תוכן קומפוזבילי מסוג 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)
)

חיתוך תמונה באמצעות צורת עיגול
איור 1: חיתוך תמונה באמצעות עיגול מעוגל

צורה של פינה מעוגלת - יש להשתמש ב-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
איור 2: חיתוך תמונה באמצעות RoundedCornerForm

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

חיתוך של תמונה עם צורת נתיב מותאמת אישית
איור 3: חיתוך תמונה עם צורת נתיב מותאמת אישית

הוספת גבול לתוכן קומפוזבילי מסוג 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)
)

לחתוך את התמונה ולהוסיף מסגרת מסביבה.
איור 4: חיתוך התמונה והוספת גבול סביבה

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

גבול עיגול הדרגתי של צבעי הקשת
איור 5: גבול עיגול הדרגתי בצבעי הקשת

הגדרת יחס גובה-רוחב בהתאמה אישית

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

גוון.ירוק עם BlendMode.Darken
איור 8: גוון צבע ירוק עם 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) })
)

מטריצת צבעים עם רוויה 0 (תמונה בשחור-לבן)
איור 9: מטריצת צבעים עם רוויה 0 (תמונה בשחור-לבן)

התאמת הניגודיות או הבהירות של תוכן קומפוזבילי מסוג 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
איור 10: כוונון הבהירות והניגודיות של התמונה באמצעות 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))
)

צבעים הפוכים בתמונה
איור 11: צבעים הפוכים בתמונה

טשטוש תוכן קומפוזבילי עם 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))
        )
)

אפקט הטשטוש הוחל על התמונה
איור 12: אפקט טשטוש מוחל על התמונה

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

טיפול בטשטוש רקע
איור 13: הטיפול בטשטוש טשטוש.ללא גבולות