การเลื่อนแบบพารัลแลกซ์เป็นเทคนิคที่เนื้อหาพื้นหลังและเนื้อหาเบื้องหน้าเลื่อนด้วยความเร็วที่ต่างกัน คุณสามารถใช้เทคนิคนี้เพื่อปรับปรุง UI ของแอป ซึ่งจะสร้างประสบการณ์การใช้งานแบบไดนามิกมากขึ้นเมื่อผู้ใช้เลื่อนดู
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
สร้างเอฟเฟกต์ภาพพาโนรามา
หากต้องการใช้เอฟเฟกต์ภาพพารัลแลกซ์ ให้ใช้เศษส่วนของค่าการเลื่อนจากคอมโพสิชันแบบเลื่อนไปยังคอมโพสิชันที่ต้องการใช้เอฟเฟกต์ภาพพารัลแลกซ์ ข้อมูลโค้ดต่อไปนี้จะนําองค์ประกอบภาพแบบฝัง 2 รายการ ได้แก่ รูปภาพและบล็อกข้อความ มาเลื่อนไปในทิศทางเดียวกันด้วยความเร็วที่แตกต่างกัน
@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
จึงทำให้เกิดเอฟเฟกต์ภาพพารัลแลกซ์เมื่อคอมโพสิเบิล 2 รายการเลื่อนในแนวตั้งด้วยความเร็วต่างกัน
ผลลัพธ์
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=th)
แสดงรายการหรือตารางกริด
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=th)
แสดงรูปภาพ
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=th)