Implementierungen von Emoji (Emoticon) Ansichten/Tastaturlayouts

Question

Ich versuche herauszufinden, wie die Emoji-Auswahlen in der Facebook-App und der Google Hangouts-App implementiert sind. Ich habe mir die SoftKeyboard Demo-App in den Android-API-Beispielen angesehen, aber die Anzeige dieser Emoji-Ansichten sieht nicht wie eine SoftKeyboard aus. Es sieht eher aus und verhält sich wie eine benutzerdefinierte Dialog-Ansicht. Hat jemand eine Idee, wie diese implementiert sind?

Facebook App

Google Hangouts-App

Ist Unicode der beste Weg, um Emoticons zu senden, oder gibt es eine Alternative? Ich habe bemerkt, dass einige Unicode-Sequenzen like \u1F601 das entsprechende Emoticon nicht rendern und stattdessen diese Sequenz einfach als 1 angezeigt wird:

EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\u1F601");

Answer 1

Ich habe eine sehr nützliche Emoticon-Tastatur gefunden. Diese Tastatur verwendet keine Unicode-Sequenzen, sondern nur lokale Bilddateien. Ich denke, dass diese Art von Tastatur nur innerhalb dieser App nützlich sein kann und nicht mit anderen Apps oder Betriebssystemen.

Stattdessen ersetze ich das ImageView mit einem Asset durch einen TextView mit einer Unicode-Sequenz.

Nachdem ich die Unterstützten Unicode-Sequenzen sowie die Visuelle Unicode-Datenbank überprüft habe, habe ich festgestellt, dass \u1F601 eine 32-Bit-Unicode-Repräsentation ist und die 16-Bit-Repräsentation wie folgt festgelegt werden kann:

EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\ud83d\ude01");

Answer 2

Sie können diese Bibliothek basierend auf der Bibliothek von Hieu Rocker verwenden: https://github.com/ankushsachdeva/emojicon

So sieht es aus

Answer 3

Wenn Sie nicht in die Details der Implementierung der Emoji-Keyboard-Funktionalität eingehen möchten, können Sie diese Bibliotheken verwenden:

• Rockerhieu / emojicon: implementiert das Emoji-Keyboard unter Verwendung von Fragments (Sie müssen die Anzeige davon mit einem DialogFragment behandeln. Es bietet keine Unterstützung zum Ändern des Layouts und das Standardlayout ist das Hole Dark-Theme;

• Android Emoji Keyboard: Basierend auf der Arbeit von Rockerhieu habe ich eine weitere Bibliothek erstellt, die das Emoji-Keyboard bereitstellt, das dem ähnlich ist, was wir in Apps wie WhatsApp oder Telegram gesehen haben. Sie können das Layout als LinearLayout behandeln und daher die Interaktion mit der Bildschirmtastatur selbst behandeln (wie unten beschrieben) oder wählen Sie die von der Bibliothek bereitgestellten Telegram Panel oder WhatsApp Panel, die dies für Sie tun.

PS1: Beide Bibliotheken sind unter der Apache-Lizenz verfügbar

Teil 01: Erstellung des Layouts

• Erstellen Sie für jede Emoji-Seite, die Sie in Ihrer Tastatur möchten, ein GridView. Zum Beispiel:

• Binden Sie die erstellten Ansichten in Fragments ein:

  public class FragmentEmojiNature extends FragmentEmoji {
  
  public static final String TAG = "FragmentEmojiNature";
  
  private View mRootView;
  private Emoji[] mData;
  private boolean mUseSystemDefault = false;
  
  private static final String USE_SYSTEM_DEFAULT_KEY = "useSystemDefaults";
  private static final String EMOJI_KEY = "emojic";
  
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
      this.mRootView = inflater.inflate(R.layout.frag_emoji_nature, container, false);
      return this.mRootView;
  }
  
  @Override
  public void onViewCreated(View view, Bundle savedInstanceState) {
      GridView gridView = (GridView) view.findViewById(R.id.Emoji_GridView);
      Bundle bundle = getArguments();
      if (bundle == null) {
          mData = Nature.DATA;
          mUseSystemDefault = false;
      } else {
          Parcelable[] parcels = bundle.getParcelableArray(EMOJI_KEY);
          mData = new Emoji[parcels.length];
          for (int i = 0; i < parcels.length; i++) {
              mData[i] = (Emoji) parcels[i];
          }
          mUseSystemDefault = bundle.getBoolean(USE_SYSTEM_DEFAULT_KEY);
      }
      gridView.setAdapter(new EmojiAdapter(view.getContext(), mData, mUseSystemDefault));
      gridView.setOnItemClickListener(this);
  }

  }

• Erstellen Sie ein neues Layout, das einen View-Pager und einige Komponenten zur Steuerung des Übergangs des View-Pagers enthält (in meinem Fall habe ich eine Drittanbieterbibliothek namens SmartTabLayout wie unten gezeigt verwendet:

PS2: Die Schaltfläche oben dient dazu, die Rücktaste-Funktionalität bereitzustellen

Teil 02: Steuerungsebene

• Erstellen Sie einen Adapter zur Steuerung der Einfügung der Emojis in das GridView, zum Beispiel:

  public class EmojiAdapter extends ArrayAdapter {
  
      private boolean mUseSystemDefault = Boolean.FALSE;
  
      // KONSTRUKTOR
      public EmojiAdapter(Context context, Emoji[] data) {
          super(context, R.layout.rsc_emoji_item, data);
      }
  
      public EmojiAdapter(Context context, List data) {
          super(context, R.layout.rsc_emoji_item, data);
      }
  
      public EmojiAdapter(Context context, List data, boolean useSystemDefault) {
          super(context, R.layout.rsc_emoji_item, data);
          this.mUseSystemDefault = useSystemDefault;
      }
  
      public EmojiAdapter(Context context, Emoji[] data, boolean useSystemDefault) {
          super(context, R.layout.rsc_emoji_item, data);
          this.mUseSystemDefault = useSystemDefault;
      }
  
      @Override
      public View getView(int position, View convertView, ViewGroup parent) {
          View view = convertView;
  
          if (view == null) {
              view = View.inflate(getContext(), R.layout.rsc_emoji_item, null);
              view.setTag(new ViewHolder(view, this.mUseSystemDefault));
          }
  
          Emoji emoji = this.getItem(position);
          ViewHolder holder = (ViewHolder) view.getTag();
          holder.icon.setText(emoji.getEmoji());
  
          return view;
      }
  
      static class ViewHolder {
          EmojiTextView icon;
  
          public ViewHolder(View view, Boolean useSystemDefault) {
              this.icon = (EmojiTextView) view.findViewById(R.id.emoji_icon);
              this.icon.setUseSystemDefault(useSystemDefault);
          }
      }
  }

• Erstellen Sie Klassen, die jede der Emoji-Seiten aufblasen, indem Sie die Emojis (basierend auf dem Unicode-Muster) an das GridView übergeben. Zum Beispiel:

  @Override
  public void onViewCreated(View view, Bundle savedInstanceState) {
      GridView gridView = (GridView) view.findViewById(R.id.Emoji_GridView);
      Bundle bundle = getArguments();
      if (bundle == null) {
          mData = Nature.DATA;
          mUseSystemDefault = false;
      } else {
          Parcelable[] parcels = bundle.getParcelableArray(EMOJI_KEY);
          mData = new Emoji[parcels.length];
          for (int i = 0; i < parcels.length; i++) {
              mData[i] = (Emoji) parcels[i];
          }
          mUseSystemDefault = bundle.getBoolean(USE_SYSTEM_DEFAULT_KEY);
      }
      gridView.setAdapter(new EmojiAdapter(view.getContext(), mData, mUseSystemDefault));
      gridView.setOnItemClickListener(this);
  }

• Erstellen Sie zwei Klassen: Eine, die von EditText erbt, und eine, die von TextView erbt. Unterbrechen Sie die Eingabe jedes davon, um zu erkennen, wann das eingegebene Element ein Emoji ist. Falls ja, fügen Sie einen spannable hinzu, um das Symbol anzuzeigen (hauptsächlich erforderlich, wenn Sie die Standard-Emojis des Systems überschreiben möchten, um etwas zu haben, das wie WhatsApp oder Telegram aussieht);

• Behandeln Sie die Interaktion mit der Bildschirmtastatur. Dies kann auf zwei Arten erfolgen:

  1. Zeichnen Sie einen Dialog über der Bildschirmtastatur;
  2. Deaktivieren Sie die Interaktion der Bildschirmtastatur mit der Aktivität und behandeln Sie das Bildschirmdesign selbst;

PS3: Ich hatte Schwierigkeiten, den Code zu formatieren, und ein Teil des XML wird immer noch nicht angezeigt. Wenn jemand das beheben kann, würde ich mich freuen

Answer 4

Ein Viewgroup kann auch sichtbar oder unsichtbar sein, ohne dass es den Dialog benötigt. Jedes Mal, wenn ich die Emotion initialisiere, verwende ich immer einen Schlüsselwert wie [happy]=R.drawable.happy. Dies ist der Text zur Emotion, während der Inhalt wie [happy] aussieht.

public SpannableString textToImage(String content,Context c){
    SpannableString ss = new SpannableString(content);
    int starts = 0;
    int end = 0;
    if(content.indexOf("[", starts) != -1 && content.indexOf("]", end) != -1){
        starts = content.indexOf("[", starts);
        end = content.indexOf("]", end);
         SharedPreferences shared=c.getSharedPreferences("emotion",0);
         int resource=shared.getInt(content,0);
        try {
            Drawable drawable =c.getResources().getDrawable(resource);  
            if (drawable != null) {
                drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); 
                ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);  
                ss.setSpan(span, starts,end + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
            }
        } catch (Exception ex){

        }
    }
    return ss;

}

Answer 5

Sie können diese Bibliothek für Android verwenden: https://github.com/rockerhieu/emojicon