Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

ปุ่มไอคอน

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

ปุ่มไอคอนมี 2 ประเภท ได้แก่

ค่าเริ่มต้น: ปุ่มเหล่านี้สามารถเปิดองค์ประกอบอื่นๆ ได้ เช่น เมนูหรือการค้นหา
ปุ่มเปิด/ปิด: ปุ่มเหล่านี้แสดงถึงการดำเนินการแบบไบนารีที่เปิดหรือปิดได้ เช่น "รายการโปรด" หรือ "บุ๊กมาร์ก"

รูปที่ 1 ปุ่มไอคอน ซึ่งบางปุ่มเป็นสีทึบ (แสดงถึงการเลือก) และมีเส้นขอบ

แพลตฟอร์ม API

ใช้ Composable IconButton เพื่อใช้ปุ่มไอคอนมาตรฐาน หากต้องการสร้างรูปแบบภาพที่แตกต่างกัน เช่น แบบเติมสี แบบเติมสีตามโทน หรือแบบเส้นขอบ ให้ใช้ FilledIconButton, FilledTonalIconButton และ OutlinedIconButton ตามลำดับ

พารามิเตอร์หลักสำหรับ IconButton ได้แก่

onClick: ฟังก์ชัน Lambda ที่จะทำงานเมื่อผู้ใช้แตะปุ่มไอคอน
enabled: บูลีนที่ควบคุมสถานะการเปิดใช้ของปุ่ม เมื่อfalse ปุ่มจะไม่ตอบสนองต่อการป้อนข้อมูลของผู้ใช้
content: เนื้อหาที่ประกอบกันได้ภายในปุ่ม ซึ่งโดยปกติจะเป็น Icon

ตัวอย่างพื้นฐาน: ปุ่มไอคอนเปิด/ปิด

ตัวอย่างนี้แสดงวิธีใช้ปุ่มไอคอนเปิด/ปิด ปุ่มไอคอนสลับจะเปลี่ยนลักษณะที่ปรากฏตามสถานะว่าเลือกหรือไม่เลือก

@Preview
@Composable
fun ToggleIconButtonExample() {
    // isToggled initial value should be read from a view model or persistent storage.
    var isToggled by rememberSaveable { mutableStateOf(false) }

    IconButton(
        onClick = { isToggled = !isToggled }
    ) {
        Icon(
            painter = if (isToggled) painterResource(R.drawable.favorite_filled) else painterResource(R.drawable.favorite),
            contentDescription = if (isToggled) "Selected icon button" else "Unselected icon button."
        )
    }
}IconButton.kt

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

คอมโพสิเบิล ToggleIconButtonExample จะกำหนด IconButton ที่เปิด/ปิดได้
- mutableStateOf(false) จะสร้างออบเจ็กต์ MutableState ที่เก็บค่าบูลีน ซึ่งมีค่าเริ่มต้นเป็น false ซึ่งทำให้ isToggled เป็นตัวเก็บสถานะ ซึ่งหมายความว่า Compose จะสร้าง UI ใหม่ทุกครั้งที่ค่าของตัวเก็บสถานะมีการเปลี่ยนแปลง
- rememberSaveable ช่วยให้มั่นใจว่าสถานะ isToggled จะยังคงอยู่ตลอดการเปลี่ยนแปลงการกำหนดค่า เช่น การหมุนหน้าจอ
onClick lambda ของ IconButton จะกำหนดลักษณะการทำงานของปุ่มเมื่อคลิก โดยสลับสถานะระหว่าง true และ false
พารามิเตอร์ painter ของ Composable Icon จะโหลด painterResource ที่แตกต่างกันตามเงื่อนไขโดยอิงตามสถานะ isToggled ซึ่งจะเปลี่ยนลักษณะที่ปรากฏของไอคอน
- หาก isToggled เป็น true ระบบจะโหลดทรัพยากรที่ถอนออกได้รูปหัวใจที่เติมสี
- หาก isToggled เป็น false ระบบจะโหลดรูปหัวใจแบบเส้นขอบที่วาดได้
contentDescription ของ Icon จะอัปเดตตามสถานะ isToggled เพื่อให้ข้อมูลการช่วยเหลือพิเศษที่เหมาะสม

ผลลัพธ์

รูปภาพต่อไปนี้แสดงปุ่มไอคอนเปิด/ปิดจากข้อมูลโค้ดก่อนหน้าในสถานะที่ไม่ได้เลือก

รูปที่ 2 ปุ่มไอคอนเปิด/ปิด "รายการโปรด" ในสถานะที่ไม่ได้เลือก

ตัวอย่างขั้นสูง: การดำเนินการซ้ำเมื่อกด

ส่วนนี้แสดงวิธีสร้างปุ่มไอคอนที่เรียกใช้การดำเนินการอย่างต่อเนื่องขณะที่ผู้ใช้กดค้างไว้ แทนที่จะเรียกใช้เพียงครั้งเดียวต่อการคลิก

@Composable
fun MomentaryIconButton(
    unselectedImage: Int,
    selectedImage: Int,
    contentDescription: String,
    modifier: Modifier = Modifier,
    stepDelay: Long = 100L, // Minimum value is 1L milliseconds.
    onClick: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()
    val pressedListener by rememberUpdatedState(onClick)

    LaunchedEffect(isPressed) {
        while (isPressed) {
            delay(stepDelay.coerceIn(1L, Long.MAX_VALUE))
            pressedListener()
        }
    }

    IconButton(
        modifier = modifier,
        onClick = onClick,
        interactionSource = interactionSource
    ) {
        Icon(
            painter = if (isPressed) painterResource(id = selectedImage) else painterResource(id = unselectedImage),
            contentDescription = contentDescription,
        )
    }
}IconButton.kt

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

MomentaryIconButton จะใช้ unselectedImage: Int ซึ่งเป็นรหัสทรัพยากรที่ถอนออกได้สำหรับไอคอนเมื่อไม่ได้กดปุ่ม และ selectedImage: Int ซึ่งเป็นรหัสทรัพยากรที่ถอนออกได้สำหรับไอคอนเมื่อกดปุ่ม
โดยใช้ interactionSource เพื่อติดตามการโต้ตอบ "กด" จากผู้ใช้โดยเฉพาะ
isPressed จะเป็นจริงเมื่อมีการกดปุ่มอยู่ และเป็นเท็จในกรณีอื่นๆ เมื่อ isPressed เป็น true LaunchedEffect จะเข้าสู่ลูป
- ภายในลูปนี้ จะใช้ delay (พร้อม stepDelay) เพื่อหยุดชั่วคราวระหว่างการทริกเกอร์การดำเนินการ coerceIn ช่วยให้มั่นใจว่าความล่าช้าจะอยู่ที่อย่างน้อย 1 มิลลิวินาทีเพื่อป้องกันการวนซ้ำไม่สิ้นสุด
- ระบบจะเรียกใช้ pressedListener หลังจากแต่ละช่วงเวลาหน่วงภายในลูป ซึ่งจะทำให้การดำเนินการทำซ้ำ
pressedListener ใช้ rememberUpdatedState เพื่อให้แน่ใจว่าแลมบ์ดา onClick (การดำเนินการที่จะทำ) เป็นเวอร์ชันล่าสุดเสมอจากองค์ประกอบล่าสุด
Icon จะเปลี่ยนรูปภาพที่แสดงตามสถานะของปุ่มว่ามีการกดอยู่หรือไม่
- หาก isPressed เป็นจริง ระบบจะแสดง selectedImage
- มิเช่นนั้น ระบบจะแสดง unselectedImage

ถัดไป ให้ใช้ MomentaryIconButton นี้ในตัวอย่าง ข้อมูลโค้ดต่อไปนี้แสดงปุ่มไอคอน 2 ปุ่มที่ควบคุมตัวนับ

@Preview()
@Composable
fun MomentaryIconButtonExample() {
    var pressedCount by remember { mutableIntStateOf(0) }

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_rewind,
            selectedImage = R.drawable.fast_rewind_filled,
            stepDelay = 100L,
            onClick = { pressedCount -= 1 },
            contentDescription = "Decrease count button"
        )
        Spacer(modifier = Modifier)
        Text("advanced by $pressedCount frames")
        Spacer(modifier = Modifier)
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_forward,
            selectedImage = R.drawable.fast_forward_filled,
            contentDescription = "Increase count button",
            stepDelay = 100L,
            onClick = { pressedCount += 1 }
        )
    }
}IconButton.kt

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

MomentaryIconButtonExample Composable จะแสดง Row ที่มีอินสแตนซ์ MomentaryIconButton 2 รายการและ Text Composable เพื่อสร้าง UI สำหรับเพิ่มและลดตัวนับ
โดยจะรักษาตัวแปรสถานะ pressedCount ที่เปลี่ยนแปลงได้โดยใช้ remember และ mutableIntStateOf ซึ่งเริ่มต้นเป็น 0 เมื่อ pressedCount เปลี่ยนแปลง คอมโพสิเบิลที่สังเกตการณ์อยู่ (เช่น คอมโพสิเบิล Text) จะจัดองค์ประกอบใหม่เพื่อให้สอดคล้องกับค่าใหม่
MomentaryIconButtonแรกจะลด pressedCount เมื่อคลิกหรือกดค้างไว้
MomentaryIconButton ที่ 2 จะเพิ่ม pressedCount เมื่อคลิกหรือกดค้างไว้
ปุ่มทั้ง 2 ปุ่มใช้ stepDelay 100 มิลลิวินาที ซึ่งหมายความว่าการดำเนินการ onClick จะทำซ้ำทุกๆ 100 มิลลิวินาทีขณะกดปุ่มค้างไว้

ผลลัพธ์

วิดีโอต่อไปนี้แสดง UI ที่มีปุ่มไอคอนและตัวนับ

รูปที่ 3 UI ตัวนับที่มีปุ่มไอคอน 2 ปุ่ม (บวกและลบ) ซึ่งจะเพิ่มและลดตัวนับ

แหล่งข้อมูลเพิ่มเติม

Material 3 - ปุ่มไอคอน