Selektor emotikonów

Selektor emotikonów to rozwiązanie UI, które zapewnia nowoczesny wygląd i funkcjonalność, aktualne emotikony oraz łatwość obsługi. Użytkownicy mogą przeglądać i wybierać emotikony oraz ich warianty lub wybrać ostatnio używany emotikon.

Rysunek 1. Selektor emotikonów

Dzięki tej bibliotece aplikacje z różnych źródeł mogą zapewniać użytkownikom przyjazne i zjednoczone emoji bez konieczności tworzenia i utrzymywania własnego selektora emoji od podstaw.

Funkcje

Selektor emotikonów ma te funkcje:

Aktualne emotikony

Nowo opublikowane emotikony są dodawane do selektora emotikonów w sposób selektywny. Biblioteka EmojiPicker jest zgodna z różnymi wersjami i urządzeniami z Androidem.

Warianty przyklejone

Przytrzymaj emotikon, aby wyświetlić menu z wariantami, np. z różnymi płciami lub odcieniami skóry. Wybrany wariant jest zapisywany w selektorze emotikonów, a w panelu głównym jest używany ostatni wybrany wariant.

Dzięki tej funkcji użytkownicy mogą wysyłać wybrane emotikony jednym kliknięciem.

warianty emotikonów,
Rysunek 2. Warianty emotikonów.

Ostatnie emotikony

ostatni emotikon
Rysunek 3. Ostatnie emotikony.

RecentEmojiProvider jest odpowiedzialny za udostępnianie emotikonów w kategorii Ostatnio używane. Biblioteka ma domyślnego dostawcę emotikonów, który spełnia większość typowych przypadków użycia:

  • Wszystkie wybrane emotikony są zapisywane w przypadku każdej aplikacji w ramach wspólnych preferencji.
  • Selektor wyświetla maksymalnie 3 wiersze wybranych emotikonów, bez duplikatów, w odwrotnej kolejności chronologicznej.

Jeśli domyślne działanie jest wystarczające, nie musisz używać setRecentEmojiProvider().

Może jednak być konieczne dostosowanie działania dostawcy. Oto kilka typowych scenariuszy:

  • Chcesz przechowywać różne emotikony na poszczególnych kontach użytkowników.
  • Chcesz używać miejsca na dane innego niż udostępnione ustawienia.
  • Chcesz wyświetlić ostatnio używane emotikony posortowane według częstotliwości użycia.

Następnie możesz zaimplementować interfejs RecentEmojiProvider i skonfigurować go za pomocą setRecentEmojiProvider().

Selektor kierunku

Począwszy od Emoji 15.1 selektor emotikonów obsługuje dwukierunkowe emotikony. Użytkownicy mogą kliknąć przełącznik dwukierunkowy, aby przełączać się między wersjami emotikonów skierowanymi w lewo i w prawo.

dwukierunkowy emotikon w lewo

Rysunek 4. Dwukierunkowy emotikon skierowany w lewo.

emotikon dwukierunkowy w prawo

Rysunek 5. Dwukierunkowy emotikon zwrócony w prawo.

Selektor emotikonów dla wielu osób

Użytkownicy mogą dotknąć i przytrzymać emotikony pary, aby wyświetlić emotikony z wieloma osobami.

naciśnij i przytrzymaj emotikon pary

Rysunek 6. Naciśnij i przytrzymaj parę emotikonów, aby wyświetlić emotikony z wieloma osobami.

kliknij emotikon człowieka po lewej stronie

Rysunek 7. Wybierz emotikon z połówką twarzy po lewej stronie.

kliknij odpowiednią emotikoniczną postać

Rysunek 8. Wybierz emotikon z prawą połową twarzy.

Gdy użytkownik wybierze lewą lub prawą połowę emotikonu w parze emotikonów, selektor wyświetli podgląd w prawym dolnym rogu, jak pokazano na rysunkach 7 i 8. Po wybraniu obu połów emotikonów użytkownicy mogą wybrać podgląd, aby utworzyć niestandardową parę emotikonów.

Zgodność z EmojiCompat

Jeśli ta opcja jest włączona, w selektorze emotikonów jest używany element EmojiCompat, aby renderować jak najwięcej emotikonów. Selektor emotikonów nie wymaga jednak EmojiCompat.

Wymagania wstępne

Aplikacja musi być kierowana na Androida 5.0 (poziom interfejsu API 21) lub nowszego.

Korzystanie z biblioteki

  1. Zaimportuj plik androidx.emoji2:emojipicker:$version do pliku build.gradle w aplikacji.

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

  2. Rozwiń widok selektora emotikonów i opcjonalnie ustaw emojiGridRows i emojiGridColumns.

    • Domyślna liczba elementów emojiGridColumns to 9.
    • Liczba wierszy jest obliczana na podstawie wysokości widoku nadrzędnego i wartości parametru emojiGridColumns.
    • Użyj wartości zmiennoprzecinkowej w polu emojiGridRows, aby wskazać, że użytkownik może przewinąć ekran w celu wyświetlenia kolejnych emotikonów.
    <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. Aby dodać wybrany emotikon do widoku, użyj setOnEmojiPickedListener(). Aby na przykład dołączyć do EditText, wykonaj te czynności:

    emojiPickerView.setOnEmojiPickedListener {
    findViewById<EditText>(R.id.edit_text).append(it.emoji)
}

  4. Opcjonalnie ustaw RecentEmojiProvider. Przykładową implementację znajdziesz w przykładowej aplikacji.

  5. Opcjonalnie dostosuj style. Utwórz własny styl, aby zastąpić typowe atrybuty motywu, i zastosuj go do elementu EmojiPickerView. Na przykład zastąpienie wartości colorControlNormal zmienia kolor ikony kategorii.

    <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" />

Przykładowa aplikacja

Przykładowa aplikacja Emoji Picker demonstruje podstawowe przypadki użycia oraz te dodatkowe:

  • ponowne obliczenie układu po zresetowaniu emojiGridRows lub emojiGridColumns;
  • Zastąpiony ostatni dostawca emotikonów, który sortuje je według częstotliwości.
  • dodatkowe dostosowywanie stylu;