表情符号(表情符号)视图/键盘布局的实现

Question

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

Facebook App

Google Hangouts应用

此外,Unicode是发送表情符号的最佳方式还是有其他选择？我注意到有些Unicode序列\u1F601不会渲染相应的表情符号而是显示为1:

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

Answer 1

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

所以我改为ImageView包含一个TextView包含Unicode序列的资产.

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

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

Answer 2

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

这是它的外观

Answer 3

一个视图组可见或消失也可以放大,它不会对话.每次初始化情绪时,我总是使用像[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;

}

Answer 4

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

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

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

PS1:两个库都是Apache许可证

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

• 创建将通过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,如果有人可以修复它我会感激不尽