یک افکت پیمایش اختلاف منظر ایجاد کنید

پیمایش پارالاکس تکنیکی است که در آن محتوای پس‌زمینه و محتوای پیش‌زمینه با سرعت‌های مختلف پیمایش می‌شوند. شما می‌توانید این تکنیک را برای بهبود رابط کاربری برنامه خود پیاده‌سازی کنید و با پیمایش کاربران، تجربه پویاتری ایجاد کنید.

نتایج

شکل ۱. یک لیست پیمایشی با افکت پارالاکس.

سازگاری نسخه

این پیاده‌سازی مستلزم آن است که 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 اسکرول می‌شود و با حرکت عمودی دو عنصر ترکیبی با سرعت‌های مختلف، یک اثر اختلاف منظر ایجاد می‌کند.

مجموعه‌هایی که حاوی این راهنما هستند

این راهنما بخشی از این مجموعه‌های راهنمای سریعِ برگزیده است که اهداف گسترده‌تر توسعه اندروید را پوشش می‌دهد:

لیست‌ها و شبکه‌ها به برنامه شما اجازه می‌دهند تا مجموعه‌ها را به شکلی بصری دلپذیر نمایش دهد که استفاده از آن برای کاربران آسان باشد.
تکنیک‌هایی را برای استفاده از تصاویر روشن و جذاب کشف کنید تا به برنامه اندروید خود ظاهری زیبا و دلنشین ببخشید.
متن بخش اصلی هر رابط کاربری است. روش‌های مختلفی را برای ارائه متن در برنامه خود بیابید تا یک تجربه کاربری لذت‌بخش ارائه دهید.

سوالی یا بازخوردی دارید؟

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع اطلاعات کسب کنید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.