आइकॉन बटन

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

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

  • डिफ़ॉल्ट: ये बटन, मेन्यू या खोज जैसे अन्य एलिमेंट खोल सकते हैं.
  • टॉगल: ये बटन, बाइनरी ऐक्शन दिखा सकते हैं. इन ऐक्शन को टॉगल करके चालू या बंद किया जा सकता है. जैसे, "पसंदीदा" या "बुकमार्क".
अलग-अलग आइकॉन (सेटिंग, ज़्यादा वगैरह) वाले पांच आइकॉन बटन. कुछ बिंदुओं को भरकर चुने जाने का पता चलता है और कुछ बिंदुओं को सिर्फ़ बॉर्डर किया जाता है.
पहली इमेज. आइकॉन बटन, जिनमें से कुछ भरे हुए हैं (चुने गए आइटम के बारे में बताते हैं) और जिनकी आउटलाइन बनी हुई है.

एपीआई का प्लैटफ़ॉर्म

स्टैंडर्ड आइकॉन बटन लागू करने के लिए, 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 यह पक्का करता है कि इंफ़ाइनाइट लूप को रोकने के लिए, देरी कम से कम 1 मिलीसेकंड हो.
    • 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 मिलीसेकंड में दोहराई जाती है.

नतीजा

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

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

अन्य संसाधन