android - origin - where are emojis from

Implementaciones de diseños de Emoji(Emoticon) View/Keyboard

Question

Estoy intentando descubrir cómo se implementan las selecciones de emoji (emoticonos) en la aplicación de Facebook y la aplicación Google Hangouts . Miré en la aplicación de demostración de SoftKeyboard en las muestras de la API de Android pero la visualización de estas vistas de emoji no se ve como un SoftKeyboard . Se ve y se comporta más como una vista de Dialog personalizada. ¿Alguien tiene una idea de cómo se implementan?

Aplicación de Facebook

Aplicación Google Hangouts

Además, ¿es Unicode la mejor manera de enviar emoticones o hay una alternativa? Noté que algunas secuencias de Unicode como /u1F601 no representan el emoticón correspondiente y, en cambio, esa secuencia simplemente aparece como 1 :

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

Answer 1

Caso 1: Teclado personalizado lanzado primero El teclado está creado en función del tamaño del teclado de Android, ya que este teclado es de altura desconocida Inicialmente, el teclado personalizado se crea con una altura fija; en este caso, debe mover el área de edición por encima del teclado. Teclado personalizado con la altura fija (que se puede usar al establecer el Relleno en el Diseño principal donde se coloca el área Editar (parentLayout-> setPadding (0, 0, 0, Height) -> Donde height es la altura inicial del teclado). No olvides configurar el relleno en 0 cuando el teclado personalizado se destruye o destruye.

caso 2: el teclado de texto de Android se lanza primero

El teclado se conoce Escribir en las preferencias cuando se inicia el teclado personalizado, use esta altura. No es necesario configurar ningún relleno porque esto es lo que el teclado de Android hace por usted.

Answer 2

Encontré un teclado Emoticon muy útil. Este teclado no usa secuencias Unicode, sino solo recursos de imágenes locales. Estoy pensando que este tipo de teclado solo puede ser útil dentro de esta aplicación y no con otras aplicaciones o sistemas operativos.

Por lo tanto, en su lugar, estoy reemplazando el ImageView contiene un activo con un TextView contiene una secuencia Unicode.

Después de hacer referencia cruzada a las Secuencias de Unicode admitidas , así como a la Base de Datos Visual Unicode, me di cuenta de que /u1F601 era una representación Unicode de 32 bits, y la representación de 16 bits se puede establecer de la siguiente manera:

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

Answer 3

Puede usar esta biblioteca basada en la biblioteca de Hieu Rocker: https://github.com/ankushsachdeva/emojicon

Así es como se ve

Answer 4

Puede usar esta biblioteca para Android: https://github.com/rockerhieu/emojicon

Answer 5

Si no desea obtener detalles sobre cómo implementar la funcionalidad Emoji-Keyboard, puede probar estas bibliotecas:

• Rockerhieu / emojicon : implementa el Emoji-Keyboard usando fragmentos (necesitarás manejar la visualización del mismo usando un DialogFragment. No tiene soporte para cambiar el diseño y el predeterminado es el tema Hole Dark;

• Teclado Emoji de Android : basado en el trabajo de Rockerhieu, he creado otra lib que proporciona el teclado emoji más parecido a lo que hemos visto en aplicaciones como WhatsApp o Telegram. Puede manejar el diseño como LinearLayout y, por lo tanto, manejar la interacción con el teclado por sí mismo (como se describe a continuación) o elegir usar Telegram Panel o Whatsapp Panel, ambos proporcionados por la biblioteca, que lo hace por usted.

PS1: ambas bibliotecas son Apache License

Parte 01: Construyendo el diseño

• Crea un GridView para cada Emoji-Página que quieras en tu teclado. Por ejemplo:

• Une las vistas creadas en Fragmentos:

  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);
  }

  }

• Cree un nuevo diseño que contenga un buscapersonas y algún componente para controlar la transición del buscapersonas (en mi caso, he usado una biblioteca de terceros llamada SmartTabLayout como se muestra a continuación:

  <com.ogaclejapan.smarttablayout.SmartTabLayout
      android:id="@+id/emoji_tabs"
      android:layout_width="0dip"
      android:layout_height="40dip"
      android:layout_weight="1"
      app:stl_clickable="true"
      app:stl_defaultTabBackground="@color/rsc_emoji_tab_bkg"
      app:stl_defaultTabTextAllCaps="true"
      app:stl_defaultTabTextColor="#000"
      app:stl_defaultTabTextHorizontalPadding="0dip"
      app:stl_defaultTabTextMinWidth="0dp"
      app:stl_defaultTabTextSize="14sp"
      app:stl_distributeEvenly="true"
      app:stl_dividerColor="@color/rsc_emoji_tab_bkg"
      app:stl_drawDecorationAfterTab="true"
      app:stl_indicatorColor="@color/rsc_emoji_tab_indicator"
      app:stl_indicatorGravity="bottom"
      app:stl_indicatorInFront="false"
      app:stl_indicatorInterpolation="smart"
      app:stl_indicatorThickness="2dp"
      app:stl_overlineThickness="0dp"
      app:stl_titleOffset="24dp"
      app:stl_underlineThickness="0dp"/>
  
  <ImageButton
      android:id="@+id/backspace"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:background="@color/rsc_emoji_tab_bkg"
      android:paddingLeft="10dip"
      android:paddingRight="10dip"
      android:src="@drawable/sym_keyboard_delete_holo_dark"/>

PS2: el botón de arriba existe para proporcionar la funcionalidad de retroceso

Parte 02: capa del controlador

• Cree un adaptador para controlar la inserción de los emojis en GridView, por ejemplo:

  public class EmojiAdapter extends ArrayAdapter<Emoji> {
  
      private boolean mUseSystemDefault = Boolean.FALSE;
  
      // CONSTRUCTOR
      public EmojiAdapter(Context context, Emoji[] data) {
          super(context, R.layout.rsc_emoji_item, data);
      }
  
      public EmojiAdapter(Context context, List<Emoji> data) {
          super(context, R.layout.rsc_emoji_item, data);
      }
  
      public EmojiAdapter(Context context, List<Emoji> 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);
          }
      }
  }

• Crea clases que inflarán cada una de las páginas emoji que pasan los emojis (siguiendo el patrón Unicode) a GridView . es decir:

  @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);
  }

• Cree dos clases: una que se extienda desde EditText y otra que se extienda desde TextView. Intercept la entrada de cada uno de ellos para identificar cuándo el elemento mecanografiado es un Emoji, de ser así, agregue un objeto interactivo para mostrar el ícono (principalmente si necesita anular los emojis predeterminados del sistema para tener algo que se parece a lo que está- aplicación o telegrama, por ejemplo);

• Maneje la interacción con el teclado suave. Se puede hacer de dos maneras:

  1. Dibuje un cuadro de diálogo sobre el teclado suave;
  2. Desactive la interacción del teclado virtual con la actividad y maneje la pantalla dibuje usted mismo;

PS3: Me costó trabajo formatear el código y todavía no se muestra parte del XML, si alguien puede arreglarlo, le agradecería

Answer 6

Un grupo de vistas puede ser visible o desaparecido y también puede volver a vincularlo. No necesita el diálogo. Cada vez que inicializo la emoción, siempre utilizo un valor clave como [feliz] = R.drawable.happy. este es el texto a la emoción mientras que el contenido es como [feliz]

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;

}