SMS dans les applications de réseaux sociaux et de messagerie

Le texte est au cœur des applications de réseau social, où les utilisateurs partagent leurs pensées, expriment leurs émotions et racontent des histoires. Ce document explique comment utiliser efficacement le texte, en mettant l'accent sur les emoji, le style et l'intégration de contenu enrichi.

Utiliser les emoji

Les emoji font désormais partie intégrante de la communication moderne, en particulier dans de réseaux sociaux et de messagerie. Ils transcendent les barrières linguistiques, ce qui permet aux utilisateurs d'exprimer leurs émotions et leurs idées rapidement et efficacement.

Compatibilité avec les emoji dans Compose

Jetpack Compose, le kit d'outils d'UI déclaratif moderne d'Android, simplifie la gestion des emoji :

  • Entrée: le composant TextField est compatible de manière native avec la saisie d'emoji.
  • Affichage : le composant Text de Compose affiche correctement les emoji, ce qui garantit leur apparence cohérente sur les appareils et les plates-formes qui proposent un fournisseur de polices téléchargeables compatible avec emoji2, comme les appareils équipés des services Google Play.

La section Afficher les emoji permet d'afficher des emoji dans Jetpack Compose, et explique comment les vous assurer que votre application affiche les dernières polices d'emoji, comment vous assurer que les emoji fonctionne correctement si votre application utilise des vues et de Compose dans la même activité, et comment résoudre les problèmes d'affichage des emoji.

Prise en charge des emoji dans les vues

Si vous utilisez des vues Android, la bibliothèque AppCompat 1.4 ou version ultérieure prend en charge les emoji pour les sous-classes de plate-forme de TextView :

Si vous créez une vue personnalisée qui est une sous-classe directe ou indirecte de TextView, étendez l'implémentation d'AppCompat (plutôt que la plate-forme). ) pour bénéficier d'une prise en charge intégrée des emoji. Assurer la compatibilité avec les emoji modernes comment tester l'intégration des emoji et résoudre les problèmes associés, prendre en charge les emoji sans AppCompat, prise en charge des emoji dans les vues personnalisées, et prise en charge d'autres polices les fournisseurs de services, etc.

Utiliser le sélecteur d'emoji

Le sélecteur d'emoji Jetpack est un View Android qui fournit une liste catégorisée d'emoji, de variantes persistantes et de la prise en charge des derniers compatibles avec plusieurs versions d'Android et appareils. Il est facile pour optimiser l'intégration des emoji dans votre application.

Commencez par importer la bibliothèque dans build.gradle.

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

Utiliser le sélecteur d'emoji avec Compose

Vous créez le sélecteur d'emoji dans Compose à l'aide du composable AndroidView. Cet extrait inclut un écouteur qui vous indique quand un emoji est sélectionnée:

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

Compose 1.7 ajoute de nombreuses nouvelles fonctionnalités à BasicTextField, y compris la prise en charge de TextFieldState, qui peut se trouver dans votre ViewModel :

private val emojiTextFieldState = TextFieldState()

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

Vous pouvez utiliser TextFieldState pour insérer du texte à la position du curseur ou remplacer le texte sélectionné, comme si vous étiez en train de le saisir dans l'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)
    }
}

Le rappel peut mettre à jour BasicTextField à l'aide de la fonction d'assistance :

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

Utiliser le sélecteur d'emoji avec les vues

Le sélecteur d'emoji fonctionne également bien avec les vues.

Gonflez la vue EmojiPickerView. Si vous le souhaitez, définissez des emojiGridColumns et emojiGridRows en fonction de la taille souhaitée de chaque cellule d'emoji.

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

Insérez un caractère à la position du curseur ou remplacez le texte sélectionné :

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

Fournir un écouteur à l'emoji sélectionné et l'utiliser pour ajouter des caractères aux le EditText.

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

Définir le style du texte

En appliquant des distinctions visuelles au texte, telles que des styles de police, des tailles, des épaisseurs et des couleurs, vous pouvez améliorer la lisibilité, la hiérarchie et l'attrait esthétique global de l'interface utilisateur de votre application de réseau social ou de messagerie. Les styles de texte aident les utilisateurs à analyser rapidement les informations, à distinguer les différents types de messages et à identifier les éléments importants.

Appliquer un style au texte dans Compose

Le composable Text offre de nombreuses options de style, y compris les suivantes:

  • Couleur du texte : définissez Color pour faire ressortir le texte.
  • Taille de la police : utilisez FontSize pour ajuster l'échelle.
  • Style de police: utilisez FontStyle pour mettre le texte en italique.
  • Épaisseur de la police : ajustez FontWeight pour obtenir des variations de texte (gras, clair, etc.).
  • Famille de polices: utilisez FontFamily pour choisir une police adaptée.
Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

Vous pouvez définir ces options de style de manière cohérente dans votre application à l'aide de thèmes.

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

Ajouter plusieurs styles dans un texte

Vous pouvez définir différents styles dans le même composable Text à l'aide d'un AnnotatedString

AnnotatedString dispose d'un compilateur avec sûreté du typage. buildAnnotatedString, pour faciliter la création.

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

Pour en savoir plus sur l'application d'un style au texte dans Compose, consultez Appliquer un style au texte. y compris ajouter une ombre, appliquer un style avancé au pinceau et opacité.

Appliquer un style au texte dans les vues

Avec les vues, utilisez des styles et des thèmes pour assurer une typographie cohérente. Pour savoir comment appliquer un thème personnalisé aux vues de votre application, consultez Styles et thèmes. Si vous souhaitez définir différents styles dans une même vue de texte, consultez Espaces pour savoir comment modifier le texte de différentes manières, y compris en ajoutant de la couleur, en rendant le texte cliquable, en ajustant la taille du texte et en dessinant du texte de manière personnalisée.

Prise en charge des claviers avec images et d'autres contenus multimédias

Les utilisateurs veulent souvent communiquer à l'aide d'autocollants, d'animations et d'autres types de du contenu enrichi. Pour simplifier la réception de contenu enrichi par les applications, Android 12 (niveau d'API 31) a introduit une API unifiée qui permet à votre application d'accepter du contenu à partir de n'importe quelle source : presse-papiers, clavier ou glisser-déposer. Pour rétrograder Compatibilité avec les versions précédentes d'Android (retour au niveau d'API 14) nous vous recommandons d'utiliser la version Android Jetpack (AndroidX) de cette API.

Vous allez rattacher un OnReceiveContentListener aux composants de l'UI et obtenir une lorsque le contenu est inséré via un mécanisme. Le rappel devient un emplacement unique où votre code gère la réception de tout le contenu, en texte brut et du texte stylisé au balisage, aux images, aux vidéos, aux fichiers audio, etc.

Consultez Recevoir du contenu riche pour découvrir comment implémenter la prise en charge dans votre application. Jetpack Compose dispose désormais de modificateurs dragAndDropSource et dragAndDropTarget pour simplifier l'implémentation du glisser-déposer dans votre application et entre d'autres applications.