التمرير البانورامي هو أسلوب يتم فيه تصفّح محتوى المقدّمة والخلفية بسرعات مختلفة. يمكنك تطبيق هذه التقنية لتحسين واجهة مستخدم تطبيقك، ما يخلق تجربة أكثر ديناميكية أثناء تنقّل المستخدمين.
توافق الإصدار
يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 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 الأوسع نطاقًا:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=ar)
عرض قائمة أو شبكة
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=ar)
عرض الصور
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=ar)