ภาพสไลด์

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

ภาพสไลด์มีเลย์เอาต์ 4 แบบให้เลือกให้เหมาะกับกรณีการใช้งานที่แตกต่างกัน ดังนี้

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

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

แพลตฟอร์ม API

หากต้องการใช้ภาพสไลด์แบบเรียกดูหลายรายการและแบบไม่มีคอนเทนเนอร์ ให้ใช้คอมโพสิเบิล HorizontalMultiBrowseCarousel และ HorizontalUncontainedCarousel คอมโพสิเบิลเหล่านี้ใช้พารามิเตอร์หลักต่อไปนี้ร่วมกัน

• state: อินสแตนซ์ CarouselState ที่จัดการดัชนีรายการปัจจุบันและตําแหน่งการเลื่อน สร้างสถานะนี้โดยใช้ rememberCarouselState { itemCount } โดยที่ itemCount คือจํานวนรายการทั้งหมดในภาพสไลด์
• itemSpacing: กําหนดขนาดของพื้นที่ว่างระหว่างรายการที่อยู่ติดกันในภาพสไลด์
• contentPadding: ใช้ระยะห่างจากขอบรอบๆ พื้นที่เนื้อหาของภาพสไลด์ ใช้ตัวเลือกนี้เพื่อเพิ่มเว้นวรรคก่อนรายการแรกหรือหลังรายการสุดท้าย หรือเพื่อกำหนดระยะขอบสำหรับรายการภายในส่วนที่เลื่อนได้
• content: ฟังก์ชันที่ประกอบกันได้ซึ่งรับอินเด็กซ์จำนวนเต็ม ใช้แลมดานี้เพื่อกำหนด UI สำหรับแต่ละรายการในภาพสไลด์ตามดัชนีของรายการ

คอมโพสิเบิลเหล่านี้ระบุขนาดของรายการแตกต่างกันดังนี้

• itemWidth (สำหรับ HorizontalUncontainedCarousel): ระบุความกว้างที่แน่นอนของแต่ละรายการในภาพสไลด์แบบไม่จำกัด
• preferredItemWidth (สำหรับ HorizontalMultiBrowseCarousel): แนะนำความกว้างที่เหมาะสมสำหรับรายการในภาพสไลด์แบบเรียกดูหลายรายการ ซึ่งช่วยให้คอมโพเนนต์แสดงรายการได้หลายรายการหากมีพื้นที่เพียงพอ

ตัวอย่าง: ภาพสไลด์แบบเรียกดูหลายรายการ

ข้อมูลโค้ดนี้ใช้ภาพสไลด์แบบเรียกดูหลายรายการ

@Composable
fun CarouselExample_MultiBrowse() {
    data class CarouselItem(
        val id: Int,
        @DrawableRes val imageResId: Int,
        val contentDescription: String
    )

    val items = remember {
        listOf(
            CarouselItem(0, R.drawable.cupcake, "cupcake"),
            CarouselItem(1, R.drawable.donut, "donut"),
            CarouselItem(2, R.drawable.eclair, "eclair"),
            CarouselItem(3, R.drawable.froyo, "froyo"),
            CarouselItem(4, R.drawable.gingerbread, "gingerbread"),
        )
    }

    HorizontalMultiBrowseCarousel(
        state = rememberCarouselState { items.count() },
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(top = 16.dp, bottom = 16.dp),
        preferredItemWidth = 186.dp,
        itemSpacing = 8.dp,
        contentPadding = PaddingValues(horizontal = 16.dp)
    ) { i ->
        val item = items[i]
        Image(
            modifier = Modifier
                .height(205.dp)
                .maskClip(MaterialTheme.shapes.extraLarge),
            painter = painterResource(id = item.imageResId),
            contentDescription = item.contentDescription,
            contentScale = ContentScale.Crop
        )
    }
}
Carousel.kt

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

• กำหนดคลาสข้อมูล CarouselItem ซึ่งจัดโครงสร้างข้อมูลสำหรับองค์ประกอบแต่ละรายการในภาพสไลด์
• สร้างและจดจำListของออบเจ็กต์ CarouselItem ที่สร้างขึ้นด้วยแหล่งข้อมูลรูปภาพและคําอธิบาย
• ใช้คอมโพสิเบิล HorizontalMultiBrowseCarousel ซึ่งออกแบบมาเพื่อแสดงรายการหลายรายการในภาพสไลด์
  • ระบบจะเริ่มต้นสถานะของภาพสไลด์โดยใช้ rememberCarouselState ซึ่งได้รับจำนวนรายการทั้งหมด
  • รายการมี preferredItemWidth (ในที่นี้คือ 186.dp) ซึ่งจะแนะนำความกว้างที่เหมาะสมสำหรับแต่ละรายการ ภาพสไลด์จะใช้ข้อมูลนี้เพื่อกำหนดจำนวนรายการที่แสดงบนหน้าจอได้พร้อมกัน
  • พารามิเตอร์ itemSpacing จะเพิ่มช่องว่างเล็กๆ ระหว่างรายการ
  • Lambda ต่อท้ายของ HorizontalMultiBrowseCarousel จะวนผ่าน CarouselItems ในการวนซ้ำแต่ละครั้ง ระบบจะดึงข้อมูลรายการที่อินเด็กซ์ i และแสดงผลคอมโพสิชัน Image สำหรับรายการนั้น
  • Modifier.maskClip(MaterialTheme.shapes.extraLarge) ใช้มาสก์รูปทรงที่กำหนดไว้ล่วงหน้ากับรูปภาพแต่ละรูป ทำให้รูปภาพมีมุมมน
  • contentDescription มีคำอธิบายการช่วยเหลือพิเศษสำหรับรูปภาพ

ผลลัพธ์

รูปภาพต่อไปนี้แสดงผลลัพธ์จากข้อมูลโค้ดก่อนหน้า

ตัวอย่างภาพสไลด์ที่ไม่มีคอนเทนเนอร์

ข้อมูลโค้ดต่อไปนี้ใช้ภาพสไลด์ที่ไม่มีคอนเทนเนอร์

@Composable
fun CarouselExample() {
    data class CarouselItem(
        val id: Int,
        @DrawableRes val imageResId: Int,
        val contentDescription: String
    )

    val carouselItems = remember {
        listOf(
            CarouselItem(0, R.drawable.cupcake, "cupcake"),
            CarouselItem(1, R.drawable.donut, "donut"),
            CarouselItem(2, R.drawable.eclair, "eclair"),
            CarouselItem(3, R.drawable.froyo, "froyo"),
            CarouselItem(4, R.drawable.gingerbread, "gingerbread"),
        )
    }

    HorizontalUncontainedCarousel(
        state = rememberCarouselState { carouselItems.count() },
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(top = 16.dp, bottom = 16.dp),
        itemWidth = 186.dp,
        itemSpacing = 8.dp,
        contentPadding = PaddingValues(horizontal = 16.dp)
    ) { i ->
        val item = carouselItems[i]
        Image(
            modifier = Modifier
                .height(205.dp)
                .maskClip(MaterialTheme.shapes.extraLarge),
            painter = painterResource(id = item.imageResId),
            contentDescription = item.contentDescription,
            contentScale = ContentScale.Crop
        )
    }
}
Carousel.kt

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

• คอมโพสิชัน HorizontalUncontainedCarousel จะสร้างเลย์เอาต์ภาพสไลด์
  • พารามิเตอร์ itemWidth จะกำหนดความกว้างคงที่สำหรับแต่ละรายการในภาพสไลด์

ผลลัพธ์

รูปภาพต่อไปนี้แสดงผลลัพธ์จากข้อมูลโค้ดก่อนหน้า