เพจเจอร์แนวนอนใน Jetpack Compose Glimmer

อุปกรณ์ XR ที่รองรับ

คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ใน Jetpack Compose Glimmer, GlimmerHorizontalPager เป็นเลย์เอาต์ที่เลื่อนได้ในแนวนอนซึ่งสร้างขึ้นแบบ Lazy และจัดเรียงหน้าต่างๆ ตามลำดับ โดยคล้ายกับมาตรฐาน HorizontalPager ที่พบใน Compose Foundation แต่ปรับแต่งมาสำหรับแว่นตาที่มีจอแสดงผลที่มีลักษณะการทำงานและค่าเริ่มต้นของ Glimmer

โดยค่าเริ่มต้น ระบบจะแสดงหน้าเว็บเพียงหน้าเดียวอย่างโดดเด่นในแต่ละครั้ง เพจเจอร์ใช้ภาพเคลื่อนไหวแบบ Snap เพื่อให้หน้าเว็บอยู่ในขอบเขตของวิวพอร์ตเสมอหลังจากที่ผู้ใช้เลื่อนเสร็จแล้ว เพื่อมอบประสบการณ์การใช้งานที่ราบรื่น

พารามิเตอร์และตัวเลือกเลย์เอาต์ที่สำคัญ

GlimmerHorizontalPager มีพารามิเตอร์ที่ปรับแต่งได้เพื่อควบคุมระยะห่าง การจัดแนวเลย์เอาต์ และการโหลดแบบ Lazy Loading พารามิเตอร์บางส่วนมีดังนี้

ดูเอกสารอ้างอิงฉบับเต็มเพื่อดูข้อมูลเกี่ยวกับพารามิเตอร์ทั้งหมดที่ใช้ได้

คำแนะนำเกี่ยวกับภาพเคลื่อนไหวของข้อความ

ระหว่างภาพเคลื่อนไหวแบบ Snap และการเปลี่ยนภาพของเพจเจอร์ในแว่นตาที่มีจอแสดงผล การแสดงข้อความเริ่มต้นอาจแสดงสิ่งประดิษฐ์ที่เกิดจากการ Snap พิกเซล การตั้งค่า TextMotion.Animated จะช่วยให้การแสดงผลราบรื่นตลอดภาพเคลื่อนไหวของเลย์เอาต์

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)
GlimmerHorizontalPagerSample.kt

ตัวอย่าง: เพจเจอร์แนวนอน

โค้ดต่อไปนี้แสดงวิธีสร้างเพจเจอร์แนวนอนพื้นฐานที่มี 10 หน้า โดยวางการ์ดไว้ในแต่ละหน้า

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}
GlimmerHorizontalPagerSample.kt

ประเด็นสำคัญเกี่ยวกับโค้ด

• สถานะ: เริ่มต้น GlimmerPagerState โดยใช้ rememberGlimmerPagerState(pageCount = { 10 }) เพื่อจัดการสถานะของ เพจเจอร์
• เนื้อหาช่องหน้าเว็บ: รับดัชนีหน้าเว็บ page ภายในแลมบ์ดา GlimmerPagerScope เพื่อแสดงการ์ดแต่ละใบ
• รูปแบบข้อความภาพเคลื่อนไหวที่ราบรื่น: คัดลอก LocalTextStyle.current และ เปิดใช้ TextMotion.Animated อย่างชัดเจน
• ตัวระบุหน้าเว็บอัตโนมัติ: ซึ่งแตกต่างจากเพจเจอร์ Compose มาตรฐานที่ต้องใช้ คอมโพเนนต์ตัวระบุภายนอก GlimmerHorizontalPager จะฝังตัวระบุหน้าเว็บสไตล์จุดโดยอัตโนมัติ โดยค่าเริ่มต้น

ตัวระบุหน้าเว็บ

โดยค่าเริ่มต้น GlimmerHorizontalPager จะแสดงตัวระบุหน้าเว็บแบบจุดโดยใช้ GlimmerHorizontalPagerDefaults.PageIndicator ตัวระบุจะปรับรูปแบบสีโดยอัตโนมัติดังนี้

• จุดที่ใช้งานอยู่จะใช้สีเนื้อหาที่ได้จาก surface โดยรอบที่ใกล้ที่สุด

คุณสามารถส่ง PageIndicator ที่ปรับแต่งแล้วเพื่อระบุสีอย่างชัดเจน หรือแทนที่จุดด้วยเลย์เอาต์ที่กำหนดเองได้

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)
GlimmerHorizontalPagerSample.kt