表情符号（表情符号）视图/键盘布局的实现

时间：2013-05-27 08:12:59

标签： android android-softkeyboard emoji emoticons

我想弄清楚如何在Facebook应用和Google Hangouts应用上实施表情符号（表情符号）选项。我查看了Android API示例中的SoftKeyboard演示应用，但这些表情符号视图的显示看起来不像SoftKeyboard。它的外观和行为更像是自定义Dialog视图。有没有人知道这些是如何实现的？

Facebook App

Facebook

Google Hangouts app

Hangouts

另外，Unicode是发送表情符号的最佳方式还是有替代方法？我注意到Unicode之类的一些\u1F601序列没有呈现相应的表情符号，而是显示为1的序列：

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

6 个答案:

答案 0 :(得分：44)

我发现了一个非常有用的Emoticon Keyboard。此键盘不使用Unicode序列，而只使用本地图像资源。我认为这种类型的键盘只能在这个应用程序中使用，而不适用于其他应用程序或操作系统。

因此，我将使用包含Unicode序列的ImageView替换包含资产的TextView。

交叉引用Supported Unicode Sequences以及Visual Unicode Database之后，我意识到\u1F601是32位Unicode表示，16位表示可以设置为：

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

答案 1 :(得分：24)

您可以使用基于Hieu Rocker库的此库： https://github.com/ankushsachdeva/emojicon

这就是它的外观

Screenshot

答案 2 :(得分：7)

一个视图组可见或消失也可以放大，它不会对话。 每次初始化情绪时，我总是使用像[happy] = R.drawable.happy这样的关键值。 这是情感的文本，而内容就像[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;

}

答案 3 :(得分：7)

如果您不想详细了解如何实现表情符号键盘功能，可以试试这些库：

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

  • Android Emoji Keyboard ：根据Rockerhieu的工作，我已经构建了另一个lib，它提供表情符号键盘，使其更接近我们在WhatsApp或Telegram等应用中看到的内容。您可以将布局作为LinearLayout处理，因此，您自己处理与软键盘的交互（如下所述），或选择使用由库提供​​的Telegram Panel或WhatsApp Panel，为您完成。

PS1：两个库都是Apache许可证

Final Result should look like that

第01部分：构建布局

  • 为键盘中的每个表情符号页面创建一个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：上面的按钮存在以提供退格功能

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

  • 创建将每个emoji页面通过emojis（遵循Unicode模式）扩展到 GridView 的类。即：

    @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扩展。拦截每个输入以识别键入的元素何时是表情符号，如果是，则添加 spannable 以显示图标（如果要覆盖系统默认表情符号，则主要需要有一些看起来像什么应用程序或电报，例如）;

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

    1. 在软键盘上绘制一个对话框;
    2. 禁用软键盘与活动的交互并自行处理屏幕绘图;

PS3：我很难尝试格式化代码，但仍然没有显示某些XML，如果有人可以修复它，我会感激不尽

答案 4 :(得分：4)

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

答案 5 :(得分：3)

案例1：首先推出自定义键盘  键盘是根据Android键盘的大小创建的，因为此键盘的高度是未知的 最初自定义键盘是使用固定高度创建的 - 在这种情况下，您必须使用固定高度移动自定义键盘上方的编辑区域（可以在父布局上设置填充，其中放置编辑区域（parentLayout-＆gt ; setPadding（0,0,0，Height） - ＆gt;其中height是你的Initial Keypad Height）。 注意：Donot忘记在自定义键盘被销毁或隐藏时将填充设置为0。

案例2：Android文本键盘首先推出

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

相关问题
最新问题