با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
پیمایش اختلاف منظر تکنیکی است که در آن محتوای پسزمینه و محتوای پیشزمینه با سرعتهای مختلف حرکت میکنند. میتوانید این تکنیک را برای بهبود رابط کاربری برنامه خود پیادهسازی کنید و در حین حرکت کاربران تجربهای پویاتر ایجاد کنید.
سازگاری نسخه
این پیاده سازی مستلزم آن است که minSDK پروژه شما روی سطح API 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),)}}
یک اصلاح کننده layout سفارشی ایجاد می کند تا سرعت اسکرول قابل ترکیب را تنظیم کند.
Image با سرعت کمتری نسبت به Text اسکرول میکند، و در نتیجه یک اثر اختلاف منظر ایجاد میکند، زیرا دو ترکیبپذیر به صورت عمودی با سرعتهای متفاوت ترجمه میشوند.
نتایج
شکل 1. فهرست پیمایشی با جلوه اختلاف منظر.
مجموعه هایی که حاوی این راهنما هستند
این راهنما بخشی از مجموعههای راهنمای Quick Guide است که اهداف توسعه Android گستردهتری را پوشش میدهد:
نمایش یک لیست یا شبکه
فهرستها و شبکهها به برنامه شما اجازه میدهند مجموعهها را به شکل بصری دلپذیری نمایش دهد که مصرف آن برای کاربران آسان است.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و 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)"]]