Emoji-Auswahl

Die Emoji-Auswahl ist eine UI-Lösung mit modernem Design, aktuellen Emojis und Nutzerfreundlichkeit. Nutzer können Emojis und ihre Varianten suchen und auswählen oder aus den kürzlich verwendeten Emojis auswählen.

Abbildung 1. Emoji-Auswahl

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

Funktionen

Aktuelle Emojis

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

Fixierte Varianten

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

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

Emoji-Varianten
Abbildung 2. Emoji-Varianten

Letzte Emojis

zuletzt verwendetes Emoji
Abbildung 3: Zuletzt verwendete Emojis

Der RecentEmojiProvider ist für die Bereitstellung von Emojis in der Kategorie Zuletzt verwendet verantwortlich. Die Bibliothek hat einen standardmäßigen aktuellen Emoji-Anbieter für den häufigsten Anwendungsfall:

  • Alle ausgewählten Emojis werden für jede App in den geteilten Einstellungen gespeichert.
  • In der Auswahl werden maximal drei 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 sind einige häufige Szenarien:

  • Sie möchten verschiedene ausgewählte Emojis pro Nutzerkonto speichern.
  • Sie möchten eine andere Datenspeicherung als gemeinsame Einstellungen verwenden.
  • Sie möchten die zuletzt verwendeten Emojis nach Häufigkeit sortiert anzeigen lassen.

Anschließend können Sie die RecentEmojiProvider-Schnittstelle implementieren und mit setRecentEmojiProvider() festlegen.

Kompatibilität mit EmojiCompat

Wenn diese Option aktiviert ist, wird eine EmojiCompat-Instanz in der Emoji-Auswahl 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. Fülle die Emoji-Auswahlansicht auf und lege 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.
    • Verwenden Sie einen Gleitkommawert für emojiGridRows, um anzugeben, dass der Nutzer für weitere Emojis nach unten 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. Verwenden Sie setOnEmojiPickedListener(), um die ausgewählten Emojis an eine Ansicht anzuhängen. So fügen Sie beispielsweise ein EditText-Objekt an:

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

  5. Sie können Stile bei Bedarf anpassen. Erstellen Sie einen eigenen Stil, um allgemeine Designattribute zu überschreiben, und wenden Sie den Stil auf EmojiPickerView an. Wenn Sie beispielsweise colorControlNormal überschreiben, wird die Farbe des Kategoriesymbols geändert.

    <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

In der Beispiel-App „Emoji-Auswahl“ werden grundlegende Anwendungsfälle und die folgenden zusätzlichen Szenarien demonstriert:

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