61

我试图弄清楚表情符号(表情符号)选择是如何在Facebook应用程序和谷歌Hangouts应用程序上实现的。我查看SoftKeyboard了 Android API 示例中的演示应用程序,但这些表情符号视图的显示看起来不像SoftKeyboard. 它的外观和行为更像自定义Dialog视图。有谁知道这些是如何实现的?

脸书应用

Facebook

谷歌环聊应用

环聊

此外,Unicode是发送表情符号的最佳方式还是有替代方法?我注意到某些Unicode序列,例如\u1F601不呈现相应的表情符号,而是该序列仅显示为1

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

6 回答 6

46

我发现了一个非常有用的表情键盘。此键盘不使用 Unicode 序列,而只是使用本地图像资源。我在想这种类型的键盘只能在这个应用程序中有用,而不能在其他应用程序或操作系统中使用。

因此,我将ImageView包含资产替换为TextView包含 Unicode 序列的资产。

在交叉引用支持的 Unicode 序列以及Visual Unicode 数据库后,我意识到这\u1F601是 32 位 Unicode 表示,16 位表示可以设置为:

EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\ud83d\ude01");
于 2013-06-09T22:50:00.493 回答
25

你可以基于 Hieu Rocker 的库使用这个库: https ://github.com/ankushsachdeva/emojicon

这是它的样子

截屏

于 2014-09-01T21:41:16.483 回答
8

如果您不想详细了解如何实现 Emoji-Keyboard 功能,可以尝试以下库:

  • Rockerhieu / emojicon使用片段实现表情符号键盘(您需要使用 DialogFragment 来处理它的显示。它不支持更改布局,默认是 Hole Dark 主题;

  • Android Emoji Keyboard基于 Rockerhieu 的工作,我构建了另一个库,它提供的 emoji-keyboard 更接近我们在 WhatsApp 或 Telegram 等应用程序中看到的。您可以将布局作为 LinearLayout 处理,因此,您可以自己处理与软键盘的交互(如下所述),或者选择使用库提供的 Telegram Panel 或 WhatsApp Panel 来为您完成。

PS1:两个库都是 Apache 许可证

最终结果应该是这样的

第 1 部分:构建布局

  • 为您想要在键盘中使用的每个表情符号页面创建一个 GridView。例如:

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

    }

  • 创建一个包含视图寻呼机和一些组件来控制视图寻呼机转换的新布局(在我的例子中,我使用了一个名为SmartTabLayout如下所示的第三方库:

    <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:上面的按钮是为了提供退格功能

Part 02:控制器层

  • 创建一个适配器来控制 GridView 中表情符号的插入,例如:

    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);
            }
        }
    }
    
  • 创建将膨胀每个将表情符号(遵循 Unicode 模式)传递给GridView的表情符号页面的类。IE:

    @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);
    }
    
  • 创建两个类:一个从 EditText 扩展,另一个从 TextView 扩展。拦截每个人的输入以识别输入的元素何时是 Emoji,如果是,则添加一个spannable以显示图标(如果您想覆盖系统默认 emojis 以获得看起来像什么的东西,则主要需要这样-例如应用程序或电报);

  • 处理与软键盘的交互。它可以通过两种方式完成:

    1. 在软键盘上绘制一个对话框;
    2. 禁用软键盘与activity的交互,自己处理屏幕绘制;

PS3:我很难尝试格式化代码,但仍然没有显示一些 XML,如果有人可以修复它,我会很感激

于 2016-02-26T14:15:38.810 回答
7

视图组可见或消失也可以理解,它不需要对话框。每次初始化情感时,我总是使用像 [happy]=R.drawable.happy 这样的键值。这是情感的文本,而内容像 [快乐]

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;

}
于 2013-05-27T08:39:10.013 回答
4

您可以将此库用于 Android:https ://github.com/rockerhieu/emojicon

于 2014-01-19T09:02:19.567 回答
3

案例 1:首先启动自定义小键盘 小键盘是根据 Android 小键盘的大小创建的,因为这个小键盘的高度是未知的 最初自定义小键盘是使用固定高度创建的 - 在这种情况下,您必须将编辑区域移动到上方具有固定高度的自定义键盘(可以通过在放置编辑区域的父布局上设置填充来使用( parentLayout->setPadding ( 0 , 0 , 0 ,Height) ->其中高度是您的初始键盘高度)。注意:当自定义键盘被销毁或隐藏时,不要忘记将填充设置为 0。

案例 2:首先启动 Android 文本键盘

启动自定义小键盘时,小键盘已知写入首选项,使用此高度。无需设置任何填充,因为这就是 Android 键盘为您所做的。

于 2014-11-21T16:06:11.230 回答