आइकॉन बटन

आइकॉन बटन, ऐसी कार्रवाइयां दिखाते हैं जो उपयोगकर्ता कर सकते हैं. आइकॉन बटन में ऐसे आइकॉन का इस्तेमाल किया जाना चाहिए जिसका मतलब साफ़ तौर पर समझ आए. आम तौर पर, ये आइकॉन सामान्य या अक्सर इस्तेमाल की जाने वाली कार्रवाइयों को दिखाते हैं.

आइकॉन बटन दो तरह के होते हैं:

• डिफ़ॉल्ट: इन बटन से अन्य एलिमेंट खोले जा सकते हैं. जैसे, कोई मेन्यू या खोज.
• टॉगल: ये बटन, बाइनरी कार्रवाइयों को दिखा सकते हैं. इन्हें चालू या बंद किया जा सकता है. जैसे, "पसंदीदा" या "बुकमार्क".

पहली इमेज. आइकॉन बटन, जिनमें से कुछ भरे हुए हैं (चयन को दर्शाते हैं) और आउटलाइन किए गए हैं.

एपीआई सरफ़ेस

स्टैंडर्ड आइकॉन बटन लागू करने के लिए, 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 यूज़र इंटरफ़ेस (यूआई) को फिर से कंपोज़ करता है.
  • rememberSaveable यह पक्का करता है कि कॉन्फ़िगरेशन में बदलाव होने पर भी, isToggled की स्थिति बनी रहे. जैसे, स्क्रीन को घुमाना.
• IconButton का onClick लैम्डा, बटन पर क्लिक करने पर उसके काम करने के तरीके को तय करता है. इससे, true और false के बीच की स्थिति को टॉगल किया जाता है.
• Icon कंपोज़ेबल का painter पैरामीटर, isToggled की स्थिति के आधार पर, शर्त के मुताबिक अलग-अलग painterResource लोड करता है. इससे आइकॉन का विज़ुअल लुक बदल जाता है.
  • अगर isToggled, true है, तो यह भरा हुआ दिल वाला ड्रॉएबल लोड करता है.
  • अगर isToggled, false है, तो यह आउटलाइन वाले दिल के ड्रॉएबल को लोड करता है.
• Icon का contentDescription भी isToggled की स्थिति के आधार पर अपडेट होता है, ताकि सुलभता से जुड़ी सही जानकारी दी जा सके

नतीजा

इस इमेज में, ऊपर दिए गए स्निपेट का टॉगल आइकॉन बटन दिखाया गया है. यह बटन, चुने न जाने की स्थिति में है:

दूसरी इमेज. "पसंदीदा" टॉगल आइकॉन बटन, जिसे नहीं चुना गया है.

ऐडवांस उदाहरण: बटन दबाने पर बार-बार होने वाली कार्रवाइयां

इस सेक्शन में, आइकॉन वाले ऐसे बटन बनाने का तरीका बताया गया है जो उपयोगकर्ता के उन्हें दबाकर रखने पर, लगातार कोई कार्रवाई ट्रिगर करते हैं. ये बटन, हर क्लिक पर सिर्फ़ एक बार कार्रवाई ट्रिगर नहीं करते.

@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 की वैल्यू true होती है. बटन को दबाए न रखने पर, इसकी वैल्यू false होती है. जब isPressed, true होता है, तो LaunchedEffect लूप में चला जाता है.
  • इस लूप के अंदर, यह delay (stepDelay के साथ) का इस्तेमाल करता है, ताकि ट्रिगर करने वाली कार्रवाइयों के बीच कुछ समय के लिए रुका जा सके. coerceIn यह पक्का करता है कि देरी कम से कम एक मिलीसेकंड की हो, ताकि इनफ़ाइनाइट लूप से बचा जा सके.
  • लूप में हर देरी के बाद, pressedListener को शुरू किया जाता है. इससे कार्रवाई दोहराई जाती है.
• pressedListener, rememberUpdatedState का इस्तेमाल करता है, ताकि यह पक्का किया जा सके कि onClick लैम्ब्डा (परफ़ॉर्म की जाने वाली कार्रवाई) हमेशा सबसे नए कंपोज़िशन के हिसाब से अप-टू-डेट हो.
• Icon, बटन के दबाए जाने या न दबाए जाने के आधार पर, दिखाई गई इमेज को बदलता है.
  • अगर isPressed सही है, तो selectedImage दिखता है.
  • ऐसा न होने पर, unselectedImage दिखाया जाता है.

इसके बाद, इस MomentaryIconButton का इस्तेमाल किसी उदाहरण में करें. नीचे दिए गए स्निपेट में, दो आइकॉन बटन दिखाए गए हैं जो काउंटर को कंट्रोल करते हैं:

@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 कंपोज़ेबल, एक Row दिखाता है. इसमें दो MomentaryIconButton इंस्टेंस और एक Text कंपोज़ेबल होता है. इससे काउंटर को बढ़ाने और घटाने के लिए यूज़र इंटरफ़ेस (यूआई) बनाया जाता है.
• यह remember और mutableIntStateOf का इस्तेमाल करके, pressedCount के लिए म्यूटेबल स्टेट वैरिएबल को बनाए रखता है. इसे 0 पर शुरू किया जाता है. pressedCount में बदलाव होने पर, इसे मॉनिटर करने वाले सभी कंपोज़ेबल (जैसे, Text कंपोज़ेबल) नई वैल्यू दिखाने के लिए फिर से कंपोज़ होते हैं.
• पहले MomentaryIconButton पर क्लिक करने या उसे दबाकर रखने पर, pressedCount कम हो जाता है.
• दूसरे MomentaryIconButton पर क्लिक करने या उसे दबाकर रखने पर, pressedCount बढ़ जाता है.
• दोनों बटन 100 मिलीसेकंड के stepDelay का इस्तेमाल करते हैं. इसका मतलब है कि बटन को दबाकर रखने पर, onClick कार्रवाई हर 100 मिलीसेकंड में दोहराई जाती है.

नतीजा

इस वीडियो में, आइकॉन बटन और काउंटर वाला यूज़र इंटरफ़ेस (यूआई) दिखाया गया है:

तीसरी इमेज. दो आइकॉन बटन (प्लस और माइनस) वाला काउंटर यूज़र इंटरफ़ेस (यूआई), जो काउंटर को बढ़ाता और घटाता है.

अन्य संसाधन

• Material 3 - आइकॉन बटन