טקסט באפליקציות של רשתות חברתיות והודעות

טקסט הוא הלב של היישומים החברתיים, שבהם משתמשים משתפים מחשבות, מביעים רגשות ולספר סיפורים. במסמך הזה נסביר איך לעבוד עם טקסט בצורה יעילה, תוך התמקדות בשימוש באמוג'י, בסגנון ובשילוב של תוכן עשיר.

עבודה עם אמוג'י

אמוג'י הפכו לחלק בלתי נפרד מתקשורת מודרנית, במיוחד באפליקציות חברתיות ובאפליקציות לשליחת הודעות. הם חוצים מחסומי שפה ומאפשרים למשתמשים להביע רגשות ורעיונות במהירות וביעילות.

תמיכה באמוג'י בניסוח האוטומטי

Jetpack Compose, ערכת הכלים המודרנית של Android לבניית ממשק משתמש, מפשטת את הטיפול באמוג'י:

• קלט: הרכיב TextField תומך באופן מובנה בקלט של אמוג'י.
• תצוגה: הרכיב Text של Compose מעבד את הסמלי ה-emoji בצורה נכונה, וכך מבטיח שהם יופיעו באופן עקבי במכשירים ובפלטפורמות שמציעים ספק גופנים שניתן להורדה ותואמים ל-emoji2, כמו מכשירים שמבוססים על Google Play Services.

הצגת סמלי אמוג'י בתמונות שער שבהן מוצגים אמוג'י ב-Jetpack פיתוח נייטיב, כולל הדרכה לוודא שבאפליקציה יוצגו הגופנים העדכניים ביותר של האמוג'י. איך לוודא שסמלי האמוג'י פועלות בצורה תקינה אם האפליקציה משתמשת גם 'תצוגות' וגם 'כתיבה' באותה פעילות, ואיך לפתור את הבעיה כשסמלי האמוג'י לא מופיעים כצפוי.

תמיכה באמוג'י בתצוגת 'תצוגות'

אם אתם משתמשים ב-Android Views, ספריית AppCompat בגרסה 1.4 ואילך מספקת תמיכה בסמלי אמוג'י עבור תת-כיתות של פלטפורמות של TextView:

• קלט: גרסת AppCompat של EditText תומכת באופן מקורי בהזנת אמוג'י.
• רשת המדיה: גרסאות AppCompat של TextView, ToggleButton, Switch, Button, CheckedTextView, RadioButton, CheckBox, AutoCompleteTextView וגם MultiAutoCompleteTextView כולם תומכים בתצוגת האמוג'י, כדי לשמור על עקביות. להופיע בפלטפורמות ובמכשירים שונים שמספקים תאימות ל-אמוג'י2 ספק גופנים שניתנים להורדה, כמו מכשירים שמופעלים על ידי שירותי Google Play.

אם אתם יוצרים תצוגה בהתאמה אישית שהיא צאצא ישיר או עקיף של TextView, תוכלו להרחיב את ההטמעה של AppCompat (במקום את ההטמעה של הפלטפורמה) כדי לקבל תמיכה מובנית באמוג'י. תמיכה בתוכניות אמוג'י מודרניות איך לבדוק שילוב של אמוג'י ולפתור בעיות שקשורות אליו, תמיכה באמוג'י תאימות, תמיכה באמוג'י בתצוגות בהתאמה אישית, תמיכה בגופנים או בגופנים חלופיים ספקים ועוד.

שימוש בבוחר האמוג'י

Jetpack Emoji Picker הוא View ל-Android שמציע רשימה מחולקת לקטגוריות של סמלי אמוג'י, וריאנטים מוצמדים ותמיכה בסמלי אמוג'י שבהם השתמשתם לאחרונה. ה-View תואם למספר גרסאות ומכשירים של Android. זו דרך קלה לשפר את השילוב של האמוג'י באפליקציה.

כדי להתחיל, לייבא את הספרייה ב-build.gradle.

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

שימוש בבורר האמוג'י עם 'כתיבה'

כדי ליצור את בורר האמוג'י ב-Compose, משתמשים ב-composable‏ AndroidView. קטע הקוד הזה כולל אוזן שמעדכן אותך כשאמוג'י מופיע נבחר:

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

כתיבת גרסה 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)
}

מספקים מאזין לאמוג'י שנבחר, ומשתמשים בו כדי לצרף תווים ל-EditText.

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

עיצוב הטקסט

על ידי החלת הבחנות חזותיות על טקסט, כגון סגנונות גופן, גדלים, משקלים, והצבעים, תוכלו לשפר את הקריאות, ההיררכיה והאסתטיקה הכללית עניין בממשק המשתמש של אפליקציית הרשתות החברתיות או אפליקציית ההודעות שלכם. עזרה לסגנונות טקסט שמשתמשים יכולים לנתח מידע במהירות, להבחין בין סוגים שונים של הודעות, ולזהות אלמנטים חשובים.

עיצוב טקסט בחלונית 'כתיבה'

בתוכן הקומפוזבילי 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 יש type-safe builder, 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")
        }
    )
}

למידע נוסף על עיצוב טקסט ב'כתיבה', אפשר לעיין במאמר סגנון טקסט. כולל הוספת צללית, עיצוב מתקדם עם מברשת, וגם שקיפות.

עיצוב טקסט בתצוגות

לעומת זאת, תוכלו להשתמש בסגנונות ובעיצובים כדי ליצור טיפוגרפיה עקבית. צפייה סגנונות ועיצובים למידע נוסף על החלת עיצובים מותאמים אישית את הצפיות באפליקציה. אם רוצים להגדיר סגנונות שונים בתוך טקסט אחד מידע נוסף על שינוי טקסט במגוון תרבותי זמין בקטע Spans דרכים, כולל הוספת צבע, הפיכת הטקסט לניתן ללחיצה, שינוי קנה מידה את גודל הטקסט, ולצייר טקסט באופן מותאם אישית.

תמיכה במקלדות תמונה ובתוכן עשיר אחר

בדרך כלל, המשתמשים רוצים לתקשר באמצעות סטיקרים, אנימציות וסוגים אחרים של תוכן עשיר. כדי להקל על אפליקציות לקבל תוכן עשיר, Android 12 (רמת API 31) הוסיפה ממשק API מאוחד שמאפשר לאפליקציה לקבל תוכן מ- כל מקור: לוח, מקלדת או גרירה ושחרור. כדי לשמור על תאימות לאחור לגרסאות קודמות של Android (כרגע עד רמת API 14), מומלץ להשתמש בגרסה של Android Jetpack‏ (AndroidX) של ה-API הזה.

אתם מחברים OnReceiveContentListener לרכיבי ממשק המשתמש, ומקבלים קריאה חוזרת (callback) כשמוסיפים תוכן באמצעות מנגנון כלשהו. הקריאה החוזרת (callback) הופכת המקום היחיד שבו הקוד שלכם יכול לטפל בקבלת כל התוכן, משפה פשוטה טקסט מעוצב לתגי עיצוב, תמונות, סרטונים, קובצי אודיו ועוד.

במאמר קבלת תוכן עשיר מוסבר איך להטמיע תמיכה באפליקציה. מעכשיו, ב-Jetpack Compose יש משתני dragAndDropSource ו-dragAndDropTarget שמפשטים את ההטמעה של 'גרירה ושחרור' באפליקציה ובין אפליקציות אחרות.