טשטוש ב-Compose

אפקטים של טשטוש מרככים את הפרטים החזותיים, יוצרים עומק שדה בצילום וממקדים את תשומת הלב ברכיבים בממשק המשתמש בחזית. ב-Jetpack Compose, משתמשים ב-Modifier.blur כדי לטשטש את התוכן שמשורטט בתוך רכיב קומפוזבילי, כולל תמונות, צורות, טקסט ומאגרי פריסה. החלת Modifier.blur מעבדת את ה-composable לשכבת גרפיקה נפרדת.

בהתאם למטרות העיצוב שלכם, אתם יכולים לשנות את הטשטוש בשתי דרכים:

• טשטוש אחיד: החלת רדיוס טשטוש קבוע על כל הרכיב הניתן ליצירה, באופן שווה בשני הצירים או עם רדיוסים אופקיים ואנכיים נפרדים (radiusX, radiusY).
• טשטוש הדרגתי: משנה את רדיוס הטשטוש במרחב של הרכיב ה-composable באמצעות מעברי צבע של BlurRadiusSpec או Shader בהתאמה אישית.

החלת טשטוש אחיד

כדי להחיל טשטוש קבוע על כל הרכיב הקומפוזבילי, מעבירים רדיוס Dp אל Modifier.blur. כדי לטשטש את התוכן באופן שווה לאורך הציר האופקי (X) והציר האנכי (Y), מעבירים ערך radius יחיד:

@Composable
fun UniformBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                radius = 8.dp,
                edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)),
            ),
    )
}
BlurSnippets.kt

כדי ליצור אפקט של טשטוש תנועה כיווני, מעבירים ערכים נפרדים של radiusX ו-radiusY אל Modifier.blur. כדי להחיל את אפקט הטשטוש, הערכים של radiusX ושל radiusY צריכים להיות גדולים מ-0.dp, כמו בדוגמה הבאה:

@Composable
fun DirectionalBlurExample() {
    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 = 2.dp,
                edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)),
            ),
    )
}
BlurSnippets.kt

החלת טשטוש הדרגתי

טשטוש הדרגתי משנה את רדיוס הטשטוש ברכיב ה-composable, ויוצר מעבר חלק בין אזורים חדים לאזורים מטושטשים.

מעבירים BlurRadiusSpec אל Modifier.blur. לדוגמה, אפשר להשתמש ב-BlurRadiusSpec.verticalGradient עם startRadius = 0.dp ו-endRadius = 6.dp כדי שהחלק העליון של התמונה יישאר חד, והחלק התחתון יהיה מטושטש בהדרגה, כמו בדוגמה הבאה:

@Composable
fun ProgressiveBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                // Sharp at the top (0.dp), progressively blurred toward the bottom (6.dp)
                blurRadiusSpec = BlurRadiusSpec.verticalGradient(
                    startRadius = 0.dp,
                    endRadius = 6.dp,
                ),
                edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)),
            ),
    )
}
BlurSnippets.kt

הגדרת שיפועי טשטוש באמצעות BlurRadiusSpec

ב-BlurRadiusSpec, המידות מוגדרות ב-Dp ומתאימות את עצמן באופן אוטומטי לגודל השכבה ולצפיפות התצוגה כשהן משורטטות. טשטושים שמשתנים במרחב מוגבלים ל-150 פיקסלים אחרי ההמרה, ואילו ב-BlurRadiusSpec.uniform אין הגבלה.

בטבלה הבאה מפורטות פונקציות המפעל שזמינות ב-BlurRadiusSpec:

התאמה אישית של פיזור הטשטוש באמצעות BlurStop

טשטוש הדרגתי רגיל מבצע אינטרפולציה לינארית בין 0f ל-1f. כדי להתאים אישית את פיזור הטשטוש על פני משטח, למשל טשטוש של כמה קצוות או שמירה על חדות מלאה של החלק האמצעי, מעבירים List<BlurStop> שמכיל 2 עד 16 רשומות של BlurStop אל verticalGradient, horizontalGradient, linearGradient או radialGradient. מגדירים את הפרטים הבאים לכל רשומה של BlurStop:

• ‫fraction: המיקום היחסי לאורך ההדרגה מ-0.0f עד 1.0f. התחנות ממוינות אוטומטית לפי שברים.
• ‫radius: רדיוס הטשטוש ב-Dp שמוחל במיקום החלקי הזה.

לדוגמה, ארבע נקודות מטשטשות את הקצוות העליונים והתחתונים של התמונה, אבל משאירות את האמצע חד לחלוטין, כמו בדוגמה הבאה:

@Composable
fun MultiStopBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                // Blurred at the top and bottom edges, sharp in the middle (0.3f..0.7f)
                blurRadiusSpec = BlurRadiusSpec.verticalGradient(
                    stops = listOf(
                        BlurStop(fraction = 0.0f, radius = 20.dp),
                        BlurStop(fraction = 0.3f, radius = 0.dp),
                        BlurStop(fraction = 0.7f, radius = 0.dp),
                        BlurStop(fraction = 1.0f, radius = 20.dp),
                    ),
                ),
                edgeTreatment = BlurredEdgeTreatment.Unbounded,
            ),
    )
}
BlurSnippets.kt

הגדרת מאפייני שכבה באמצעות BlurScope

במקום להעביר את blurRadiusSpec ישירות, אפשר להעביר בלוק הגדרות ל-Modifier.blur { ... }. הבלוק הזה פועל בתוך BlurScope, מה שנותן לכם גישה ישירה לצפיפות הפריסה ולמאפיינים הבאים:

• ‫size: DpSize: הרוחב והגובה שנמדדו של השכבה המטושטשת ב-Dp, שמגדירים את מרחב הקואורדינטות של הגיאומטריה של הגרדיאנט.
• ‫blurRadiusSpec: BlurRadiusSpec: הגדרת רדיוס הטשטוש על פני השטח. ברירת המחדל היא BlurRadiusSpec.uniform(0.dp) (ללא טשטוש).
• ‫edgeTreatment: BlurredEdgeTreatment: האסטרטגיה שמשמשת לדגימה ולחיתוך של פיקסלים מחוץ לגבולות התוכן. ברירת המחדל היא BlurredEdgeTreatment.Rectangle.
• ‫alpha: Float: השקיפות של השכבה המטושטשת בטווח 0f..1f. ברירת המחדל היא 1f.

מכיוון שהבלוק BlurScope פועל במהלך שלב שכבת הגרפיקה, אחרי המדידה והפריסה, אפשר לחשב את הגיאומטריה של השיפוע מ-size בלי להפעיל קומפוזיציה מחדש.

שליטה בחיתוך הקצוות באמצעות BlurredEdgeTreatment

מכיוון שהטשטוש דוגם פיקסלים סמוכים בתוך רדיוס הטשטוש, הפלט המטושטש חורג מגבולות התוכן המקוריים לפי רדיוס הטשטוש. ‫BlurredEdgeTreatment קובע איך נדגמים פיקסלים מחוץ לגבולות המקוריים, ואם התוצאה נחתכת לצורה.

‫BlurredEdgeTreatment פועל גם עם טשטוש אחיד וגם עם טשטוש הדרגתי:

BlurredEdgeTreatment	התנהגות	פלט
‫BlurredEdgeTreatment.Rectangle (ברירת מחדל)	התוצאה של הטשטוש נחתכת לגבולות המלבניים של התוכן המקורי, ונדגמים פיקסלי הקצה הקרובים ביותר (TileMode.Clamp).
BlurredEdgeTreatment(shape)	האפשרות הזו חותכת את תוצאת הטשטוש לפי ה-Shape שצוין (למשל RoundedCornerShape(8.dp)) ודוגמת את פיקסלי הקצה הקרובים ביותר (TileMode.Clamp). היא שומרת על חדות התוצאה המטושטשת בגבולות הצורה בלי זליגה אל מחוץ לגבולות המקוריים.
BlurredEdgeTreatment.Unbounded	לא חותך את תוצאת הטשטוש (TileMode.Decal). פיקסלים מחוץ לגבולות התוכן נדגמים כשחור שקוף, וכך הקצוות החיצוניים של התמונה נראים מטושטשים מעבר לגבולות המקוריים.

כדי לראות איך ממשקי ה-API האלה משתלבים בתבניות ממשק משתמש מלאות, כמו עמעום הקצוות של תוכן שגוללים, הדגשת נקודת מיקוד או הסתרת טשטוש באמצעות הצללה בהתאמה אישית, עיינו במאמר תרחישים נפוצים לשימוש בטשטוש.