Facebook
アプリとGoogle Hangouts
アプリで絵文字(絵文字)の選択がどのように実装されているかを把握しようとしています。 Android APIサンプルのSoftKeyboard
Demoアプリを調べましたが、これらの絵文字ビューの表示はSoftKeyboard
のようには見えません。これは、カスタムDialog
ビューのように見え、動作します。誰がこれらがどのように実装されているか考えていますか?
また、 nicode は絵文字を送信する最良の方法ですか、それとも代替手段はありますか? \u1F601
のようないくつかのUnicode
シーケンスは、対応する絵文字をレンダリングせず、代わりにそのシーケンスが1
として表示されることに気付きました。
EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\u1F601");
非常に便利な Emoticon Keyboard が見つかりました。このキーボードはUnicodeシーケンスを使用せず、ローカルイメージアセットのみを使用します。このタイプのキーボードは、このアプリ内でのみ使用でき、他のアプリやオペレーティングシステムでは使用できないと考えています。
その代わりに、アセットを含むImageView
をUnicodeシーケンスを含むTextView
に置き換えています。
サポートされているUnicodeシーケンス および Visual Unicode Database を相互参照した後、\u1F601
は32ビットUnicode表現であり、16ビット表現は次のように設定できることに気付きました。 :
EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\ud83d\ude01");
Hieu Rockerのライブラリに基づいてこのライブラリを使用できます。 https://github.com/ankushsachdeva/emojicon
これは見た目です
ビューグループが表示されるか、表示されなくなると、ダイアログが不要になります。感情を初期化するたびに、私は常に[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;
}
絵文字キーボード機能の実装方法の詳細を知りたくない場合は、次のライブラリを試すことができます。
Rockerhieu/emojicon :はフラグメントを使用して絵文字キーボードを実装します(DialogFragmentを使用して表示を処理する必要があります。レイアウトの変更をサポートしておらず、デフォルトはHole Darkテーマです。
Android Emoji Keyboard :Rockerhieuの作業に基づいて、絵文字キーボードを提供するライブラリを構築しました。 WhatsAppやTelegramなどのアプリで見ました。レイアウトをLinearLayoutとして処理し、したがって、ソフトキーボードとの対話を自分で処理することができます(以下で説明します)か、ライブラリによって提供されるTelegram PanelまたはWhatsApp Panelのどちらを使用するかを選択できます。
PS1:両方のライブラリはApacheライセンスです
キーボードで使用する絵文字ページごとにGridViewを作成します。例えば:
フラグメントで作成されたビューをバインドします。
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
という3番目のパーツライブラリを使用しました。
<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:バックスペース機能を提供するために上記のボタンがあります
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に渡す絵文字ページのそれぞれを膨張させるクラスを作成します。すなわち:
@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から拡張するクラスの2つのクラスを作成します。入力された要素が絵文字かどうかを識別するためにそれぞれの入力をインターセプトし、そうであれば、アイコンを表示するためにspannableを追加します(主にオーバーライドしたい場合に必要)システムのデフォルトの絵文字は、たとえばwhats-appやtelegramのように見えます);
ソフトキーボードとのやり取りを処理します。次の2つの方法で実行できます。
PS3:コードをフォーマットするのに苦労しましたが、まだXMLの一部が表示されていません。誰かがそれを修正できれば感謝します
このライブラリはAndroidで使用できます。 https://github.com/rockerhieu/emojicon
ケース1:最初に起動されるカスタムキーパッドこのキーパッドは高さが不明であるため、キーパッドはAndroidキーパッドのサイズに基づいて作成されます最初は、カスタムキーパッドは固定の高さで作成されます。高さが固定されたカスタムキーパッドの上に編集領域を移動します(編集領域が配置されている親レイアウトにPaddingを設定することで使用できます(parentLayout-> setPadding(0、0、0、Height)-> Weight height is your Initialキーパッドの高さ)。注:カスタムキーパッドが破棄または非表示になっている場合、パディングを0に設定することを忘れないでください。
ケース2:Androidテキストキーパッドが最初に起動されます
キーパッドは、このキーの高さを使用してカスタムキーパッドを起動すると、環境設定に書き込まれます。パディングを設定する必要はありません。これがAndroidキーパッドの機能です。