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

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

תוצאות

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

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

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

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

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

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

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

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