אתם יכולים להתאים תמונה לצורה חתוכה ולצייר צללים מסביב לגבול הצורה כדי ליצור תחושה תלת-ממדית. הטכניקה הזו שימושית ליצירת עיצובים כמו סמלי דמויות ותמונות ממוזערות של מוצרים, או להצגת סמלי לוגו בצורות בהתאמה אישית.
כדי להציג תמונה חתוכה לצורה מסוימת, צריך לבצע את הפעולות הבאות:
- יוצרים את הצורה.
- מחליקים את התמונה לתוך הצורה.
תאימות גרסאות
כדי להטמיע את הקוד הזה, צריך להגדיר את 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) } }
נקודות עיקריות לגבי הקוד
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) ) }
נקודות עיקריות לגבי הקוד
- האובייקטים
RoundedPolygon
ו-RoundedPolygonShape
משמשים להגדרה ולהחלה של צורה משושה על התמונה. - הקוד משתמש ב-
graphicsLayer
כדי להוסיף לתמונה צללית שמבוססת על הגובה. כך יוצרים תחושה של עומק והפרדה חזותית מהרקע. - השימוש בבלוק
remember
משפרת את הביצועים על ידי כך שהמערכת מחשבת את הגדרות הצורה והחיתוך רק פעם אחת, ומשמרת אותן לצורך קומפוזיציות חוזרות של ממשק המשתמש.
תוצאות
![כלב במרובע עם צללים מסביב לקצוות](https://developer.android.google.cn/static/develop/ui/compose/images/graphics/shapes/clip_with_shadow.png?hl=he)
אוספים שמכילים את המדריך הזה
המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=he)