النصوص في تطبيقات التواصل الاجتماعي والمراسلة

يُعد النص جزءًا أساسيًا من التطبيقات الاجتماعية، حيث يشارك المستخدمون الأفكار ويعبّرون عن والعواطف وسرد القصص. يستكشف هذا المستند كيفية التعامل مع النصوص بفعالية، مع التركيز على الرموز التعبيرية والتصميم ودمج المحتوى الوافي.

استخدام الرموز التعبيرية

أصبحت رموز الإيموجي جزءًا لا يتجزأ من أسلوب التواصل الحديث، خاصةً في تطبيقات التواصل الاجتماعي والمراسلة. وتتجاوز هذه الرموز الحواجز اللغوية، ما يتيح للمستخدمين expressed emotions and ideas quickly and effectively.

إتاحة الرموز التعبيرية في ميزة Compose

تعمل Jetpack Compose، وهي مجموعة أدوات حديثة لواجهة المستخدم من Android، على تبسيط الرموز التعبيرية مناولة:

• الإدخال: يتيح المكوِّن TextField في الأساس إدخال الرموز التعبيرية.
• العرض: يعرض مكوّن Text في ميزة "الإنشاء" الرموز التعبيرية بشكل صحيح، ما يؤدي إلى ضمان ظهورها بشكل متسق على جميع الأجهزة والمنصات التي توفّر مقدّمًا للخطوط القابلة للتنزيل ومتوافقًا مع emoji2، مثل الأجهزة التي تعمل باستخدام خدمات Google Play.

يتناول القسم عرض الرموز التعبيرية عرض الرموز التعبيرية في Jetpack Compose، بما في ذلك كيفية التأكّد من أنّ تطبيقك يعرض أحدث خطوط الرموز التعبيرية، وكيفية التأكد من أنّ الرموز التعبيرية تعمل بشكل صحيح إذا كان تطبيقك يستخدم كلّ من Views وCompose في النشاط نفسه، وكيفية تحديد المشاكل وحلّها في حال عدم ظهور الرموز التعبيرية على النحو المتوقّع.

إتاحة الرموز التعبيرية في بانوراميات

إذا كنت تستخدم بانوراميات Android، يوفر لك الإصدار 1.4 من مكتبة AppCompat أو الإصدارات الأحدث إتاحة الرموز التعبيرية للفئات الفرعية للنظام الأساسي TextView:

• الإدخال: يتوافق إصدار AppCompat من EditText في الأصل مع الرموز التعبيرية إدخال.
• الشبكة الإعلانية: إصدارات AppCompat من إصدارات TextView وToggleButton Switch، وButton، وCheckedTextView، وRadioButton، CheckBox وAutoCompleteTextView و MultiAutoCompleteTextView تتيح كل الغرف عرض الرموز التعبيرية، ما يضمن اتّساقها. ظهورها عبر الأجهزة والأنظمة الأساسية التي توفر رمزًا تعبيريًا متوافقًا خطوط قابلة للتنزيل مثل الأجهزة خدمات Google Play.

إذا كنت تنشئ عرضًا مخصّصًا يمثّل فئة فرعية مباشرة أو غير مباشرة من TextView، يمكنك توسيع نطاق تنفيذ AppCompat (بدلاً من تنفيذ منصّة IDE) للحصول على ميزة رموز الإيموجي المضمّنة. عروض إتاحة الرموز التعبيرية الحديثة طريقة اختبار عملية دمج الرموز التعبيرية وتحديد المشاكل وحلّها، إتاحة استخدام الرموز التعبيرية بدون AppCompat وإتاحة الرموز التعبيرية في طرق العرض المخصصة وإتاحة الخطوط البديلة ومقدمي الخدمات والمزيد.

استخدام "أداة اختيار الرموز التعبيرية"

أداة اختيار رموز الإيموجي Jetpack هي أحد عرض Android الذي يوفّر قائمة مصنفة من الرموز التعبيرية، والمتغيرات الثابتة، وإمكانية الاستخدام مؤخرًا الرموز التعبيرية — متوافقة مع العديد من إصدارات وأجهزة Android. وهي طريقة سهلة لتحسين عملية دمج رموز الإيموجي في تطبيقك.

ابدأ باستيراد المكتبة في build.gradle.

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

استخدام "أداة اختيار الرموز التعبيرية" مع ميزة "إنشاء"

يمكنك إنشاء "أداة اختيار الرموز التعبيرية" في نافذة Compose باستخدام AndroidView. قابل للإنشاء. يتضمّن هذا المقتطف مستمعًا يُعلمك عند اختيار رمز تعبيري:

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)
}

استخدام "أداة اختيار الرموز التعبيرية" مع بانوراميات

تعمل "أداة اختيار الرموز التعبيرية" أيضًا بشكل جيد مع بانوراميات.

تضخيم Emoji PickerView يمكنك بشكل اختياري تعيين iconGridcolumns iconGridROWS بناءً على الحجم المطلوب لكل خلية رمز تعبيري.

<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)
}

قدِّم مستمعًا إلى الإيموجي الذي اخترته واستخدمه لإلحاق الأحرف 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
        ),
    ),
)

إضافة أنماط متعددة في النص

يمكنك ضبط أنماط مختلفة ضمن العنصر القابل للتجميع Text نفسه باستخدام AnnotatedString.

تتوفّر في 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. بما في ذلك إضافة ظل وتصميم متقدّم باستخدام فرشاة التعتيم:

تنسيق النص في "المشاهدات"

باستخدام "العروض"، يمكنك الاعتماد على الأنماط والمظاهر للحفاظ على أسلوب خط متسق. عرض الأنماط والمظاهر لمزيد من المعلومات حول كيفية تطبيق المظاهر المخصّصة على مرات المشاهدة في تطبيقك. إذا كنت تريد تعيين أنماط مختلفة داخل نص واحد عرض، راجع الامتدادات لمزيد من المعلومات حول كيفية تغيير النص في مجموعة متنوعة من الطرق، بما في ذلك إضافة لون، وجعل النص قابلاً للنقر، وتغيير الحجم حجم النص، ورسم النص بطريقة مخصّصة.

إتاحة لوحات مفاتيح الصور والمحتوى التفاعلي الآخر

غالبًا ما يريد المستخدمون التواصل باستخدام الملصقات والصور المتحركة وأنواع أخرى من المحتوى المفيد. لتسهيل حصول التطبيقات على محتوى غني، يوفّر الإصدار 12 من Android (المستوى 31 من واجهة برمجة التطبيقات) واجهة برمجة تطبيقات موحّدة تتيح لتطبيقك قبول المحتوى من أي مصدر: الحافظة أو لوحة المفاتيح أو السحب والإفلات. للحصول على توافق مع الإصدارات السابقة من Android (الإصدار 14 من واجهة برمجة التطبيقات حاليًا)، ننصحك باستخدام إصدار Android Jetpack (AndroidX) من واجهة برمجة التطبيقات هذه.

يمكنك إرفاق OnReceiveContentListener بمكونات واجهة المستخدم والحصول على callback عند إدراج المحتوى من خلال أي آلية. يصبح الإجراء المُعاد الاتصال به هو المكان الوحيد الذي يمكن لرمزك البرمجي من خلاله معالجة تلقّي كل المحتوى، بدءًا من النص العادي والمُنمَّط إلى العلامات والصور والفيديوهات والملفات الصوتية وغيرها.

اطّلِع على مقالة تلقّي محتوى غني للتعرّف على مزيد من المعلومات عن كيفية تفعيل هذه الميزة في تطبيقك. يتضمّن Jetpack Compose الآن المُعدِّلات dragAndDropSource و dragAndDropTarget لتبسيط تنفيذ ميزة السحب والإفلات داخل تطبيقك وبين التطبيقات الأخرى.