เพิ่มตัวบ่งชี้หน้าเว็บที่กำหนดเอง

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

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป

ทรัพยากร Dependency

สร้างตัวแบ่งหน้าแนวนอนที่มีตัวบ่งชี้หน้าเว็บที่กำหนดเอง

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

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

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

• โค้ดใช้ HorizontalPager ซึ่งช่วยให้คุณปัดในแนวนอนระหว่างหน้าเนื้อหาต่างๆ ได้ ในกรณีนี้ แต่ละหน้าจะแสดงหมายเลขหน้า
• ฟังก์ชัน rememberPagerState() จะเริ่มต้นตัวแบ่งหน้าและตั้งค่าจำนวนหน้าเป็น 4 ฟังก์ชันนี้จะสร้างออบเจ็กต์สถานะที่ติดตามหน้าปัจจุบันและให้คุณควบคุมโปรแกรมแบ่งหน้าได้
• ระบบจะใช้พร็อพเพอร์ตี้ pagerState.currentPage เพื่อระบุว่าควรไฮไลต์ตัวบ่งชี้หน้าเว็บใด
• ตัวระบุหน้าจะปรากฏในโปรแกรมเลื่อนหน้าเว็บที่วางซ้อนอยู่เหนือการติดตั้งใช้งาน Row
• ระบบจะวาดวงกลมขนาด 16 dp สําหรับแต่ละหน้าในโปรแกรมเลื่อนหน้า ตัวบ่งชี้ของหน้าปัจจุบันจะแสดงเป็น DarkGray ส่วนวงกลมตัวบ่งชี้ที่เหลือจะเป็น LightGray
• คอมโพสิชัน Text ภายใน HorizontalPager จะแสดงข้อความ "หน้า: [หมายเลขหน้า]" ในแต่ละหน้า

ผลลัพธ์

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

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

แสดงรายการหรือตารางกริด

รายการและตารางกริดช่วยให้แอปแสดงคอลเล็กชันในรูปแบบที่ดึงดูดสายตาและใช้งานง่ายสำหรับผู้ใช้

คอลเล็กชันคู่มือฉบับย่อ

แสดงคอมโพเนนต์แบบอินเทอร์แอกทีฟ

ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย

คอลเล็กชันคู่มือฉบับย่อ

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

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

ไปที่คำถามที่พบบ่อย แสดงความคิดเห็น