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

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

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

• יוצרים את הצורה.
• מחליקים את התמונה לתוך הצורה.

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

כדי להטמיע את הקוד הזה, צריך להגדיר את 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.

אוסף מדריכים מהירים

יש לכם שאלות או משוב

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

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