יצירת אפקט גלילה של פרלקס

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

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

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

יחסי תלות

יצירת אפקט 'פרלקס'

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

@Composable
fun ParallaxEffect() {
    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
        layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            val height = if (rate > 0) scrollState.value / rate else scrollState.value
            layout(placeable.width, placeable.height) {
                placeable.place(0, height)
            }
        }

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {

        Image(
            painterResource(id = R.drawable.cupcake),
            contentDescription = "Android logo",
            contentScale = ContentScale.Fit,
            // Reduce scrolling rate by half.
            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
        )

        Text(
            text = stringResource(R.string.detail_placeholder),
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 8.dp),

        )
    }
}

נקודות עיקריות לגבי הקוד

  • יצירת משתנה layout בהתאמה אישית כדי לשנות את הקצב שבו הרכיב הניתן לקיפול גולל.
  • הרכיב Image גולל במהירות איטית יותר מהרכיב Text, וכך נוצר אפקט פרלקס כאשר שני הרכיבים הניתנים לשילוב נעים אנכית במהירויות שונות.

תוצאות

איור 1. רשימה גלילה עם אפקט פרלקס.

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

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

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

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

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