Jetpack Compose, Text में बारीकी से इंटरैक्टिविटी की सुविधा देता है. टेक्स्ट चुनने की सुविधा अब ज़्यादा सुविधाजनक हो गई है. साथ ही, इसे कंपोज़ेबल लेआउट में भी इस्तेमाल किया जा सकता है. टेक्स्ट में उपयोगकर्ता के इंटरैक्शन, कंपोज़ किए जा सकने वाले अन्य लेआउट से अलग होते हैं. ऐसा इसलिए, क्योंकि Text कंपोज़ेबल के किसी हिस्से में मॉडिफ़ायर नहीं जोड़ा जा सकता. इस पेज पर उन एपीआई के बारे में बताया गया है जो उपयोगकर्ता के इंटरैक्शन को चालू करते हैं.
टेक्स्ट चुनें
डिफ़ॉल्ट रूप से, कंपोज़ेबल को चुना नहीं जा सकता. इसका मतलब है कि उपयोगकर्ता आपके ऐप्लिकेशन से टेक्स्ट को चुन और कॉपी नहीं कर सकते. टेक्स्ट चुनने की सुविधा चालू करने के लिए, अपने टेक्स्ट एलिमेंट को SelectionContainer कंपोज़ेबल के साथ रैप करें:
@Composable fun SelectableText() { SelectionContainer { Text("This text is selectable") } }
ऐसा हो सकता है कि आपको चुने जा सकने वाले किसी हिस्से के कुछ हिस्सों पर, चुनने की सुविधा बंद करनी हो. इसके लिए, आपको चुने न जा सकने वाले हिस्से को DisableSelection कंपोज़ेबल के साथ रैप करना होगा:
@Composable fun PartiallySelectableText() { SelectionContainer { Column { Text("This text is selectable") Text("This one too") Text("This one as well") DisableSelection { Text("But not this one") Text("Neither this one") } Text("But again, you can select this one") Text("And this one too") } } }
LinkAnnotation की मदद से, टेक्स्ट के क्लिक किए जा सकने वाले सेक्शन बनाना
Text पर क्लिक को सुनने के लिए, clickable मॉडिफ़ायर को जोड़ा जा सकता है. हालांकि, हो सकता है कि आप Text वैल्यू के किसी हिस्से में अतिरिक्त जानकारी अटैच करना चाहें. जैसे, किसी शब्द से अटैच किया गया यूआरएल, ताकि उसे ब्राउज़र में खोला जा सके. ऐसे मामलों में, आपको LinkAnnotation का इस्तेमाल करना होगा. यह एक एनोटेशन है, जो टेक्स्ट के क्लिक किए जा सकने वाले हिस्से को दिखाता है.
LinkAnnotation की मदद से, Text कंपोज़ेबल के किसी हिस्से में यूआरएल अटैच किया जा सकता है. यह यूआरएल, क्लिक करने पर अपने-आप खुल जाता है. इसके बारे में यहां दिए गए स्निपेट में बताया गया है:
@Composable fun AnnotatedStringWithLinkSample() { // Display multiple links in the text Text( buildAnnotatedString { append("Go to the ") withLink( LinkAnnotation.Url( "https://developer.android.com/", TextLinkStyles(style = SpanStyle(color = Color.Blue)) ) ) { append("Android Developers ") } append("website, and check out the") withLink( LinkAnnotation.Url( "https://developer.android.com/jetpack/compose", TextLinkStyles(style = SpanStyle(color = Color.Green)) ) ) { append("Compose guidance") } append(".") } ) }
Text कंपोज़ेबल के किसी हिस्से पर उपयोगकर्ता के क्लिक करने पर, कस्टम ऐक्शन को भी कॉन्फ़िगर किया जा सकता है. यहां दिए गए स्निपेट में, जब उपयोगकर्ता “Jetpack Compose” पर क्लिक करता है, तो एक लिंक दिखता है. अगर उपयोगकर्ता उस लिंक पर क्लिक करता है, तो मेट्रिक लॉग की जाती हैं:
@Composable fun AnnotatedStringWithListenerSample() { // Display a link in the text and log metrics whenever user clicks on it. In that case we handle // the link using openUri method of the LocalUriHandler val uriHandler = LocalUriHandler.current Text( buildAnnotatedString { append("Build better apps faster with ") val link = LinkAnnotation.Url( "https://developer.android.com/jetpack/compose", TextLinkStyles(SpanStyle(color = Color.Blue)) ) { val url = (it as LinkAnnotation.Url).url // log some metrics uriHandler.openUri(url) } withLink(link) { append("Jetpack Compose") } } ) }
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर, लिंक टेक्स्ट दिखता है
- Compose में सिमैंटिक
- Compose में सुलभता सुविधा
- Compose में मटीरियल डिज़ाइन 2