پیمایش اختلاف منظر تکنیکی است که در آن محتوای پسزمینه و محتوای پیشزمینه با سرعتهای مختلف حرکت میکنند. میتوانید این تکنیک را برای بهبود رابط کاربری برنامه خود پیادهسازی کنید و در حین حرکت کاربران تجربهای پویاتر ایجاد کنید.
سازگاری نسخه
این پیاده سازی مستلزم آن است که 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
اسکرول میکند، و در نتیجه یک اثر اختلاف منظر ایجاد میکند، زیرا دو ترکیبپذیر به صورت عمودی با سرعتهای متفاوت ترجمه میشوند.
نتایج
مجموعه هایی که حاوی این راهنما هستند
این راهنما بخشی از مجموعههای راهنمای Quick Guide است که اهداف توسعه Android گستردهتری را پوشش میدهد:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fa)
نمایش یک لیست یا شبکه
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fa)
نمایش تصاویر
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fa)