تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
التمرير البانورامي هو أسلوب يتم فيه تصفّح محتوى المقدّمة والخلفية بسرعات مختلفة. يمكنك تطبيق هذه التقنية لتحسين
واجهة مستخدم تطبيقك، ما يخلق تجربة أكثر ديناميكية أثناء تنقّل المستخدمين.
توافق الإصدار
يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو
إصدار أحدث.
التبعيات
إنشاء تأثير التماثل البصري
لتحقيق تأثير التمويه، يمكنك تطبيق جزء من قيمة الانتقال إلى الأسفل أو للأعلى من
العنصر القابل للتجميع المتحرك إلى العنصر القابل للتجميع الذي يحتاج إلى تأثير التمويه. تأخذ المقتطف التالي عنصرَين مرئيَين متداخلَين، وهما صورة وكتلة من
النص، وتنتقل بهما في الاتجاه نفسه بسرعات مختلفة:
@ComposablefunParallaxEffect(){funModifier.parallaxLayoutModifier(scrollState:ScrollState,rate:Int)=layout{measurable,constraints->
valplaceable=measurable.measure(constraints)valheight=if(rate > 0)scrollState.value/rateelsescrollState.valuelayout(placeable.width,placeable.height){placeable.place(0,height)}}valscrollState=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),)}}
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Create a parallax scrolling effect\n\n\u003cbr /\u003e\n\nParallax scrolling is a technique in which the background content and foreground\ncontent scroll at different speeds. You can implement this technique to enhance\nyour app's UI, creating a more dynamic experience as your users scroll.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a parallax effect\n------------------------\n\nTo achieve the parallax effect, you apply a fraction of the scrolling value from\nthe scrolling composable to the composable that needs the parallax effect. The\nfollowing snippet takes two nested visual elements---an image and a block of\ntext---and scrolls them in the same direction at different speeds:\n\n\n```kotlin\n@Composable\nfun ParallaxEffect() {\n fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =\n layout { measurable, constraints -\u003e\n val placeable = measurable.measure(constraints)\n val height = if (rate \u003e 0) scrollState.value / rate else scrollState.value\n layout(placeable.width, placeable.height) {\n placeable.place(0, height)\n }\n }\n\n val scrollState = rememberScrollState()\n Column(\n modifier = Modifier\n .fillMaxWidth()\n .verticalScroll(scrollState),\n ) {\n\n Image(\n painterResource(id = R.drawable.cupcake),\n contentDescription = \"Android logo\",\n contentScale = ContentScale.Fit,\n // Reduce scrolling rate by half.\n modifier = Modifier.parallaxLayoutModifier(scrollState, 2)\n )\n\n Text(\n text = stringResource(R.string.detail_placeholder),\n modifier = Modifier\n .background(Color.White)\n .padding(horizontal = 8.dp),\n\n )\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/ParallaxEffect.kt#L39-L73\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- Creates a custom `layout` modifier to adjust the rate by which the composable scrolls.\n- The `Image` scrolls at a slower rate than the `Text`, producing a parallax effect as the two composables translate vertically at different rates.\n\nResults\n-------\n\n\u003cbr /\u003e\n\n**Figure 1.** A scrolling list with a parallax effect.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display a list or grid\n\nLists and grids allow your app to display collections in a visually pleasing form that's easy for users to consume. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-a-list-or-grid) \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\n### Display text\n\nText is a central piece of any UI. Find out different ways you can present text in your app to provide a delightful user experience. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-text) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]