הצגת תמונה חתוכה לצורה מסוימת

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

כדי להציג תמונה שנחתכה לצורה מסוימת, צריך לבצע את הפעולות הבאות:

• יוצרים את הצורה.
• גוזרים את התמונה לצורה.

תוצאות

תאימות גרסאות

כדי להטמיע את התכונה הזו, צריך להגדיר את minSDK בפרויקט לרמת API‏ 21 ומעלה.

פניות קשורות

יצירת צורה

הקוד הבא יוצר צורה בהתאמה אישית שאפשר לצייר ולעבד באופן דינמי פוליגון מעוגל:

fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }
class RoundedPolygonShape(
    private val polygon: RoundedPolygon,
    private var matrix: Matrix = Matrix()
) : Shape {
    private var path = Path()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        path.rewind()
        path = polygon.toPath().asComposePath()
        matrix.reset()
        val bounds = polygon.getBounds()
        val maxDimension = max(bounds.width, bounds.height)
        matrix.scale(size.width / maxDimension, size.height / maxDimension)
        matrix.translate(-bounds.left, -bounds.top)

        path.transform(matrix)
        return Outline.Generic(path)
    }
}
ShapesSnippets.kt

מידע חשוב על הקוד

• הפונקציה RoundedPolygon.getBounds() מגדירה פונקציית הרחבה במחלקה RoundedPolygon כדי לחשב את הגבולות שלה.
• המחלקות RoundedPolygonShape מטמיעות את הממשק Shape, ומאפשרות לכם להגדיר צורה בהתאמה אישית (מצולע מעוגל) ב-Jetpack Compose.
• הצורה משתמשת ב-Matrix כדי לנהל פעולות של שינוי גודל ותרגום לצורך עיבוד גמיש.
• הפונקציה createOutline() מקבלת אובייקט RoundedPolygon, משנה את קנה המידה שלו ומזיזה אותו כך שיתאים לגודל נתון, ומחזירה אובייקט Outline שמתאר את הצורה הסופית שתוצג.

חיתוך התמונה לצורה

הקוד הבא חותך את התמונה לצורה של משושה ומוסיף צל עדין כדי ליצור תחושה של עומק:

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier
        .clip(clip)
        .background(MaterialTheme.colorScheme.secondary)
        .size(200.dp)
) {
    Text(
        "Hello Compose",
        color = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier.align(Alignment.Center)
    )
}
ShapesSnippets.kt

מידע חשוב על הקוד

• האובייקטים RoundedPolygon ו-RoundedPolygonShape משמשים להגדרת צורה משושה לתמונה ולהחלתה.
• הקוד משתמש ב-graphicsLayer כדי להוסיף לתמונה צל שמבוסס על גובה. כך נוצרת תחושה של עומק והפרדה ויזואלית מהרקע.
• השימוש בבלוקים remember משפר את הביצועים כי הוא מבטיח שצורת ההגדרה והגדרות החיתוך יחושבו רק פעם אחת ויישמרו לשימוש חוזר בהמשך של ממשק המשתמש.

אוספים שכוללים את המדריך הזה

המדריך הזה הוא חלק מאוספים של מדריכים מהירים שנבחרו בקפידה ועוסקים ביעדים רחבים יותר של פיתוח ל-Android:

הצג תמונות

לומדים טכניקות לשימוש ברכיבים חזותיים בהירים ומושכים כדי להעניק לאפליקציית Android מראה ותחושה יפים.

אוסף מדריכים מקוצרים

יש לך שאלות או משוב?

אפשר לעבור לדף השאלות הנפוצות שלנו כדי לקרוא מדריכים מהירים, או לפנות אלינו ולספר לנו מה דעתך.

מעבר לשאלות הנפוצות שליחת משוב