web-dev-qa-db-fra.com

Implémentations de la vue / disposition du clavier Emoji (Emoticon)

J'essaie de comprendre comment les sélections emoji (émoticônes) sont implémentées sur l'application Facebook et Google Hangouts. J'ai jeté un œil à l'application de démonstration SoftKeyboard dans les Android API, mais l'affichage de ces vues emoji ne ressemble pas à un SoftKeyboard. Il ressemble et se comporte plus comme une vue personnalisée Dialog Est-ce que quelqu'un a une idée de la façon dont elles sont implémentées?

App Facebook

Facebook

Application Google Hangouts

Hangouts

En outre, nicode est-il le meilleur moyen d’envoyer des émoticônes ou existe-t-il une alternative? J'ai remarqué que certaines séquences Unicode telles que \u1F601 Ne restituent pas l'émoticône correspondante et que cette séquence s'affiche simplement sous la forme 1:

EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\u1F601");
androidandroid-softkeyboardemojiemoticons
58
toobsco42

J'ai trouvé un très utile Clavier Emoticon . Ce clavier n'utilise pas de séquences Unicode, mais plutôt des ressources d'image locales. Je pense que ce type de clavier ne peut être utile que dans cette application et non avec d'autres applications ou systèmes d'exploitation.

Donc, au lieu de cela, je remplace le ImageView contenant un actif par un TextView contenant une séquence Unicode.

Après le référencement séquences Unicode prises en charge ainsi que le base de données Visual Unicode , je me suis rendu compte que \u1F601 était une représentation Unicode 32 bits, et la représentation 16 bits peut être définie comme suit:

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

Vous pouvez utiliser cette bibliothèque basée sur la bibliothèque de Hieu Rocker: https://github.com/ankushsachdeva/emojicon

Voici à quoi ça ressemble

Screenshot

24
ankush

Un groupe de vues visible ou disparu peut également être utilisé, cela ne signifie pas que le dialogue est actif. A chaque initialisation de l'émotion, j'utilise toujours une valeur clé telle que [content] = R.drawable.happy. c'est le texte à l'émotion tout en contenu comme [heureux]

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;

}
7
user1971705

Si vous ne voulez pas entrer dans les détails sur la façon d'implémenter la fonctionnalité Emoji-Keyboard, vous pouvez essayer ces bibliothèques:

  • Rockerhieu/emojicon : implémente le clavier Emoji à l'aide de fragments (vous devrez en gérer l'affichage à l'aide d'un DialogFragment. Il ne prend pas en charge la modification de la mise en page et celle par défaut est le thème Hole Dark.

  • Clavier Android Emoji : Basé sur le travail de Rockerhieu, j'ai construit une autre bibliothèque qui fournit le clavier emoji plus proche de ce que nous 'ai vu dans des applications telles que WhatsApp ou Telegram. Vous pouvez gérer la présentation comme un LinearLayout et, par conséquent, gérer vous-même l'interaction avec le clavier logiciel (comme décrit ci-dessous) ou choisir d'utiliser le panneau Telegram ou le panneau WhatsApp, tous deux fournis par la bibliothèque, qui le fait pour vous.

PS1: les deux bibliothèques sont sous licence Apache

Final Result should look like that

Partie 01: Construire le layout

  • Créez un GridView pour chaque page Emoji que vous voulez dans votre clavier. Par exemple:

  • Lier les vues créées dans les fragments:

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

    }

  • Créez une nouvelle mise en page contenant un pager de vue et un composant pour contrôler la transition du pager de vue (dans mon cas, j'ai utilisé une bibliothèque de troisième partie appelée SmartTabLayout comme indiqué ci-dessous:

    <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: le bouton ci-dessus existe afin de fournir la fonctionnalité de retour arrière

Partie 02: Couche contrôleur

  • Créez un adaptateur pour contrôler l'insertion des émoticônes dans GridView, par exemple:

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

  • Créez des classes qui vont gonfler chacune des pages emoji en passant les emojis (en suivant le modèle Unicode) au GridView. c'est à dire.:

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

  • Créez deux classes: l'une qui s'étend depuis EditText et l'autre qui s'étend depuis TextView. Intercepter l'entrée de chacun d'eux pour identifier quand l'élément tapé est un Emoji. Si oui, ajoutez un spannable afin d'afficher l'icône (principalement nécessaire si vous souhaitez remplacer la valeur par défaut du système émojis d'avoir quelque chose qui ressemble à quoi que ce soit-app ou télégramme, par exemple);

  • Gérer l'interaction avec le clavier virtuel. Cela peut être fait de deux manières:

    1. Tracez un dialogue sur le clavier logiciel.
    2. Désactivez l'interaction du clavier logiciel avec l'activité et gérez vous-même l'écran;

PS3: J'ai eu du mal à formater le code et une partie du code XML n'est pas affichée. Si quelqu'un peut le réparer, je serais reconnaissant

7
Edgar Da Silva Fernandes

Vous pouvez utiliser cette bibliothèque pour Android: https://github.com/rockerhieu/emojicon

4
Hieu Rocker

Cas 1: clavier personnalisé lancé en premier Le clavier est créé en fonction de la taille du Android clavier, car ce clavier a une hauteur inconnue. Initialement, le clavier personnalisé est créé avec une hauteur fixe - dans ce cas vous devez déplacer la zone d'édition au-dessus du clavier personnalisé avec une hauteur fixe (qui peut être utilisée en définissant le remplissage sur la disposition parente où la zone d'édition est placée (parentLayout-> setPadding (0, 0, 0, Hauteur) -> où hauteur est la hauteur initiale de votre clavier.) Remarque: n'oubliez pas de définir le remplissage sur 0 lorsque le clavier personnalisé est détruit ou masqué.

cas 2: Android Le clavier texte est lancé en premier

Le clavier est connu Écrire dans les préférences lorsque le clavier personnalisé est lancé, utilisez cette hauteur. Nul besoin de définir de bourrage car c’est ce que fait le Android Keypad).

3
surya