Emoji-Auswahl

Die Emoji-Auswahl ist eine UI-Lösung, die ein modernes Design, aktuelle Emojis und eine einfache Bedienbarkeit bietet. Nutzer können nach Emojis und ihren Varianten suchen oder aus den zuletzt verwendeten Emojis wählen.

Abbildung 1. Emoji-Auswahl

Mithilfe dieser Bibliothek können Apps aus verschiedenen Quellen ihren Nutzern ein inklusives und einheitliches Emoji-Erlebnis bieten, ohne dass Entwickler eine eigene Emoji-Auswahl von Grund auf neu erstellen und verwalten müssen.

Funktionen

Aktuelle Emojis

Neu veröffentlichte Emojis sind selektiv in der Emoji-Auswahl enthalten. Die Emoji-Auswahl ist mit mehreren Android-Versionen und -Geräten kompatibel.

Fixierte Varianten

Halten Sie ein Emoji lange gedrückt, um ein Menü mit Varianten aufzurufen, z. B. mit verschiedenen Geschlechts- oder Hauttönen. Die von Ihnen ausgewählte Variante wird in der Emoji-Auswahl gespeichert und die zuletzt ausgewählte Variante im Hauptbereich verwendet.

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

Emoji-Varianten
Abbildung 2. Emoji-Varianten

Letzte Emojis

neuestes Emoji
Abbildung 3: Zuletzt verwendete Emojis

Über RecentEmojiProvider werden Emojis in der Kategorie Kürzlich verwendet bereitgestellt. Die Bibliothek enthält einen standardmäßigen aktuellen Emoji-Anbieter, der den häufigsten Anwendungsfall erfüllt:

  • Alle ausgewählten Emojis werden für jede App in den gemeinsamen Einstellungen gespeichert.
  • In der Auswahl werden maximal 3 Zeilen ausgewählter Emojis, dedupliziert, in umgekehrter chronologischer Reihenfolge angezeigt.

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

Möglicherweise müssen Sie jedoch das Verhalten des Anbieters anpassen. Hier einige häufige Szenarien:

  • Sie möchten unterschiedliche ausgewählte Emojis pro Nutzerkonto speichern.
  • Sie möchten einen anderen Datenspeicher als gemeinsame Einstellungen verwenden.
  • Sie möchten kürzlich verwendete Emojis nach Häufigkeit sortiert anzeigen lassen.

Sie können dann die Schnittstelle RecentEmojiProvider implementieren und mit setRecentEmojiProvider() festlegen.

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

Deine 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 Standardanzahl von emojiGridColumns ist 9.
    • Die Zeilenanzahl wird basierend auf der Höhe der übergeordneten Ansicht und dem Wert von emojiGridColumns berechnet.
    • Verwende einen Gleitkommawert für emojiGridRows, um anzugeben, dass der Nutzer nach unten scrollen kann, um weitere Emojis zu sehen.
    <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. Verwenden Sie setOnEmojiPickedListener(), um die ausgewählten Emojis einer Ansicht hinzuzufügen. So hängen Sie beispielsweise an ein EditText an:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. Legen Sie optional RecentEmojiProvider fest. Eine Beispielimplementierung finden Sie in der Beispiel-App.

  5. Passen Sie die Stile bei Bedarf an. Erstellen Sie einen eigenen Stil, um allgemeine Designattribute zu überschreiben, und wenden Sie den Stil auf die EmojiPickerView an. Wenn Sie colorControlNormal überschreiben, ändert sich beispielsweise 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 zur Emoji-Auswahl veranschaulicht grundlegende Anwendungsfälle sowie die folgenden zusätzlichen Szenarien:

  • Neuberechnung des Layouts, wenn emojiGridRows oder emojiGridColumns zurückgesetzt werden.
  • Ein überschriebener aktueller Emoji-Anbieter, der nach Häufigkeit sortiert.
  • Zusätzliche Stilanpassung.