सोशल मीडिया और मैसेजिंग ऐप्लिकेशन में मौजूद टेक्स्ट

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

इमोजी के साथ काम करना

इमोजी, आधुनिक बातचीत का एक अहम हिस्सा बन गए हैं. खास तौर पर, सोशल मीडिया और मैसेजिंग ऐप्लिकेशन में. इमोजी की मदद से, भाषा की समस्याओं को आसानी से हल किया जा सकता है. साथ ही, इमोजी की मदद से उपयोगकर्ता अपनी भावनाओं और विचारों को तेज़ी से और असरदार तरीके से दिखा सकते हैं.

'लिखें' सुविधा में इमोजी इस्तेमाल करने की सुविधा

Jetpack Compose, Android का एलान वाले यूआई टूलकिट की नई सुविधा है. यह इमोजी को इस्तेमाल करना आसान बनाती है हैंडलिंग:

• इनपुट: TextField कॉम्पोनेंट, मूल रूप से इमोजी इनपुट के साथ काम करता है.
• डिसप्ले: लिखने का Text कॉम्पोनेंट, इमोजी को सही तरीके से रेंडर करता है, यह पक्का करना कि वे सभी डिवाइसों और प्लैटफ़ॉर्म पर एक जैसे दिखें. इमोजी2 के साथ काम करने वाले, डाउनलोड किए जा सकने वाले फ़ॉन्ट की सेवा देने वाले ऐप्लिकेशन, जैसे कि डिवाइस Google Play services.

डिसप्ले इमोजी में Jetpack Compose में इमोजी दिखाने का विकल्प शामिल है. इसमें इमोजी को दिखाने का तरीका भी शामिल है यह पक्का करें कि आपके ऐप्लिकेशन में इमोजी वाले नए फ़ॉन्ट दिखाए गए हों. यह भी पक्का करें कि ठीक से काम कर सकता है, अगर आपका ऐप्लिकेशन एक ही गतिविधि में व्यू और कंपोज़ करें, साथ ही, इमोजी न दिखने की समस्या को कैसे हल करें.

व्यू में इमोजी का इस्तेमाल करना

अगर Android व्यू का इस्तेमाल किया जा रहा है, तो AppCompat लाइब्रेरी के 1.4 या उसके बाद के वर्शन में, TextView के प्लैटफ़ॉर्म सबक्लास के लिए इमोजी की सुविधा मिलती है:

• इनपुट: EditText का AppCompat वर्शन, इमोजी इनपुट की सुविधा के साथ काम करता है.
• डिसप्ले: TextView, ToggleButton, Switch, Button, CheckedTextView, RadioButton, CheckBox, AutoCompleteTextView, और MultiAutoCompleteTextView के AppCompat वर्शन, इमोजी डिसप्ले के साथ काम करते हैं. इससे यह पक्का होता है कि Google Play services से चलने वाले डिवाइसों जैसे, इमोजी 2 के साथ काम करने वाले डाउनलोड किए जा सकने वाले फ़ॉन्ट उपलब्ध कराने वाले सभी डिवाइसों और प्लैटफ़ॉर्म पर इमोजी एक जैसा दिखे.

अगर TextView का डायरेक्ट या इनडायरेक्ट सबक्लास वाला कस्टम व्यू बनाया जा रहा है, तो इमोजी की सुविधा पहले से उपलब्ध कराने के लिए, प्लैटफ़ॉर्म के बजाय AppCompat लागू करें. ऐप्लिकेशन को नए इमोजी के मुताबिक बनाने का तरीका बताने वाली गाइड में, इमोजी इंटिग्रेशन की जांच करने और उससे जुड़ी समस्या हल करने का तरीका बताया गया है. साथ ही, इसमें AppCompat के बिना इमोजी इस्तेमाल करने, कस्टम व्यू में इमोजी इस्तेमाल करने, अन्य फ़ॉन्ट या फ़ॉन्ट उपलब्ध कराने वाली सेवाओं का इस्तेमाल करने वगैरह के बारे में भी बताया गया है.

इमोजी पिकर का इस्तेमाल करना

Jetpack इमोजी पिकर एक Android View है जो इमोजी, स्टिकी वैरिएंट, और हाल ही में इस्तेमाल की जाने वाली सहायता की कैटगरी की सूची इमोजी — Android के कई वर्शन और डिवाइसों पर काम करता है. यह आसान है के ज़रिए अपने ऐप्लिकेशन के इमोजी इंटिग्रेशन को बेहतर बनाया जा सकता है.

build.gradle में लाइब्रेरी इंपोर्ट करके शुरुआत करें.

dependencies {
   implementation("androidx.emoji2:emojipicker:$version")
}

लिखने के दौरान इमोजी पिकर का इस्तेमाल करना

आपने AndroidView का इस्तेमाल करके, Compose में इमोजी पिकर बनाया है कंपोज़ेबल. इस स्निपेट में एक लिसनर शामिल है, जिससे आपको यह पता चलता है कि कोई इमोजी चुना गया है या नहीं:

AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { context ->
        val emojiPickerView = EmojiPickerView(context)
        emojiPickerView.setOnEmojiPickedListener(this::updateTextField)
        emojiPickerView
    },
)

Compose 1.7 में BasicTextField के लिए कई नई सुविधाएं जोड़ी गई हैं. इनमें TextFieldState के लिए सहायता भी शामिल है, जो आपके ViewModel में काम कर सकती है:

private val emojiTextFieldState = TextFieldState()

@Composable fun EmojiTextField() {
    BasicTextField(
        state = emojiTextFieldState,
    )
}

कर्सर की जगह पर टेक्स्ट डालने या चुने गए टेक्स्ट को बदलने के लिए, TextFieldState का इस्तेमाल किया जा सकता है. ऐसा करने पर, आपको ऐसा लगेगा जैसे आपने IME में टाइप किया है:

private fun insertStringAsIfTyping(textFieldState: TextFieldState, string: String) {
    textFieldState.edit {
        replace(selection.start, selection.end, string)
        // clear selection on replace if necessary
        if (hasSelection) selection = TextRange(selection.end)
    }
}

कॉलबैक, हेल्पर फ़ंक्शन का इस्तेमाल करके BasicTextField को अपडेट कर सकता है:

private fun updateTextField(emojiViewItem: EmojiViewItem) {
    insertStringAsIfTyping(emojiTextFieldState, emojiViewItem.emoji)
}

इमोजी पिकर को व्यू के साथ इस्तेमाल करना

इमोजी पिकर, व्यू के साथ भी अच्छी तरह से काम करता है.

EmojiPickerView को इनफ्लेट करें. वैकल्पिक तौर पर, इमोजी ग्रिड कॉलम सेट करें और हर इमोजी सेल के लिए तय किए गए साइज़ के आधार पर इमोजी ग्रिड पंक्तियां.

<androidx.emoji2.emojipicker.EmojiPickerView
    …
    app:emojiGridColumns="9" />

कर्सर की जगह पर कोई वर्ण डालें या चुने गए टेक्स्ट को बदलें:

// Consider unregistering/reregistering anyTextWatcher that you might have as part of this
private fun insertStringAsIfTyping(editText: EditText, string: String) {
    val stringBuffer = StringBuffer(editText.text.toString())
    val index = editText.selectionStart
    if ( !editText.hasSelection() ) {
        stringBuffer.insert(index, string)
    } else {
        stringBuffer.replace(index, editText.selectionEnd, string)
    }
    editText.setText(stringBuffer.toString())
    editText.setSelection(index + string.length)
}

चुने गए इमोजी के लिए एक listener दें और इसका इस्तेमाल करके EditText में वर्ण जोड़ें.

// a listener example
emojiPickerView.setOnEmojiPickedListener {
   val editText = findViewById<EditText>(R.id.edit_text)
   insertStringAsIfTyping(editText, it.emoji)
}

टेक्स्ट की स्टाइल बदलना

टेक्स्ट में विज़ुअल अंतर लागू करके, जैसे कि फ़ॉन्ट स्टाइल, साइज़, वेट, करने के लिए, आपके सोशल मीडिया ऐप्लिकेशन या मैसेजिंग ऐप्लिकेशन के यूज़र इंटरफ़ेस का आकर्षण. टेक्स्ट स्टाइल से जुड़ी सहायता उपयोगकर्ता, जानकारी को तेज़ी से पार्स करते हैं. साथ ही, और ज़रूरी एलिमेंट की पहचान करने के लिए किया जा सकता है.

Compose में टेक्स्ट की स्टाइल तय करना

Text कंपोज़ेबल में स्टाइल के ढेरों विकल्प मौजूद हैं, जिनमें ये शामिल हैं:

• टेक्स्ट का रंग: टेक्स्ट को हाइलाइट करने के लिए, Color सेट करें.
• फ़ॉन्ट का साइज़: सही स्केल पर इस्तेमाल करने के लिए FontSize को कंट्रोल करें.
• फ़ॉन्ट स्टाइल: टेक्स्ट को इटैलिक करने के लिए, FontStyle का इस्तेमाल करें.
• फ़ॉन्ट का वज़न: बोल्ड, लाइट वगैरह टेक्स्ट के वैरिएशन के लिए, FontWeight में बदलाव करें.
• फ़ॉन्ट फ़ैमिली: सही फ़ॉन्ट चुनने के लिए, FontFamily का इस्तेमाल करें.

Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

इसका इस्तेमाल करके, अपने ऐप्लिकेशन में स्टाइल के इन विकल्पों को लगातार सेट किया जा सकता है थीम.

MaterialTheme(
    // This theme would include Color.Blue (as appropriate for dark and light themes)
    colorScheme = colorScheme,
    content = content,
    typography = Typography(
        titleLarge = TextStyle(
            fontSize = 18.sp,
            fontFamily = titleFont,
            fontWeight = FontWeight.Bold
        ),
    ),
)

टेक्स्ट में एक से ज़्यादा स्टाइल जोड़ना

AnnotatedString का इस्तेमाल करके, एक ही Text कॉम्पोज़ेबल में अलग-अलग स्टाइल सेट किए जा सकते हैं.

AnnotatedString में टाइप-सेफ़ बिल्डर, buildAnnotatedString है, ताकि इसे आसानी से बनाया जा सके.

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("M")
            }
            append("y ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("S")
            }
            append("tyle")
        }
    )
}

Compose में टेक्स्ट की स्टाइल बनाने के बारे में ज़्यादा जानने के लिए, टेक्स्ट की स्टाइल बनाएं लेख पढ़ें. इसमें, शैडो जोड़ना, ब्रश की मदद से बेहतर स्टाइल बनाना, और ओपैसिटी के बारे में बताया गया है.

व्यू में टेक्स्ट की स्टाइल तय करना

व्यू के साथ, एक जैसी टाइपोग्राफ़ी के लिए स्टाइल और थीम का इस्तेमाल करें. अपने ऐप्लिकेशन के व्यू के लिए पसंद के मुताबिक थीम लागू करने के तरीके के बारे में ज़्यादा जानने के लिए, स्टाइल और थीम देखें. अगर आपको एक ही टेक्स्ट व्यू में अलग-अलग स्टाइल सेट करनी हैं, तो स्पैन देखें. इससे आपको टेक्स्ट को अलग-अलग तरीकों से बदलने के बारे में ज़्यादा जानकारी मिलेगी. जैसे, रंग जोड़ना, टेक्स्ट को क्लिक करने लायक बनाना, टेक्स्ट साइज़ को स्केल करना, और पसंद के मुताबिक टेक्स्ट बनाना.

इमेज कीबोर्ड और अन्य रिच कॉन्टेंट के साथ काम करना

उपयोगकर्ता अक्सर स्टिकर, ऐनिमेशन, और दूसरे तरह के बेहतर कॉन्टेंट का इस्तेमाल करके बातचीत करना चाहते हैं. ऐप्लिकेशन को रिच कॉन्टेंट पाने में आसानी हो, इसके लिए Android 12 (एपीआई लेवल 31) में एक यूनिफ़ाइड एपीआई जोड़ा गया है. इसकी मदद से, आपका ऐप्लिकेशन क्लिपबोर्ड, कीबोर्ड या खींचकर छोड़ने जैसे किसी भी सोर्स से कॉन्टेंट स्वीकार कर सकता है. हमारा सुझाव है कि आप इस एपीआई के Android Jetpack (AndroidX) वर्शन का इस्तेमाल करें, ताकि यह Android के पुराने वर्शन (फ़िलहाल, एपीआई लेवल 14 तक) के साथ काम कर सके.

यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट में OnReceiveContentListener अटैच किया जाता है. साथ ही, किसी भी तरीके से कॉन्टेंट डालने पर आपको कॉलबैक मिलता है. कॉलबैक आपके कोड के लिए एक ही जगह, जहां से सादे और मार्कअप, इमेज, वीडियो, ऑडियो फ़ाइलों वगैरह के लिए टेक्स्ट को स्टाइल करना.

में सहायता देने के तरीके के बारे में ज़्यादा जानने के लिए, रिच कॉन्टेंट पाएं देखें आपका ऐप्लिकेशन. Jetpack Compose में अब dragAndDropSource और dragAndDropTarget मॉडिफ़ायर का इस्तेमाल करके, खींचें और छोड़ें बटन की प्रोसेस को आसानी से लागू करना आपके ऐप्लिकेशन के अंदर और दूसरे ऐप्लिकेशन के बीच में.