किसी कंपोज़ेबल में मौजूद मुख्य जानकारी के अलावा, यूज़र इंटरफ़ेस (यूआई) एलिमेंट के बारे में ज़्यादा जानकारी होना मददगार हो सकता है. जैसे, Text कंपोज़ेबल की टेक्स्ट स्ट्रिंग.
Compose में किसी कॉम्पोनेंट के मतलब और भूमिका के बारे में जानकारी को सिमैंटिक कहा जाता है. यह कंपोज़ेबल के बारे में अतिरिक्त जानकारी देने का एक तरीका है. इससे सुलभता, जानकारी अपने-आप भरने की सुविधा, और टेस्टिंग जैसी सेवाओं को मदद मिलती है. उदाहरण के लिए, कैमरे का आइकॉन विज़ुअल तौर पर सिर्फ़ एक इमेज हो सकता है, लेकिन इसका सिमैंटिक मतलब "फ़ोटो लें" हो सकता है.
सही सिमैंटिक को सही Compose एपीआई के साथ जोड़कर, सुलभता सेवाओं को अपने कॉम्पोनेंट के बारे में ज़्यादा से ज़्यादा जानकारी दी जा सकती है. इसके बाद, सुलभता सेवाएं यह तय करती हैं कि उपयोगकर्ता को कॉम्पोनेंट कैसे दिखाया जाए.
Material और Compose यूज़र इंटरफ़ेस (यूआई) और Foundation एपीआई में, पहले से मौजूद सिमैंटिक होते हैं. ये सिमैंटिक, अपनी खास भूमिका और फ़ंक्शन के हिसाब से काम करते हैं. हालांकि, अपनी खास ज़रूरतों के हिसाब से, मौजूदा एपीआई के लिए इन सिमैंटिक में बदलाव भी किया जा सकता है या कस्टम कॉम्पोनेंट के लिए नए सिमैंटिक सेट किए जा सकते हैं.
सिमैंटिक प्रॉपर्टी
सिमैंटिक प्रॉपर्टी, उससे जुड़े कंपोज़ेबल का मतलब बताती हैं. उदाहरण के लिए, Text कंपोज़ेबल में text सिमैंटिक प्रॉपर्टी होती है, क्योंकि यही उस कंपोज़ेबल का मतलब होता है. Icon में contentDescription प्रॉपर्टी होती है. अगर डेवलपर ने इसे सेट किया है, तो यह टेक्स्ट में बताती है कि आइकॉन का क्या मतलब है.
इस बारे में सोचें कि सिमैंटिक प्रॉपर्टी, कंपोज़ेबल का मतलब कैसे बताती हैं. Switch का इस्तेमाल करें. उपयोगकर्ता को यह इस तरह दिखता है:
Switch.इस एलिमेंट का मतलब समझाने के लिए, यह कहा जा सकता है: "यह एक स्विच है, जो टॉगल किया जा सकने वाला एलिमेंट है. यह 'चालू है' स्थिति में है. इससे इंटरैक्ट करने के लिए, इस पर क्लिक करें."
सेमैंटिक प्रॉपर्टी का इस्तेमाल इसी काम के लिए किया जाता है. इस स्विच एलिमेंट के सिमैंटिक नोड में ये प्रॉपर्टी शामिल हैं, जैसा कि लेआउट इंस्पेक्टर की मदद से देखा जा सकता है:
Switch कंपोज़ेबल की सिमैंटिक प्रॉपर्टी दिखाता है.Role से एलिमेंट के टाइप का पता चलता है. StateDescription में बताया गया है कि "चालू" स्थिति को कैसे रेफ़रंस किया जाना चाहिए. डिफ़ॉल्ट रूप से, यह "On" शब्द का स्थानीय भाषा में अनुवाद किया गया वर्शन है. हालांकि, कॉन्टेक्स्ट के आधार पर इसे ज़्यादा सटीक बनाया जा सकता है. उदाहरण के लिए, "चालू है". ToggleableState, स्विच की मौजूदा स्थिति है. OnClick प्रॉपर्टी, इस एलिमेंट के साथ इंटरैक्ट करने के लिए इस्तेमाल किए गए तरीके के बारे में बताती है.
अपने ऐप्लिकेशन में हर कंपोज़ेबल की सिमैंटिक प्रॉपर्टी को ट्रैक करने से, कई बेहतरीन सुविधाएं अनलॉक होती हैं:
- सुलभता सेवाएं, स्क्रीन पर दिखने वाले यूज़र इंटरफ़ेस (यूआई) को दिखाने के लिए प्रॉपर्टी का इस्तेमाल करती हैं. साथ ही, उपयोगकर्ताओं को इसके साथ इंटरैक्ट करने की अनुमति देती हैं. स्विच कंपोज़ेबल के लिए, TalkBack यह एलान कर सकता है: "चालू है; स्विच करें; टॉगल करने के लिए दो बार टैप करें". उपयोगकर्ता, स्विच को बंद करने के लिए अपनी स्क्रीन पर दो बार टैप कर सकता है.
-
टेस्टिंग फ़्रेमवर्क, नोड ढूंढने, उनके साथ इंटरैक्ट करने, और दावे करने के लिए प्रॉपर्टी का इस्तेमाल करता है:
val mySwitch = SemanticsMatcher.expectValue( SemanticsProperties.Role, Role.Switch ) composeTestRule.onNode(mySwitch) .performClick() .assertIsOff()
Compose की फ़ाउंडेशन लाइब्रेरी पर बनाए गए कंपोज़ेबल और मॉडिफ़ायर, डिफ़ॉल्ट रूप से आपके लिए काम की प्रॉपर्टी पहले से सेट कर देते हैं. आपके पास इन प्रॉपर्टी को मैन्युअल तरीके से बदलने का विकल्प भी है. इससे, खास मामलों में सुलभता की सुविधा को बेहतर बनाया जा सकता है. इसके अलावा, कंपोज़ेबल को मर्ज करने या हटाने की रणनीति में भी बदलाव किया जा सकता है.
सुलभता सेवाओं को अपने कॉम्पोनेंट के कॉन्टेंट टाइप की जानकारी देने के लिए, अलग-अलग तरह के सिमैंटिक लागू किए जा सकते हैं. इन एट्रिब्यूट की मदद से, मुख्य सिमैंटिक जानकारी को सही जगह पर रखा जा सकेगा. साथ ही, सुलभता सेवाओं को आपके कॉम्पोनेंट को दिखाने, उसके बारे में बताने या उसके साथ इंटरैक्ट करने के तरीके को बेहतर बनाने में मदद मिलेगी.
सिमैंटिक प्रॉपर्टी की पूरी सूची देखने के लिए, SemanticsProperties ऑब्जेक्ट देखें. सुलभता से जुड़ी संभावित कार्रवाइयों की पूरी सूची देखने के लिए, SemanticsActions ऑब्जेक्ट देखें.
हेडिंग
ऐप्लिकेशन में अक्सर ऐसी स्क्रीन होती हैं जिनमें ज़्यादा टेक्स्ट वाला कॉन्टेंट होता है. जैसे, लंबे लेख या समाचार पेज. इन्हें आम तौर पर, हेडिंग के साथ अलग-अलग सब-सेक्शन में बांटा जाता है:
सुलभता सुविधाओं का इस्तेमाल करने वाले उपयोगकर्ताओं को ऐसी स्क्रीन पर आसानी से नेविगेट करने में परेशानी हो सकती है. नेविगेशन के अनुभव को बेहतर बनाने के लिए, सुलभता से जुड़ी कुछ सेवाएं, सेक्शन या हेडिंग के बीच सीधे तौर पर नेविगेट करने की सुविधा देती हैं. इसे चालू करने के लिए, अपने कॉम्पोनेंट की सिमैंटिक प्रॉपर्टी तय करके बताएं कि वह heading है:
@Composable private fun Subsection(text: String) { Text( text = text, style = MaterialTheme.typography.headlineSmall, modifier = Modifier.semantics { heading() } ) }
सूचनाएं और पॉप अप
अगर आपका कॉम्पोनेंट कोई सूचना या पॉप-अप है, जैसे कि Snackbar, तो हो सकता है कि आप सुलभता सेवाओं को यह बताना चाहें कि उपयोगकर्ताओं को नए स्ट्रक्चर या कॉन्टेंट के अपडेट के बारे में बताया जा सकता है.
चेतावनी जैसे कॉम्पोनेंट को liveRegion सिमैंटिक प्रॉपर्टी के साथ मार्क किया जा सकता है. इससे सुलभता सेवाएं, इस कॉम्पोनेंट या इसके चाइल्ड कॉम्पोनेंट में होने वाले बदलावों के बारे में उपयोगकर्ता को अपने-आप सूचना दे पाती हैं:
PopupAlert( message = "You have a new message", modifier = Modifier.semantics { liveRegion = LiveRegionMode.Polite } )
ज़्यादातर मामलों में, आपको liveRegionMode.Polite का इस्तेमाल करना चाहिए. इससे उपयोगकर्ताओं का ध्यान, स्क्रीन पर दिखने वाली सूचनाओं या अहम कॉन्टेंट में होने वाले बदलावों पर कुछ समय के लिए खींचा जा सकता है.
liveRegion.Assertive का इस्तेमाल कम से कम करें, ताकि आपको खराब फ़ीडबैक न मिले.
इसका इस्तेमाल ऐसी स्थितियों में किया जाना चाहिए जहां उपयोगकर्ताओं को समय के हिसाब से ज़रूरी कॉन्टेंट के बारे में जानकारी देना ज़रूरी हो:
PopupAlert( message = "Emergency alert incoming", modifier = Modifier.semantics { liveRegion = LiveRegionMode.Assertive } )
लाइव रीजन का इस्तेमाल, बार-बार अपडेट होने वाले कॉन्टेंट पर नहीं किया जाना चाहिए. जैसे, काउंटडाउन टाइमर. इससे उपयोगकर्ताओं को लगातार मिलने वाले फ़ीडबैक से बचाया जा सकता है.
विंडो जैसे कॉम्पोनेंट
ModalBottomSheet जैसे विंडो-स्टाइल वाले कस्टम कॉम्पोनेंट को आस-पास के कॉन्टेंट से अलग दिखाने के लिए, अतिरिक्त सिग्नल की ज़रूरत होती है. इसके लिए, paneTitle सिमैंटिक का इस्तेमाल किया जा सकता है, ताकि सुलभता सेवाएं, विंडो या पैनल में होने वाले किसी भी बदलाव को सही तरीके से दिखा सकें. साथ ही, उसकी मुख्य सिमैंटिक जानकारी भी दिखा सकें:
ShareSheet( message = "Choose how to share this photo", modifier = Modifier .fillMaxWidth() .align(Alignment.TopCenter) .semantics { paneTitle = "New bottom sheet" } )
रेफ़रंस के लिए, देखें कि Material 3 अपने कॉम्पोनेंट के लिए paneTitle का इस्तेमाल कैसे करता है.
गड़बड़ी वाले कॉम्पोनेंट
अन्य तरह के कॉन्टेंट के लिए, जैसे कि गड़बड़ी वाले कॉम्पोनेंट, आपको सुलभता सुविधाओं की ज़रूरत वाले उपयोगकर्ताओं के लिए, मुख्य सिमैंटिक जानकारी को ज़्यादा बेहतर तरीके से बताना पड़ सकता है.
गड़बड़ी की स्थितियों के बारे में बताते समय, सुलभता सेवाओं को इसके error सिमैंटिक के बारे में जानकारी दी जा सकती है. साथ ही, गड़बड़ी के बारे में ज़्यादा जानकारी देने वाले मैसेज उपलब्ध कराए जा सकते हैं.
इस उदाहरण में, TalkBack गड़बड़ी की मुख्य जानकारी को पढ़ता है. इसके बाद, वह ज़्यादा जानकारी देता है:
Error( errorText = "Fields cannot be empty", modifier = Modifier .semantics { error("Please add both email and password") } )
प्रोग्रेस ट्रैक करने वाले कॉम्पोनेंट
प्रोग्रेस ट्रैक करने वाले कस्टम कॉम्पोनेंट के लिए, हो सकता है कि आप उपयोगकर्ताओं को उनकी प्रोग्रेस में हुए बदलावों की सूचना देना चाहें. इसमें प्रोग्रेस की मौजूदा वैल्यू, उसकी रेंज, और स्टेप साइज़ शामिल है. ऐसा करने के लिए, progressBarRangeInfo सिमैंटिक का इस्तेमाल करें. इससे यह पक्का होता है कि सुलभता सेवाओं को प्रोग्रेस में होने वाले बदलावों की जानकारी मिले और वे उपयोगकर्ताओं को इसके बारे में अपडेट कर सकें. अलग-अलग सहायक टेक्नोलॉजी में, प्रोग्रेशन के बढ़ने और घटने का संकेत देने के अलग-अलग तरीके भी हो सकते हैं.
ProgressInfoBar( modifier = Modifier .semantics { progressBarRangeInfo = ProgressBarRangeInfo( current = progress, range = 0F..1F ) } )
सूची और आइटम की जानकारी
कई आइटम वाली कस्टम सूचियों और ग्रिड में, सुलभता सेवाओं के लिए ज़्यादा जानकारी पाना मददगार हो सकता है. जैसे, आइटम और इंडेक्स की कुल संख्या.
इस लंबी सूची में, सूची और आइटम पर क्रमशः collectionInfo और collectionItemInfo सिमैंटिक का इस्तेमाल करके, सुलभता सेवाएं उपयोगकर्ताओं को टेक्स्ट के सिमैंटिक की जानकारी के साथ-साथ, यह भी बता सकती हैं कि वे कुल कलेक्शन में से किस आइटम इंडेक्स पर हैं:
MilkyWayList( modifier = Modifier .semantics { collectionInfo = CollectionInfo( rowCount = milkyWay.count(), columnCount = 1 ) } ) { milkyWay.forEachIndexed { index, text -> Text( text = text, modifier = Modifier.semantics { collectionItemInfo = CollectionItemInfo(index, 0, 0, 0) } ) } }
राज्य की जानकारी
कोई कंपोज़ेबल, सिमैंटिक के लिए stateDescription तय कर सकता है. Android फ़्रेमवर्क इसका इस्तेमाल करके, कंपोज़ेबल की स्थिति को पढ़ता है. उदाहरण के लिए, टॉगल किए जा सकने वाले कंपोज़ेबल को "चुना गया" या "नहीं चुना गया" स्थिति में रखा जा सकता है. कुछ मामलों में, हो सकता है कि आपको Compose के इस्तेमाल किए जाने वाले डिफ़ॉल्ट स्टेट ब्यौरे के लेबल को बदलना पड़े. इसके लिए, कंपोज़ेबल को टॉगल करने लायक के तौर पर तय करने से पहले, स्थिति की जानकारी देने वाले लेबल साफ़ तौर पर बताएं:
@Composable private fun TopicItem(itemTitle: String, selected: Boolean, onToggle: () -> Unit) { val stateSubscribed = stringResource(R.string.subscribed) val stateNotSubscribed = stringResource(R.string.not_subscribed) Row( modifier = Modifier .semantics { // Set any explicit semantic properties stateDescription = if (selected) stateSubscribed else stateNotSubscribed } .toggleable( value = selected, onValueChange = { onToggle() } ) ) { /* ... */ } }
कस्टम कार्रवाइयां
कस्टम ऐक्शन का इस्तेमाल, टचस्क्रीन पर किए जाने वाले ज़्यादा मुश्किल जेस्चर के लिए किया जा सकता है. जैसे, खारिज करने के लिए स्वाइप करना या खींचना और छोड़ना. ऐसा इसलिए, क्योंकि मोटर इंपेयरमेंट या अन्य दिव्यांगता वाले उपयोगकर्ताओं को इन जेस्चर का इस्तेमाल करने में परेशानी हो सकती है.
स्वाइप करके खारिज करने के जेस्चर को ज़्यादा सुलभ बनाने के लिए, इसे किसी कस्टम ऐक्शन से लिंक किया जा सकता है. इसके लिए, खारिज करने की कार्रवाई और लेबल को पास करें:
SwipeToDismissBox( modifier = Modifier.semantics { // Represents the swipe to dismiss for accessibility customActions = listOf( CustomAccessibilityAction( label = "Remove article from list", action = { removeArticle() true } ) ) }, state = rememberSwipeToDismissBoxState(), backgroundContent = {} ) { ArticleListItem() }
इसके बाद, TalkBack जैसी सुलभता सेवा, कॉम्पोनेंट को हाइलाइट करती है और बताती है कि इसके मेन्यू में और भी कार्रवाइयां उपलब्ध हैं. यहां स्वाइप करके खारिज करने की कार्रवाई को दिखाया गया है:
कस्टम ऐक्शन का इस्तेमाल, उन आइटम की लंबी सूचियों के लिए भी किया जाता है जिनमें ज़्यादा ऐक्शन उपलब्ध होते हैं. ऐसा इसलिए, क्योंकि उपयोगकर्ताओं के लिए हर आइटम के लिए हर ऐक्शन को अलग-अलग दोहराना मुश्किल हो सकता है:
नेविगेशन के अनुभव को बेहतर बनाने के लिए, कंटेनर पर कस्टम ऐक्शन का इस्तेमाल किया जा सकता है. इससे ऐक्शन को अलग-अलग ट्रैवर्सल से बाहर निकालकर, एक अलग ऐक्शन मेन्यू में ले जाया जा सकता है. यह सुविधा, इंटरैक्शन पर आधारित सहायक टेक्नोलॉजी के लिए खास तौर पर मददगार होती है. जैसे, बटन से ऐक्सेस करें या Voice Access:
ArticleListItemRow( modifier = Modifier .semantics { customActions = listOf( CustomAccessibilityAction( label = "Open article", action = { openArticle() true } ), CustomAccessibilityAction( label = "Add to bookmarks", action = { addToBookmarks() true } ), ) } ) { Article( modifier = Modifier.clearAndSetSemantics { }, onClick = openArticle, ) BookmarkButton( modifier = Modifier.clearAndSetSemantics { }, onClick = addToBookmarks, ) }
इन मामलों में, clearAndSetSemantics मॉडिफ़ायर का इस्तेमाल करके, ओरिजनल चाइल्ड सिमैंटिक को मैन्युअल तरीके से मिटाना न भूलें. ऐसा इसलिए, क्योंकि उन्हें कस्टम ऐक्शन में ले जाया जा रहा है.
उदाहरण के लिए, बटन से ऐक्सेस करने की सुविधा का इस्तेमाल करने पर, कंटेनर को चुनने के बाद उसका मेन्यू खुलता है. इसमें, नेस्ट की गई कार्रवाइयों की सूची दिखती है:
सिमैंटिक ट्री
कंपोज़िशन, आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के बारे में बताता है. इसे कंपोज़ेबल चलाकर बनाया जाता है. कंपोज़िशन, ट्री-स्ट्रक्चर होता है. इसमें कंपोज़ेबल होते हैं, जो आपके यूज़र इंटरफ़ेस (यूआई) के बारे में बताते हैं.
कंपोज़िशन के बगल में, एक पैरलल ट्री मौजूद होता है. इसे सिमैंटिक्स ट्री कहा जाता है. यह ट्री, आपके यूज़र इंटरफ़ेस (यूआई) को एक अलग तरीके से दिखाता है. इसे सुलभता सेवाओं और टेस्टिंग फ़्रेमवर्क के लिए समझा जा सकता है. सुलभता सेवाएं, ट्री का इस्तेमाल करके उन उपयोगकर्ताओं को ऐप्लिकेशन के बारे में बताती हैं जिन्हें खास ज़रूरत होती है. टेस्टिंग फ़्रेमवर्क, आपके ऐप्लिकेशन के साथ इंटरैक्ट करने और उसके बारे में दावे करने के लिए, ट्री का इस्तेमाल करता है. सिमैंटिक ट्री में, कंपोज़ेबल को ड्रॉ करने के तरीके की जानकारी नहीं होती. हालांकि, इसमें कंपोज़ेबल के सिमैंटिक मतलब की जानकारी होती है.
अगर आपके ऐप्लिकेशन में Compose फ़ाउंडेशन और मटीरियल लाइब्रेरी के कंपोज़ेबल और मॉडिफ़ायर शामिल हैं, तो सेमैंटिक ट्री अपने-आप भर जाता है और जनरेट हो जाता है. हालांकि, कस्टम लो-लेवल कंपोज़ेबल जोड़ते समय, आपको मैन्युअल तरीके से इसके सिमैंटिक उपलब्ध कराने होंगे. ऐसा भी हो सकता है कि आपका ट्री, स्क्रीन पर मौजूद एलिमेंट के मतलब को सही तरीके से या पूरी तरह से न दिखाए. ऐसे में, ट्री में बदलाव किया जा सकता है.
उदाहरण के लिए, इस कस्टम कैलेंडर कंपोज़ेबल को देखें:
इस उदाहरण में, पूरे कैलेंडर को एक लो-लेवल कंपोज़ेबल के तौर पर लागू किया गया है. इसके लिए, Layout कंपोज़ेबल का इस्तेमाल किया गया है और सीधे Canvas पर ड्रॉ किया गया है.
अगर आपने कुछ और नहीं किया, तो सुलभता सेवाओं को कंपोज़ेबल के कॉन्टेंट और कैलेंडर में उपयोगकर्ता के चुने गए विकल्प के बारे में ज़रूरी जानकारी नहीं मिलेगी. उदाहरण के लिए, अगर कोई उपयोगकर्ता 17 तारीख वाले दिन पर क्लिक करता है, तो सुलभता फ़्रेमवर्क को सिर्फ़ पूरे कैलेंडर कंट्रोल की जानकारी मिलती है. इस मामले में, TalkBack सुलभता सेवा "Calendar" या इससे थोड़ा बेहतर "अप्रैल का कैलेंडर" की सूचना देगी. इससे उपयोगकर्ता को यह पता नहीं चल पाएगा कि कौनसा दिन चुना गया है. इस कंपोज़ेबल को ज़्यादा सुलभ बनाने के लिए, आपको सिमैंटिक जानकारी को मैन्युअल तरीके से जोड़ना होगा.
मर्ज किया गया और अनमर्ज किया गया ट्री
जैसा कि पहले बताया गया है, यूज़र इंटरफ़ेस (यूआई) ट्री में मौजूद हर कंपोज़ेबल में, सिमैंटिक प्रॉपर्टी सेट हो सकती हैं या नहीं भी. जब किसी कंपोज़ेबल में कोई सिमैंटिक प्रॉपर्टी सेट नहीं होती है, तो उसे सिमैंटिक ट्री में शामिल नहीं किया जाता है. इस तरह, सिमैंटिक ट्री में सिर्फ़ वे नोड शामिल होते हैं जिनमें असल में सिमैंटिक जानकारी होती है. हालांकि, कभी-कभी स्क्रीन पर दिख रहे कॉन्टेंट का सही मतलब समझाने के लिए, नोड के कुछ सब-ट्री को मर्ज करना और उन्हें एक ही नोड के तौर पर इस्तेमाल करना भी मददगार होता है. इस तरह, हर डिसेंडेंट नोड को अलग-अलग मैनेज करने के बजाय, नोड के सेट को एक साथ मैनेज किया जा सकता है. आम तौर पर, इस ट्री में मौजूद हर नोड, सुलभता सेवाओं का इस्तेमाल करते समय फ़ोकस किए जा सकने वाले एलिमेंट को दिखाता है.
Button, ऐसे कंपोज़ेबल का एक उदाहरण है. किसी बटन को एक एलिमेंट के तौर पर माना जा सकता है. भले ही, उसमें कई चाइल्ड नोड शामिल हों:
Button(onClick = { /*TODO*/ }) { Icon( imageVector = Icons.Filled.Favorite, contentDescription = null ) Spacer(Modifier.size(ButtonDefaults.IconSpacing)) Text("Like") }
सिमैंटिक ट्री में, बटन के डिसेंडेंट की प्रॉपर्टी मर्ज हो जाती हैं. साथ ही, बटन को ट्री में एक लीफ़ नोड के तौर पर दिखाया जाता है:
कंपोज़ेबल और मॉडिफ़ायर, Modifier.semantics
(mergeDescendants = true) {} को कॉल करके यह बता सकते हैं कि उन्हें अपने डिसेंडेंट की सिमैंटिक प्रॉपर्टी को मर्ज करना है. इस प्रॉपर्टी को true पर सेट करने का मतलब है कि सिमैंटिक प्रॉपर्टी को मर्ज किया जाना चाहिए. Button के उदाहरण में, Button कंपोज़ेबल, इंटरनल तौर पर clickable मॉडिफ़ायर का इस्तेमाल करता है. इसमें यह semantics मॉडिफ़ायर शामिल होता है. इसलिए, बटन के डिसेंडेंट नोड मर्ज कर दिए जाते हैं.
सुलभता से जुड़े दस्तावेज़ पढ़कर, इस बारे में ज़्यादा जानें कि आपको अपने कंपोज़ेबल में मर्ज करने के तरीके में बदलाव कब करना चाहिए.
Foundation और Material Compose लाइब्रेरी में मौजूद कई मॉडिफ़ायर और कंपोज़ेबल में, यह प्रॉपर्टी सेट होती है. उदाहरण के लिए, clickable और toggleable मॉडिफ़ायर, अपने डिसेंडेंट को अपने-आप मर्ज कर देंगे. साथ ही, ListItem कंपोज़ेबल, अपने डिसेंडेंट को मर्ज कर देगा.
पेड़ की जांच करें
सिमैंटिक ट्री, असल में दो अलग-अलग ट्री होते हैं. एक मर्ज किया गया सिमैंटिक ट्री होता है. यह डिसेंडेंट नोड को तब मर्ज करता है, जब mergeDescendants को true पर सेट किया जाता है.
एक अनमर्ज किया गया सिमैंटिक ट्री भी होता है. इसमें मर्ज करने की प्रोसेस लागू नहीं होती, लेकिन हर नोड को बरकरार रखा जाता है. सुलभता सेवाएं, अनमर्ज किए गए ट्री का इस्तेमाल करती हैं और मर्ज करने के अपने एल्गोरिदम लागू करती हैं. इसके लिए, वे mergeDescendants प्रॉपर्टी को ध्यान में रखती हैं. टेस्टिंग फ़्रेमवर्क, डिफ़ॉल्ट रूप से मर्ज किए गए ट्री का इस्तेमाल करता है.
printToLog() तरीके का इस्तेमाल करके, दोनों ट्री की जांच की जा सकती है. डिफ़ॉल्ट रूप से, मर्ज किए गए ट्री को लॉग किया जाता है. ऐसा पिछले उदाहरणों में भी किया गया है. इसके बजाय, अनमर्ज किए गए ट्री को प्रिंट करने के लिए, onRoot() मैचर के useUnmergedTree पैरामीटर को true पर सेट करें:
composeTestRule.onRoot(useUnmergedTree = true).printToLog("MY TAG")
लेआउट इंस्पेक्टर की मदद से, मर्ज किए गए और मर्ज नहीं किए गए, दोनों तरह के सिमैंटिक ट्री को दिखाया जा सकता है. इसके लिए, व्यू फ़िल्टर में जाकर अपनी पसंद का विकल्प चुनें:
लेआउट इंस्पेक्टर, आपके ट्री के हर नोड के लिए, मर्ज किए गए सिमैंटिक और प्रॉपर्टी पैनल में उस नोड पर सेट किए गए सिमैंटिक, दोनों दिखाता है:
डिफ़ॉल्ट रूप से, टेस्टिंग फ़्रेमवर्क में मौजूद मैचर, मर्ज किए गए सिमैंटिक ट्री का इस्तेमाल करते हैं.
इसलिए, Button में मौजूद टेक्स्ट को मैच करके, उससे इंटरैक्ट किया जा सकता है:
composeTestRule.onNodeWithText("Like").performClick()
मैचर के useUnmergedTree पैरामीटर को true पर सेट करके, इस व्यवहार को बदला जा सकता है. ऐसा onRoot मैचर की तरह किया जा सकता है.
ट्री को अडैप्ट करना
जैसा कि पहले बताया गया है, कुछ सिमैंटिक प्रॉपर्टी को बदला या मिटाया जा सकता है. इसके अलावा, ट्री को मर्ज करने के तरीके में भी बदलाव किया जा सकता है. यह खास तौर पर तब ज़रूरी हो जाता है, जब आपको पसंद के मुताबिक कॉम्पोनेंट बनाने हों. सही प्रॉपर्टी और मर्ज करने का तरीका सेट किए बिना, हो सकता है कि आपका ऐप्लिकेशन ऐक्सेस न किया जा सके. साथ ही, हो सकता है कि टेस्ट आपकी उम्मीद के मुताबिक काम न करें. अगर आपको टेस्टिंग के बारे में ज़्यादा जानना है, तो टेस्टिंग गाइड देखें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर, लिंक टेक्स्ट दिखता है
- Compose में सुलभता सुविधा
- Compose में मटीरियल डिज़ाइन 2
- Compose लेआउट की जांच करना