Emoji-Auswahl

Die Emoji-Auswahl ist eine UI-Lösung mit einem modernen Erscheinungsbild, aktuellen Emojis und einer einfachen Bedienung. Nutzer können Emojis und ihre Varianten durchsuchen und auswählen oder aus den kürzlich verwendeten Emojis auswählen.

Abbildung 1. Emoji-Auswahl

Mit dieser Bibliothek können Apps aus verschiedenen Quellen ihren Nutzern eine inklusive und einheitliche Emoji-Auswahl bieten, ohne dass Entwickler ihre eigene Emoji-Auswahl von Grund auf erstellen und verwalten müssen.

Funktionen

Die Emoji-Auswahl bietet folgende Funktionen:

Aktuelle Emojis

Neue Emojis werden selektiv in die Emoji-Auswahl aufgenommen. Die Emoji-Auswahlbibliothek ist mit mehreren Android-Versionen und -Geräten kompatibel.

Fixierte Varianten

Wenn Sie ein Emoji lange gedrückt halten, wird ein Menü mit Varianten angezeigt, z. B. mit verschiedenen Geschlechtern oder Hauttönen. Die von Ihnen ausgewählte Variante wird in der Emoji-Auswahl gespeichert. Die zuletzt ausgewählte Variante wird im Hauptbereich verwendet.

Mit dieser Funktion können Nutzer ihre bevorzugten Emoji-Varianten mit nur einem Tippen senden.

Emoji-Varianten
Abbildung 2. Emoji-Varianten

Zuletzt verwendete Emojis

Letzte Emojis
Abbildung 3. Zuletzt verwendete Emojis

Der RecentEmojiProvider ist für die Bereitstellung von Emojis in der Kategorie Kürzlich verwendet verantwortlich. Die Bibliothek hat einen Standardanbieter für aktuelle Emojis, der für den häufigsten Anwendungsfall geeignet ist:

  • Alle ausgewählten Emojis werden pro App in den gemeinsamen Einstellungen gespeichert.
  • In der Auswahl werden maximal drei Zeilen mit ausgewählten Emojis angezeigt, die dedupliziert und in umgekehrter chronologischer Reihenfolge sortiert sind.

Wenn dieses Standardverhalten ausreicht, müssen Sie setRecentEmojiProvider() nicht verwenden.

Möglicherweise müssen Sie das Anbieterverhalten jedoch anpassen. Hier einige gängige Szenarien:

  • Sie möchten für jedes Nutzerkonto unterschiedliche ausgewählte Emojis speichern.
  • Sie möchten einen anderen Datenspeicher als die gemeinsamen Einstellungen verwenden.
  • Sie möchten die letzten Emojis nach Häufigkeit sortiert anzeigen.

Sie können dann die RecentEmojiProvider-Benutzeroberfläche implementieren und mit setRecentEmojiProvider() festlegen.

Richtungsauswahl

Ab Emoji 15.1 unterstützt die Emoji-Auswahl bidirektionale Emojis. Nutzer können auf den bidirektionalen Schalter tippen, um zwischen der nach links und der nach rechts gerichteten Version des Emojis zu wechseln.

Emoji mit zwei Pfeilen nach links

Abbildung 4: Zweisprachiges Emoji, das nach links zeigt.

Emoji mit zwei Pfeilen nach rechts

Abbildung 5: Bidirektionales Emoji, das nach rechts zeigt.

Emoji-Auswahl für mehrere Personen

Nutzer können Emoji-Paare gedrückt halten, um Emoji-Auswahlen für mehrere Personen aufzurufen.

Emoji-Paar gedrückt halten

Abbildung 6 Halten Sie ein Emoji-Paar gedrückt, um Emoji-Auswahlen für mehrere Personen aufzurufen.

Tippen Sie auf das linke Emoji-Mensch-Symbol.

Abbildung 7. Wählen Sie ein Emoji mit einer Person auf der linken Seite aus.

Tippen Sie auf das Emoji mit der Person auf der rechten Seite.

Abbildung 8. Wählen Sie ein Emoji mit einer Person in der rechten Hälfte aus.

Wenn der Nutzer die linke oder rechte Hälfte eines Emoji-Paares auswählt, wird in der Auswahl unten rechts eine Vorschau angezeigt (siehe Abbildungen 7 und 8). Nachdem Nutzer beide Hälften des Emoji-Paares ausgewählt haben, können sie die Vorschau auswählen, um das benutzerdefinierte Emoji-Paar zu erstellen.

Kompatibilität mit EmojiCompat

Wenn diese Option aktiviert ist, wird in der Emoji-Auswahl eine EmojiCompat-Instanz verwendet, um so viele Emojis wie möglich zu rendern. Für die Emoji-Auswahl ist EmojiCompat jedoch nicht erforderlich.

Voraussetzungen

Ihre App muss auf Android 5.0 (API-Level 21) oder höher ausgerichtet sein.

Bibliothek verwenden

  1. Importieren Sie androidx.emoji2:emojipicker:$version in die Datei build.gradle Ihrer Anwendung.

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. Maximieren Sie die Ansicht der Emoji-Auswahl und legen Sie optional emojiGridRows und emojiGridColumns fest.

    • Die Standardzahl von emojiGridColumns ist 9.
    • Die Zeilenanzahl wird anhand der Höhe der übergeordneten Ansicht und des Werts von emojiGridColumns berechnet.
    • Verwenden Sie einen Float-Wert für emojiGridRows, um anzugeben, dass der Nutzer nach weiteren Emojis scrollen kann.
    <androidx.emoji2.emojipicker.EmojiPickerView
        android:id="@+id/emoji_picker"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:emojiGridColumns="9" />
    
    val emojiPickerView = EmojiPickerView(context).apply {
        emojiGridColumns = 15
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
    }
    
    findViewById<ViewGroup>(R.id.emoji_picker_layout).addView(emojiPickerView)
    
  3. Mit der Taste setOnEmojiPickedListener() können Sie das ausgewählte Emoji einer Ansicht anhängen. So hängen Sie beispielsweise etwas an ein EditText an:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. Optional: Legen Sie RecentEmojiProvider fest. Eine Beispielimplementierung finden Sie in der Beispielanwendung.

  5. Sie können Stile optional anpassen. Erstellen Sie einen eigenen Stil, um gängige Designattribute zu überschreiben, und wenden Sie den Stil auf die EmojiPickerView an. Wenn Sie beispielsweise colorControlNormal überschreiben, ändert sich die Farbe des Kategoriesymbols.

    <style name="CustomStyle" >
        <item name="colorControlNormal">#FFC0CB</item>
    </style>
    <androidx.emoji2.emojipicker.EmojiPickerView
        android:id="@+id/emoji_picker"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/CustomStyle"
        app:emojiGridColumns="9" />
    

Beispiel-App

Die Beispiel-App „Emoji-Auswahl“ veranschaulicht grundlegende Anwendungsfälle sowie die folgenden zusätzlichen Szenarien:

  • Layout wird neu berechnet, wenn emojiGridRows oder emojiGridColumns zurückgesetzt wird.
  • Ein überschriebener Anbieter für kürzlich verwendete Emojis, der nach Häufigkeit sortiert.
  • Zusätzliche Stilanpassung