สร้างเอฟเฟกต์การเลื่อนแบบพารัลแลกซ์

การเลื่อนแบบพารัลแลกซ์เป็นเทคนิคที่เนื้อหาพื้นหลังและเนื้อหาเบื้องหน้าเลื่อนด้วยความเร็วที่ต่างกัน คุณสามารถใช้เทคนิคนี้เพื่อปรับปรุง 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 รายการเลื่อนในแนวตั้งด้วยความเร็วต่างกัน

ผลลัพธ์

รูปที่ 1 รายการที่เลื่อนโดยมีเอฟเฟกต์พารัลแลกซ์

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

รายการและตารางกริดช่วยให้แอปแสดงคอลเล็กชันในรูปแบบที่ดึงดูดสายตาและใช้งานง่ายสำหรับผู้ใช้
ดูเทคนิคการใช้ภาพสดใสที่ดึงดูดความสนใจเพื่อให้แอป Android ของคุณมีรูปลักษณ์ที่สวยงาม
ข้อความเป็นส่วนสําคัญของ UI ดูวิธีต่างๆ ที่คุณสามารถนำเสนอข้อความในแอปเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่น่าพึงพอใจ

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ