SMS in Social-Media- und Messaging-Apps

Text ist das Herzstück von sozialen Anwendungen. Hier können Nutzende Gedanken teilen, Emotionen zu kommunizieren und Geschichten zu erzählen. In diesem Dokument wird erläutert, wie Sie mit Text und sich dabei auf Emojis, Stile und die Integration von Rich Content konzentrieren.

Mit Emojis arbeiten

Emojis sind zu einem wichtigen Bestandteil der modernen Kommunikation geworden, insbesondere Social-Media- und Messaging-Apps. Sie überwinden Sprachbarrieren und ermöglichen es Nutzern, Emotionen und Ideen schnell und effektiv auszudrücken.

Emoji-Unterstützung in „Compose“

Jetpack Compose, das moderne Toolkit für deklarative Benutzeroberflächen von Android, vereinfacht Emojis Umgang mit:

  • Eingabe: Die Komponente TextField unterstützt nativ die Emoji-Eingabe.
  • Anzeige: Die Text-Komponente von Compose rendert Emojis korrekt und sorgt so für eine einheitliche Darstellung auf Geräten und Plattformen, die einen Emoji2-kompatiblen Anbieter für herunterladbare Schriftarten anbieten, z. B. Geräte mit Google Play-Diensten.

Unter Emojis anzeigen wird beschrieben, wie Emojis in Jetpack Compose angezeigt werden und wie sicherstellen, dass Ihre App die neuesten Emoji-Schriftarten anzeigt, wie Sie sicherstellen, dass Emojis funktionieren, wenn Ihre App Aufrufe und Schreiben in derselben Aktivität, und wie Sie Probleme beheben, wenn Emojis nicht wie erwartet angezeigt werden.

Emoji-Unterstützung in Views

Wenn Sie Android Views verwenden, bietet die AppCompat-Bibliothek 1.4 oder höher Emoji-Unterstützung für abgeleitete Plattformklassen von TextView:

Wenn Sie eine benutzerdefinierte Ansicht erstellen, die eine direkte oder indirekte Unterklasse von TextView ist, erweitern Sie die AppCompat-Implementierung (nicht die Plattformimplementierung), um die integrierte Emoji-Unterstützung zu erhalten. Im Hilfeartikel Moderne Emojis unterstützen erfahren Sie unter anderem, wie Sie die Emoji-Integration testen und Fehler beheben, Emojis ohne AppCompat unterstützen, Emojis in benutzerdefinierten Ansichten unterstützen und alternative Schriftarten oder Schriftartenanbieter unterstützen.

Emoji-Auswahl verwenden

Die Jetpack Emoji-Auswahl ist eine Android-Ansicht mit einer kategorisierten Liste von Emojis, anhaftenden Varianten und Unterstützung für kürzlich verwendete Emojis. Sie ist mit mehreren Android-Versionen und -Geräten kompatibel. So können Sie die Emoji-Integration Ihrer App ganz einfach optimieren.

Importieren Sie zuerst die Bibliothek in build.gradle.

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

Emoji-Auswahl mit „Schreiben“ verwenden

Sie können die Emoji-Auswahl in „Compose“ mit dem AndroidView erstellen zusammensetzbar sind. Dieses Snippet enthält einen Listener, der Sie darüber informiert, ist ausgewählt:

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

Compose 1.7 bietet viele neue Funktionen in BasicTextField, darunter: Unterstützung für TextFieldState, die in Ihrem ViewModel enthalten sein kann:

private val emojiTextFieldState = TextFieldState()

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

Mit TextFieldState können Sie Text an der Cursorposition einfügen oder den ausgewählten Text ersetzen, als würden Sie ihn in die IME eingeben:

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

Der Callback kann den BasicTextField mithilfe der Hilfsfunktion aktualisieren:

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

Emoji-Auswahl in Ansichten verwenden

Die Emoji-Auswahl funktioniert auch gut mit Aufrufen.

Maximieren Sie EmojiPickerView. Optional können Sie „EmojiGridColumns“ und EmojisGridRows basierend auf der gewünschten Größe der einzelnen Emoji-Zellen.

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

Fügen Sie an der Cursorposition ein Zeichen ein oder ersetzen Sie den ausgewählten Text:

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

Stellen Sie einen Listener für das ausgewählte Emoji bereit und fügen Sie damit Zeichen an EditText.

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

Text gestalten

Durch visuelle Unterscheidungen wie Schriftarten, -größen, -stärken und -farben können Sie die Lesbarkeit, Hierarchie und allgemeine Ästhetik der Benutzeroberfläche Ihrer Social-Media- oder Messaging-App verbessern. Mithilfe von Textstilen können Nutzer Informationen schnell analysieren, zwischen verschiedenen Arten von Nachrichten unterscheiden und wichtige Elemente erkennen.

Text in „Schreiben“ formatieren

Das Text-Element bietet zahlreiche Stiloptionen, darunter:

  • Schriftfarbe: Legen Sie Color fest, um den Text hervorzuheben.
  • Schriftgröße: Mit FontSize können Sie die gewünschte Größe einstellen.
  • Schriftstil: Mit FontStyle wird Text kursiv dargestellt.
  • Schriftstärke: Sie können FontWeight für fette, helle usw. Textvariationen anpassen.
  • Schriftfamilie: Wählen Sie mit FontFamily eine geeignete Schriftart aus.
Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

Mithilfe von Designs können Sie diese Stiloptionen einheitlich für Ihre Anwendung festlegen.

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

Mehrere Stile in Text einfügen

Sie können innerhalb derselben zusammensetzbaren Text-Funktion verschiedene Stile festlegen. Verwenden Sie dazu AnnotatedString

AnnotatedString hat einen typsicheren Builder, buildAnnotatedString, der die Erstellung vereinfacht.

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

Weitere Informationen zu den Textstilen in „Schreiben“ finden Sie unter Text gestalten. z. B. Schatten hinzufügen, erweiterte Stile mit einem Pinsel und Deckkraft:

Text in Ansichten gestalten

Verwenden Sie bei Datenansichten Stile und Designs für eine einheitliche Typografie. Weitere Informationen finden Sie unter Unter Stile und Designs finden Sie weitere Informationen dazu, wie Sie benutzerdefinierte Designs auf die Anzahl der Aufrufe in Ihrer App. Wenn Sie innerhalb eines Textes verschiedene Stile festlegen möchten Hier finden Sie Informationen zum Ändern von Text in verschiedenen Spans. indem sie beispielsweise Farbe hinzufügen, den Text anklickbar machen, die Textgröße anpassen und Text anpassen.

Bildtastaturen und andere Rich Media-Inhalte unterstützen

Nutzer möchten oft mit Stickern, Animationen und anderen Arten von interaktiven Inhalten kommunizieren. Damit Apps Rich-Inhalte einfacher empfangen können, wurde in Android 12 (API-Level 31) eine einheitliche API eingeführt, mit der Ihre App Inhalte aus beliebigen Quellen akzeptieren kann: Zwischenablage, Tastatur oder Drag-and-drop. Für rückwärts Kompatibilität mit früheren Android-Versionen (derzeit ab API-Level 14) empfehlen wir die Verwendung von Android Jetpack (AndroidX) dieser API.

Sie hängen ein OnReceiveContentListener an UI-Komponenten an und erhalten ein Callback verwendet, wenn Inhalte über einen beliebigen Mechanismus eingefügt werden. Der Rückruf ist der einzige Ort, an dem Ihr Code den Empfang aller Inhalte verarbeiten kann, von einfachem und formatiertem Text über Markup, Bilder, Videos, Audiodateien und mehr.

Weitere Informationen zur Implementierung der Unterstützung in für Ihre App. Jetpack Compose enthält jetzt dragAndDropSource und dragAndDropTarget-Modifikatoren, um die Implementierung von Drag-and-drop zu vereinfachen in deiner App und zwischen anderen Apps.